CSSの実習(5) - 要素への背景画像の指定。

要素への背景画像の指定で出来る事。

現時点では、CSSでは各要素に一枚までの背景画像を指定出来ます。

• 現在の公式仕様である、CSS 第二水準第一改訂版では、背景画像は一要素につき最大一枚とされております。
• 将来の仕様となる予定の CSS 第三水準では、背景画像を二枚以上用いる事も可能になる予定で、平成23年11月12日現在でも最新のブラウザでサポートがなされております。ただ、インターネットエクスプローラの場合 8.0 まででは対応しておりません。

これを活用する事で、よりスタイリッシュなウェブ文書を作成する事が可能になります。

また、インライン要素に装飾効果を与えるためにも利用出来ます。

例えば、日本語の文書では強調したい箇所に傍点を打つ習慣がありますが、現時点では CSS で傍点を打つためのプロパティは存在しません。

• これもCSS 第三水準で導入される予定ですが、平成23年11月12日現在ではまだ普及していないようです。

このため、背景画像を用いて傍点っぽく見せると言うやり方が考えられます(今回やってみる事にも含まれております)。

• 但し、インターネットエクスプローラ 7.0まででは折返しで複数行にまたがると背景画像が巧く適用されない不具合があります。
• また、携帯電話などのモバイルブラウザにもインライン要素の背景画像が巧く利用出来ないものがあるようです。

• 背景に関するプロパティについての詳細は、色関連の主なプロパティをご覧ください。

背景に画像を指定する際に注意したい事。

背景に画像を指定する場合、以下の点に注意してください。

背景画像が表示されない場合を考えてください

背景画像が表示されなくても読めるようにしましょう

閲覧者の中には、都合で画像の読込みをしない設定にして閲覧しているかも知れません。

そのような場合には背景には画像が表示されず、背景色の無地となります。

その結果、前景色(文字の色)と背景色が近い場合には読みたくても読めないと言う事態になり兼ねません。

また、背景画像の読込みに時間が掛かり過ぎる場合、背景画像の読込みが完了するまではやはり背景色の無地のままとなります。

このような状況でやはり前景色と背景色が近くなっていて文字が読めない状況と言うのは、閲覧者にとっては相当ストレスを与えるものです。

この対策として、背景画像の有無に拘わらず適切な背景色を与えて、背景画像が表示されない場合の可読性を確保する必要があります。

背景画像が表示されなくても、意図が伝わるようにしましょう

日本語文書で強調されたフレーズに打たれる傍点は、現時点で CSS での実現は出来ません。

このため、背景画像で代用する事となりますが、背景画像が表示されないとその傍点が見えなくなるため、強調の意図が伝わらなくなる恐れがあります。

強調などのように適切に伝えたいものであれば、代わりの背景色を指定すると良いでしょう。

テキストが読み難くなる背景画像は避けましょう

背景画像に紛れてテキストが読めなくなっては困ります。

このため、以下の点に注意してください。

• 前景色(文字の色)を適切なものにして、可読性を確保しましょう。
• 背景画像も、色にムラのない適切なものを撰ぶようにしましょう。

以上述べた通り、背景画像を用いる場合には(勿論用いない場合でも)適切な前景色と背景色の指定は不可欠です。

今回やりたい事。

今回は、以下の事をしてみましょう。

1. <h2>要素(第二等級見出し)について、右端に以下のような画像 Background-H2.GIF を背景に使います。
   • 

   この画像は実は高さ 1ピクセルしかありませんが、縦方向に繰返し並べる事で要素の上パディング上端から下パディング下端までに及ぼされる事になります。

   尚、この画像は CSS スタイル定義ファイルと同じディレクトリ(フォルダ)に置かれているものと仮定します。

2. <em>要素(強調)について、文字を黒にする代わりに、以下の画像 Background-EM.GIF を上端に横方向に並べる事で、強調の傍点っぽい表示を実現します。
   • 

   この画像はフォントの幅が16ピクセルズで無いとずれるのですが、現状では一文字ごとに背景を指定する方法は無いので、傍点っぽい表示と言う事になるのです。

   • ただ、この方法だと閲覧者が想定している文字サイズと異なったサイズで閲覧していると、傍点がずれてしまうと言う難点がありますので、あくまでも傍点っぽく見せると言う考えでやると良いでしょう。
     • 将来の仕様となる CSS 第三水準には、背景画像の大きさを調整するプロパティが導入されますが、これの対応はやはりインターネットエクスプローラ 8.0 までが非対応なので、ちょっと躊躇います。
     • 実は、一文字一文字に綺麗に傍点を打つ方法もありますが、その方法は初心者が学ぶべき範疇を超えているので、初心者の段階が終わったら挑戦してみると良いでしょう。

   この画像も、CSS スタイル定義ファイルと同じディレクトリ(フォルダ)に置かれているものと仮定します。

3. その他の要素には背景画像は付けません。

ここでは、実習としてやりたい事を挙げておりますが、もし読者の方がここで挙げているスタイルではなく、別のスタイルにしてみたいと思うのであれば、それを実際にやってみるのが何よりの実習です。

是非挑戦してみてください。

実際のスタイル定義。

さて、これから実際に前回までのスタイル定義ファイル style.css にスタイルを追記していきましょう。

• 前回は枠線(ボーダ)の指定をしております。

* {
    background-color: transparent;
    background-image: none;
    color: #000;
    margin: 0;
    padding: 0;
    border: none 0;
    background-color: #fff;
    color: #000;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    text-indent: 0;
    }

h2 {
    margin: 3em 0 1em;
    border-color: #cc0;
    border-style: solid;
    border-width: 1px 2px 4px;
    background-color: #fff;
    background-image: url("Background-H2.GIF");
    background-repeat: repeat-y;
    background-position: right top;
    color: #090;
    font-size: 120%;
    line-height: 1.2em;
    }

em {
    padding-top: 4px;
    background-color: #fee;
    background-image: url("Background-EM.GIF");
    background-repeat: repeat-x;
    background-position: left top;
    color: #000;
    }

ここまででのスタイル定義ファイルの纏め。

以上のスタイルを纏めると、スタイル定義ファイル style.css は以下のようになっているでしょう。

• 読み飛ばす

@charset "shift_jis";

* {
    background-color: transparent;
    background-image: none;
    color: #000;
    margin: 0;
    padding: 0;
    border: none 0;
    background-color: #fff;
    color: #000;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    text-indent: 0;
    }

html {
    background-color: #fff;
    padding: 2em 1em;
    }

h1 {
    margin-bottom: 1em;
    background-color: #ff0;
    color: #090;
    font-style: italic;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.2em;
    text-align: center;
    }

h2 {
    margin: 3em 0 1em;
    border-color: #cc0;
    border-style: solid;
    border-width: 1px 2px 4px;
    background-color: #fff;
    background-image: url("Background-H2.GIF");
    background-repeat: repeat-y;
    background-position: right top;
    color: #090;
    font-size: 120%;
    line-height: 1.2em;
    }

p {
    margin: 1em 0 0 2em;
    text-indent: 1em;
    }

ul {
    margin: 1em 0 0 4em;
    }

figure {
    margin: 1em 0 0 2em;
    }

hr {
    margin: 3em 0 1em;
    border: 1px solid #888;
    }

a:link {
    color: #090;
    text-decoration: underline;
    }

a:visited {
    color: #000;
    text-decoration: underline;
    }

dfn {
    border-bottom: 2px solid #cc0;
    color: #090;
    }

em {
    padding-top: 4px;
    background-color: #fee;
    background-image: url("Background-EM.GIF");
    background-repeat: repeat-x;
    background-position: left top;
    color: #000;
    }

このスタイル定義ファイルを適用したHTML文書を表示させると以下のようになります。

前回までのスタイル定義の場合

今回のスタイルを適用した場合

制作者の環境は少し大きめのフォントを設定しているので、見事に<em>要素の画像がずれておりますが、現状では仕方がありません。

• 先に述べた通り、一文字一文字に綺麗に傍点を打つ方法もありますが、その方法は初心者には難しいと思われますので、ある程度理解出来るようになったら挑戦してみると良いでしょう。