【CSS講座④】擬似要素を使ってカッコ良くHTMLを装飾する

今回は疑似要素を使って、カッコ良くHTMLを装飾したいと思います。

CSSの基本を理解する

CSS（ Cascading Style Sheets ）とは、Webサイトをデザインするためのマークアップ言語です。CSSは、セレクタ・プロパティ・バリューの構成で成り立っていることを最初に理解してください。

マークアップ言語には、HTMLのほかにSGML、XHTML、XMLなどがあります。

CSSの書き方 … セレクタ { プロパティ : 値 }

  1. セレクタとは、スタイルをHTMLのどの要素に適用するのかを決める役割になります。
  2. 次のプロパティとは、どんな種類のスタイルを適用するのかを決める役割になります。
  3. 最後のバリューとは、どのように適用するか値を決める役割になります。

疑似要素とは

疑似要素とは、要素の一部に対してスタイルを適用して装飾する、または対象の要素に疑似的な要素を追加して装飾を適用するセレクタのことを指します。

＜おさらい＞要素とは、開始タグから終了タグまでの間にある内容も含めて全部が「要素」になります。

疑似要素の書き方

疑似要素の書き方は、要素名::疑似要素 { プロパティ: 値; } になります。

例：h2::first-letter { color: red; }

要素名の後に、コロン（：）は2つ指定してください。ちなみに、CSS3以前であるIE7やIE8などの古いブラウザでは、コロンを1つのみ指定してください。

疑似要素の種類

以下、いくつかの疑似要素を紹介したいと思います。

①::beforeと::after

beforeとafterは、対象の要素に擬似的に要素を追加して装飾を適用するセレクタになります。

例えば、divタグの文字に対し、beforeを使って文字の前に、afterを使って文字の後に文字を追加することができます。

例：

  1. div::before {
  2.   content: “『”;
  3. }
  4. div::after {
  5.   content: “』”;
  6. }
  7. ～～～～～～～～～～～～～～～～～～～
  8. <div>これはテストです。</div>

※文字を追加する場合は、contentプロパティを利用します。

content プロパティとは

contentプロパティとは、疑似要素（:beforeもしくは:after）と組み合わせて、テキストや画像などのコンテンツを挿入する際に使います。

【もう一歩踏み込み】beforeとafterの活用例

絶対配置を使ってラベル付きヘッドライン（H2）を作ってみたいと思います。使うのはpositionプロパティになります。

positionプロパティとは

positionプロパティとは、要素の位置を決める際に使います。例えば、値を”relative”とした場合は、現在の位置を基準に相対的な位置を決めることができ、値を”absolute”とした場合は、親要素を基準に絶対的な位置を決めることができます。

例：

  1. h2 {
  2.   position: relative;
  3.   background: blue; /* 背景色 */
  4.   padding: 3.0em; /* 余白 */
  5. }
  6. h2:before{
  7.   position: absolute;
  8.   content: “お知らせ”;
  9.   top: 0; /* 位置上 */
  10.   left: 0; /* 位置左 */
  11.   color: white; /* 文字色 */
  12.   background: yellow; /* 背景色 */
  13.   padding: 0.2em; /* 余白 */
  14. }
  15. ～～～～～～～～～～～～～～～～
  16. <h2>はじめまして。ドラえもん</h2>

※疑似要素のbeforeとafterは、どちらを使っても同じ処理内容になります。

②::first-letter

first-letterは、1文字目を装飾したい場合に用いられる（要素の一部に対してスタイルを適用して装飾する）セレクタになります。

例えば、h2タグの先頭文字を大きく赤文字にしてみます。

例：

  1. h2::first-letter {
  2.   font-size: 150%; /*フォントサイズを150%大きく */
  3.   color: red; /* 文字色を赤 */
  4. }

③::first-line

first-lineは、文章の１行目を装飾したい場合に用いられる（要素の一部に対してスタイルを適用して装飾する）セレクタになります。

例えば、divタグの1行目の文章に対し、アンダーラインを引き、文字サイズを変更してみます。

例：

  1. div::first-line {
  2.   text-decoration: underline;
  3.   font-size: 18px;
  4. }
  5. ～～～～～～～～～～～～～～～～～～～
  6. <div>
  7.   吾輩は猫である。
  8.   名前はまだない。
  9.   どこで生れたか頓（とん）と見当がつかぬ。
  10. </div>

今日の問題

まず始めに、以下をメモ帳で記述し、CSS_Chapter04.htmlファイルとして保存してください。

  1. <html>
  2. <head>
  3. <meta charset=”UFT-8″>
  4. <title>ここページのタイトルです</title>
  5. <style>
  6.   H2 { color: blue }
  7. </style>
  8. <meta name=”description” content=”ページの要約文”>
  9. </head>
  10. <body>
  11. <h2>犬について</h2>
  12. <h3>犬とは</h3>
  13. <p>イヌ属に分類される哺乳類の一種である。 </p>
  14. <p class=”info”>古来、日本ではヤマイヌ（狼）に対して「イエイヌ」とも言っていた。</p>
  15. <p>親類のものから西洋製のナイフを貰つて奇麗な刃を日に翳（かざ）して、友達に見せて居たら、一人が光る事は光るが切れさうもないと云つた。</p>
  16. <h3>野犬とは</h3>
  17. <p>野生化したものを野犬といいます。</p>
  18. </body>
  19. </html>

問1

H2タグの背景色を灰色にし、文字を白、余白を10pxにしてください。

問2

H3タグに下線（実線）を引いて、先頭文字のみフォントサイズを大きくしてください。

問3

class=infoに対し、positionプロパティを使ったラベル付きにしてください。

宿題

CSS_Chapter04.htmlをカスタマイズして、オリジナルのスタイルで作ってみてください。

コメント