CSSによる文字飾り

フォント(文字)については、 文字の大きさを指定する font-size (既出)プロパティ以外に、 font-styleや、 font-weightプロパティが利用できます。

font-style プロパティは、値として italic、noneが指定でき、 斜体文字にすることができます。

また、font-weight プロパティは、値として bold、bolder、lighter、noneが指定でき、 フォントの太さを決めることができます。 bolderとlighterを指定すると、それぞれ、 現在のフォントの太さより少し太いおよび細いフォントになります。 boldを指定すると、決められた太さの太文字(bold)になります。

以下に、それぞれの値に対する動作を示します。

.bigfont {
  font-size: 1.3em;
}
.smallfont {
  font-size: 0.7em;
}
.shatai {
  font-style: italic;
}
.futomoji {
  font-weight: bold;
}

<p> 
  これが通常文字です。
  <span class="bigfont">これが1.3emの文字です。</span>
  <span class="smallfont">これが0.7emの文字です。</span> <br>
  <span class="shatai">これが斜体(italic)です。</span>
  <span class="futomoji">これが太文字(bold)です。</span>
</p> 

Webブラウザでは、次のように表示されます。

テキストの装飾を指定するには text-decorationプロパティを利用します。

値として設定できるのは、 underline、overline、line-through、blink、noneです。 以下に、それぞれの値に対する動作を示します。 (「none」は、何もしないということですので、以下の例にはありません。)

.kasen {
  text-decoration: underline;
}
.uesen {
  text-decoration: overline;
}
.uchikeshi {
  text-decoration: line-through;
}
.tenmetsu {
  text-decoration: blink;
}

<p> 
  <span class="kasen">ここには下線が引かれます。</span>
  <span class="uesen">ここには上線が引かれます。</span>
  <span class="uchikeshi">ここには打ち消し線が引かれます。</span>
  <span class="tenmetsu">ここは点滅します。</span>
</p> 

Webブラウザでは、次のように表示されます。

これまでも利用してきたように、 文字の色を指定するには、colorプロパティを利用します。 文字色は正確には、「前景色 (foreground color)」と呼びます。 値として設定できるのは、 RGB値の色コード、色名です。

また、 背景色は、background-colorプロパティにより指定します。 値として設定できるのは、 RGB値の色コード、色名、transparentです。 transpearentを指定すると、親要素(親ボックス)の背景色が透けて見えます。

以下に、設定例とWebブラウザでの表示結果を示します。

.fgc_aka {
  color: red;
}

.bgc_usumidori {
  background-color: #cf6;
}

.bgc_usuki {
  background-color: #ff6;
}

<div class="bgc_usumidori"> 
  <p> 
    ここは、通常のブロックです。
    親要素のdivで、薄緑色の背景が付けられています。
  </p>
  <p class="bgc_usuki"> 
    ここは、薄黄色の背景色を付けています。
    文字色も、<span class="fgc_aka">この部分を赤に</span>
　　しています。<br>
  </p>
  <p> 
    ふたたび、通常のブロックです。
  </p>
</div>

Webブラウザでは、次のように表示されます。

背景には、単に色だけでなく画像を貼り付けることもできます。 背景に画像を貼り付けるには、background-image プロパティを用います。 値として、 背景画像をurl()関数で指定します。

それでは、この を背景画像として貼り付けてみましょう。

.bg_img {
  background-image: url("../week10/bgpt.png");
}

上記のように、スタイルを定義して、以下のようにHTMLで利用してみます。

<p> 
  ここは通常のブロックです。
</p> 
<p class="bg_img"> 
  このブロックには、背景画像を貼り付けてみました。<br>
  元の画像は、小さな正方形を4つ組み合わせたものです。<br>
  実際には、その画像が繰り返し表示されていますね。
</p> 

すると、Webブラウザではこのように表示されます。

背景画像の繰り返し方法は、 background-repeat プロパティでコントロールできます。 値として、 repeat、repeat-x、repeat-y、no-repeat が指定でき、それぞれ、「要素全体に敷きつめて表示」、 「水平方向のみ繰り返して表示」、「垂直方向のみ繰り返して表示」、 「一つだけ表示して繰り返さない」ということになります。

通常、背景画像は、文書(前景)のスクロールとともに移動しますが、 文書をスクロールしても移動しないようにすることもできます。 これは、 background-attachment プロパティで指定できます。 値として、 scroll、fixed が指定されたら、それぞれ、 「背景画像が文書とともにスクロールする」、 「スクロールしても背景画像が移動しない」 という動作になります。

それでは、この を背景画像として貼り付けてみましょう。

.bg_img_no_rep {
  background-image: url("../week08/bgpt.png");
  background-repeat: no-repeat;
}
.bg_img_suihei {
  background-image: url("../week08/bgpt.png");
  background-repeat: repeat-x;
}

上記のように、スタイルを定義して、以下のようにHTMLで利用してみます。

<p class="bg_img_no_rep"> 
  このブロックには、背景画像を1個だけ貼り付けてみました。<br>
  background-repeatプロパティの値を「no-repeat」にしています。<br>
  このブロックの左上に1個だけ表示されていますね。
</p> 
<p class="bg_img_suihei"> 
  このブロックには、背景画像を水平方向にだけ
　繰り返し貼り付けてみました。<br>
  background-repeatプロパティの値を「repeat-x」にしています。<br>
  指定した画像は、横一列に繰り返し表示され、
　垂直方向には表示されてませんね。
</p> 

すると、Webブラウザではこのように表示されます。

同じプロパティに対して別の値を指定したらどちらの設定が有効になるでしょう？

例えば、 以下のようなスタイルを定義したとします。 どちらにも text-align プロパティが設定してありますが、一方は left ですし、 他方は right です。

p.left_red {
  text-align: left;
  color: red;
}

p.right_bigfont {
  text-align: right;
  font-size: 1.3em;
}

上記のようなスタイルを以下のように、同時に利用したらどうなるでしょうか？ HTMLで適用するときに設定するclass名の順序が関係あるかもしれませんので、 念のために、class名の順序を入れ換えた2つの場合を試してみましょう。

<p class="left_red right_bigfont"> 
  December 1, 2005<br>
  2005年12月1日
</p> 
<p class="right_bigfont left_red"> 
  December 1, 2005<br>
  2005年12月1日
</p> 

すると、Webブラウザではこのように表示されます。

表示結果は、どちらのブロックも同じで、「右寄せ」され、 「赤色文字」で「フォントサイズが大きい (1.3emの大きさ)」状態です。 ということは、HTMLファイル中でのclassセレクタの指定順序は、 Webブラウザでの表示に関係ないということですね。

また、文字色が赤なのとフォントサイズが大きいことで、 2つのclassセレクタがどちらも有効に働いていることがわかります。 ただ、「右寄せ」されていますね。ということは、 CSSファイルでは後に定義した p.right_bigfontclassセレクタの text-align プロパティが有効になっていることになりますね。

この結果からも想像できますように、CSSでは、 「後から指定(定義)したスタイルが優先的に適用される」ことになっています。ですから、同じプロパティをもつセレクタを、 同時に利用するときには、CSSの定義順序がその表示結果に反映されますので 注意が必要です。