テキストを均等配置の落とし穴を解決

<< 開発チームブログ

<< HOME

開発チームブログ

テキストを均等配置の落とし穴を解決

投稿日
2009年08月31日
カテゴリ
開発チームブログ

前回はテキストの均等配置について書きました。

// HTMLソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<p>
    ～長い文章を入れてみてください。～
</p>

// CSSソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

p {
    text-align: justify;
}
* html p {
    text-justify: inter-ideograph;
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

text-alignプロパティに"justify"をあてて、"justify"に対応できないIE6については、
CSSハックを使ってIEの独自拡張 text-justify プロパティをあてて対応するというものでした。

これで主要なブラウザではキチンと<p>タグの中は均等配置されていると思います。
...が、タイトルの通り落とし穴があったのでした。


実は、この書式ではW3CのCSSバリデーターに通りません。

CSSのチェックのため、W3C CSS Validation Serviceをよく利用しますが、
ここでチェックするとエラーとして表示されます。

これをバリデーターに通るように直しましょう。
IEには、特定のIEのみに適用される条件分岐の記述が独自に用意されています。
(いや～、IEは独自機能が多いですね。)



// HTMLソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<head>
～中略～
<link rel="stylesheet" type="text/css" href="normal.css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6fix.css" media="screen" />
<![endif]-->
</head>

<body>
<p>
    ～長い文章を入れてみてください。～
</p>
<body>

// CSSソース (normal.css)  //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
p {
    text-align: justify;
}

// CSSソース (ie6fix.css)  //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

p {
    text-justify: inter-ideograph;
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

まず、CSSを通常用のCSS(normal.css)とIE6のみに読み込ませるCSS(ie6fix.css)に分けておきます。
ie6fix.css の方は、IE6でしか読み込ませないので、CSSハックを取り除いています。

次に、HTMLの<head>タグの中に読み込ませるCSSを指定するのですが、IE6以外は normal.css しか読みません。
normal.css のあと、<!--[if IE 6]> ～ <![endif]--> の間にie6fix.cssを読み込む記述をします。

この、<!--[if IE 6]> ～ <![endif]-->がIEの独自機能で条件分岐を指定するものです。
よーく見ると始まりと終わりに <!-- ～～ --> が含まれていますね。
この条件分岐は、他のブラウザではただのコメントとして扱われるので、ie6fix.cssを読み込むことはありません。
IE6では、normal.cssを読み込んだ後、ie6fix.cssを読み込みます。


このIE独自の書式は、条件分岐の書き方によって、読み込むIEのバージョンを変えることができます。

ターゲットのブラウザのみを指定 [例ではIE6のみが条件に合致]
<!--[if IE 6]> ～ <![endif]-->

ターゲットのブラウザ未満を指定 [例ではIE6未満のバージョンが条件に合致(IE6は含まない)]
<!--[if lt IE 6]> ～ <![endif]-->

ターゲットのブラウザ以下を指定 [例ではIE6以下のバージョンが条件に合致(IE6は含まれる)]
<!--[if lte IE 6]> ～ <![endif]-->

ターゲットのブラウザより上位を指定 [例ではIE6より上位のバージョンが条件に合致(IE6は含まない)]
<!--[if gt IE 6]> ～ <![endif]-->

ターゲットのブラウザ以上を指定 [例ではIE6以上のバージョンが条件に合致(IE6は含まれる)]
<!--[if gte IE 6]> ～ <![endif]-->


このようにIE6でしか読み込ませないCSSを分け、条件分岐によってIE6のみが読み込める記述をすることで、
W3CのCSSバリデータにも対応することができます。
この方法は、今回のtext-alignプロパティ以外でも使えますので、覚えておくとCSSのバリエーションが広がります。

ちなみに、この条件分岐は<head>タグ内のみならず<body>タグの中でも使えますので、

// HTMLソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<p>
    あなたはIE6を使っていますか？
    <!--[if IE 6]>
    あなたはIE6を使っていますね！
    <![endif]-->
</p>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

というように、文章中でも使えます。(あまり使う機会は無いと思いますけど。)
 

注目の情報
Return to Top