サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

CSS3: 画像にロールオーバーしたときテキストを表示する

ID: FN1503001 Technique: HTML5 and CSS Library: Prefix free

CSS3のプロパティtransformやtransitionを用いると、要素をアニメーションさせたり変形することができます。Lopan.jp「動くCSSのためのメモ。」はさまざまな作例で、CSS3の効果を解説しています。それらを参考に、イメージとテキストが組合わったサンプルを3つつくりました。いずれも、マウスポインタを画像に重ねると、それを説明するテキストが表れます(サンプル001)。JavaScriptコードは書いていません。

サンプル001■CSS3: Showing texts over images on rollover *デフォルトの画面は少し狭いので、フルスクリーンにすると全体が見えます。


01 画像の上にテキストが広がる

初めのサンプルは、画像にマウスポインタを重ねたら、テキストが真ん中から広がって表れるようにします。画面に置く画像とテキストの要素は、つぎのようにリストで組立てます。li要素にはclass属性(type1)を定めました。テキストはさらに説明リスト要素(dl要素)として加えています。

<ul>
  <li class="type1">
    <img src="images/ActionScript_30_Performance_Tuning.jpg">
    <dl>
    <dt>ActionScript 3.0<br>
パフォーマンス<br>
チューニング</dt>
    <dd>3Dグラフィックス・Flashゲームから最大限のパフォーマンスを引き出せ！</dd>
    <dd><a href="http://fumiononaka.com/Books/ActionScript_30_Performance_Tuning.html" target="_blank">More info</a></dd>
    </dl>
  </li>
</ul>

アニメーションなどの手を加える前に、以下のCSSで静的にテキスト(dl要素)をリストの画像と同じ大きさに定めました(図001)。なお、行頭の番号は後にCSSの定めをまとめたコード001にもとづきます。

図001■CSSで定めた画像とテキストの静的なレイアウト
図001

  1. body {
  2.   background: #deddcd;
  3.   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  4. }
  5. a {
  6.   color: whitesmoke;
  7. }
  8. a:hover {
  9.   color: yellow;
  10.   text-decoration: none;
  11. }
  12. ul {
  13.   list-style: none;
  14.   top: 0;
  15.   height: 200px;
  16.   margin: 50px 0px;
  17.   padding: 0;
  18.   text-align: center;
  19. }
  20. ul li,
  21. ul li dl {
  22.   width: 160px;
  23.   height: 200px;
  24. }
  25. ul li {
  26.   display: inline-block;
  27.   position: relative;
  28.   margin: 0 5px;
  29. }
  30. ul dl {
  1.   margin: 0;
  2.   padding: 20px 10px;
  3.   color: white;
  4.   background: rgba(205,92,92, 0.75);
  5. }
  6. ul dl dt {
  7.   margin-bottom: 0.5em;
  8. }
  9. ul dl dd {
  10.   margin: 0;
  11.   font-size: 10px;
  12.   line-height: 1.6em;
  13.   text-align: justify;
  14.   word-break: break-all;
  15. }
  16. ul dl dd:last-of-type {
  17.   margin-top: 10px;
  18.   text-align: right;
  19. }
  20. ul a {
  21.   padding: 0.3em 0.5em;
  22.   background-color: #7a3f3a;
  23. }

さて、テキストをリストの画像と重ねましょう(図002)。そのためには、以下のようにCSSでdl要素のpositionプロパティをabsoluteとし、topプロパティの値は0に定めます(第32〜33行目)。

図002■CSSで画像にテキストの領域が重ねられた
図002

  1. ul dl {
  2.   box-sizing: border-box;
  3.   position: absolute;
  4.   top: 0;
  1. }

要素の大きさを揃えるには、box-sizingプロパティを使うと便利です(「レスポンシブデザインに便利！今さらCSS3のbox-sizingについて話してみます」参照)[*1]。CSSのボックスにはいくつかの領域があります(「Box model」参照)。box-sizingプロパティにより、ボックスサイズを定めるwidthおよびheightプロパティに含める領域が選べます(表001)。ここではborder-boxとしました(第31行目)。

box-sizing: ボックスサイズの計算方法
表001■ボックスサイズの計算に含まれる領域
ボックスサイズの計算方法 padding border margin
content-box(デフォルト) × × ×
padding-box ○ × ×
border-box ○ ○ ×
inherit 親要素を継承

いよいよ、画像にマウスポインタを重ねたら、テキストが真ん中から広がって表れるようにします。transformプロパティは、2次元または3次元の空間で座標を変換します(MDN「CSS transforms の利用」参照)。プロパティには、つぎのようにtransform-function(変換関数)を定めます(表002)。伸縮に用いるのは、scale()関数です。

transform: 変換関数
表002■おもな2次元のCSS変換関数
変換関数 変換
rotate(angle) 時計回りに引数の角度回す。
scale(sx[, sy]) 引数の比率だけ水平および垂直に伸縮する。引数がひとつのときは、水平と垂直は同じ比率とされる。
translate(tx[, ty]) 引数の値だけ水平および垂直に移動する。引数がひとつのときは、垂直の移動値は0とされる。

そして、アニメーションはtransitionプロパティで与えます。アニメーションの仕方は、いくつかのプロパティで変えられます(MDN「CSS transition の使用」)。もっとも、それぞれにデフォルト値が与えられていますので、アニメーションにかける時間だけ定めれば済む場合が多いでしょう。

transition: 時間

このお題では以下のCSSのように、dl要素(クラスtype1)に不透明度と変形のアニメーションを加えました(図003)。テキストのdl要素は、初めopacityプロパティが0で透明、transformプロパティではscale()関数で伸縮率が水平0.75で垂直0につぶされています(第58〜59行目)。そして、transitionプロパティでアニメーションを0.5秒間にしました(第60行目)。マウスポインタを重ねると:hover疑似クラスの定めにより、テキストのdl要素は真ん中から広がりながら(伸縮率水平1・垂直1)透明から不透明(opacity値1)に変わってゆきます(第63〜64行目)。

図003■画像にマウスポインタを重ねるとテキストが不透明度を増しながら真ん中から広がる
図003左 → 図003右
  1. .type1 dl {
  2.   opacity: 0;
  3.   transform: scale(0.75, 0);
  4.   transition: 0.5s;
  5. }
  6. .type1:hover dl {
  7.   opacity: 1;
  8.   transform: scale(1, 1);
  9. }

ここまでのCSSの定めをまとめたのが、つぎのコード1です。画像の領域にマウスポインタを重ねると、その真ん中からテキストが広がり、透明度を増して表れます(前掲図003)。

コード001■画像にロールオーバーすると真ん中からテキストが広がって表れる
  1. body {
  2.   background: #deddcd;
  3.   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  4. }
  5. a {
  6.   color: whitesmoke;
  7. }
  8. a:hover {
  9.   color: yellow;
  10.   text-decoration: none;
  11. }
  12. ul {
  13.   list-style: none;
  14.   top: 0;
  15.   height: 200px;
  16.   margin: 50px 0px;
  17.   padding: 0;
  18.   text-align: center;
  19. }
  20. ul li,
  21. ul li dl {
  22.   width: 160px;
  23.   height: 200px;
  24. }
  25. ul li {
  26.   display: inline-block;
  27.   position: relative;
  28.   margin: 0 5px;
  29. }
  30. ul dl {
  31.   box-sizing: border-box;
  32.   position: absolute;
  33.   top: 0;
  34.   margin: 0;
  35.   padding: 20px 10px;
  36.   color: white;
  37.   background: rgba(205,92,92, 0.75);
  38. }
  39. ul dl dt {
  40.   margin-bottom: 0.5em;
  41. }
  42. ul dl dd {
  43.   margin: 0;
  44.   font-size: 10px;
  45.   line-height: 1.6em;
  46.   text-align: justify;
  47.   word-break: break-all;
  48. }
  49. ul dl dd:last-of-type {
  50.   margin-top: 10px;
  51.   text-align: right;
  52. }
  53. ul a {
  54.   padding: 0.3em 0.5em;
  55.   background-color: #7a3f3a;
  56. }
  57. .type1 dl {
  58.   opacity: 0;
  59.   transform: scale(0.75, 0);
  60.   transition: 0.5s;
  61. }
  62. .type1:hover dl {
  63.   opacity: 1;
  64.   transform: scale(1, 1);
  65. }

[*1] CSS3の機能は、ブラウザとそのバージョンによってはベンダー接頭辞を加えなければなりません。たとえば、WebKit系なら-webkit-、Mozilla系は-moz-などです。本稿では、JavaScriptライブラリ「Prefix free」を用いることにより、ベンダー接頭辞は省きました(図004)。ベンダー接頭辞は、Prefix freeが自動的につけてくれるのです(「CSS3: 3次元空間に立方体をつくって回す ー transformプロパティ」02「CSSプロパティのベンダー接頭辞と『Prefix free』」参照)。

<script src="lib/prefixfree.min.js"></script>

図004■Prefix freeサイト
図004

02 背中合わせの画像とテキストを水平に回す

つぎのサンプルは、画像の後ろにテキストを背中合わせに隠し、マウスポインタが重なったら水平に裏返してテキストを示します。HTMLのリストに加える画像とテキストの要素は、つぎのように前述01「画像のうえにテキストが広がる」と同じ組立てです。li要素には新たなclass属性(type2)を定めました。

<ul>
  <li class="type1">
    <!-- [中略] -->
  </li>
  <li class="type2">
    <img src="images/CreateJS_Style_Book_157x200.png">
    <dl>
    <dt>Webクリエイター<br>
のためのCreateJS<br>
スタイルブック</dt>
    <dd>JavaScript + HTML5で作るアニメーション/インタラクティブコンテンツ</dd>
    <dd><a href="http://fumiononaka.com/Books/CreateJS_Style_Book.html" target="_blank">More info</a></dd>
    </dl>
  </li>
</ul>

要素をy軸で水平に回すには、transformプロパティにrotateY()関数で角度を与えます(表003)。ただし、transformプロパティを定めただけでは、水平に伸び縮みしているようにしか見えません(図005左)。以下のCSSのように、perspectiveプロパティで遠近感を与えなければならないのです(第68行目)。なお、行番号は後にまとめて掲げるコード002にもとづきます。

表003■おもな3次元のCSS変換関数
変換関数 変換
rotateX(angle)
rotateY(angle)
rotateZ(angle) 		xyz各軸を中心に引数の角度回す。
scaleX(scale)
scaleY(scale)
scaleZ(scale) 		xyz各軸の方向に引数の比率伸縮する。
translateX(length)
translateY(length)
translateZ(length) 		xyz各軸の方向に引数の値移動する。

図005■perspectiveプロパティで遠近感が加わる
図005左   図005右

perspectiveプロパティに定める数値は、カメラのレンズの焦点距離に当たります。値が小さいほど、遠近の差が際立ちます(ニコンイメージング「遠近感（パースペクティブ）」参照)。また、transform-styleプロパティをpreserve-3dとして、3次元座標空間の扱いであることを示します(第69行目)。これで、遠近感の加わった3次元表現になりました(図005右)。

  1. .type2 {
  2.   overflow: visible;
  3.   perspective: 400px;
  4.   transform-style: preserve-3d;
  5. }
  6. .type2 img,
  7. .type2 dl {
  8.   transition: 0.8s;
  1. }
  2. .type2:hover img {
  3.   transform: rotateY(180deg);
  4. }
  5. .type2 dl {
  6.   background-color: #cd5c5c;
  7.   transform: rotateY(-180deg);
  8. }
  9. .type2:hover dl {
  10.   transform: rotateY(0);
  11. }

3次元の表現でふたつのものが重なるときは、気をつけなければならないことがあります。どちらを手前にすればよいのか、さらにそれをどうやって決めるかです。ふたつの背中合わせの要素を水平に回したときは、90度ごとに前後が入れ替わります。回転角を考えなければならないとなると厄介です。けれど実は、便利なプロパティがあります。

backface-visibilityプロパティは要素が裏返ったとき、見せる(visible)か隠す(hidden)かを定めます。以下のCSSのようにbackface-visibilityプロパティにhiddenを与えれば、裏返った要素は見えなくなります(第74行目)。つまり、ふたつの要素が回ったとき、ひとつが裏返った瞬間に消え、表になったもうひとつが表れます。このお題のCSSは、以下のコード002にまとめました。

  1. .type2 img,
  2. .type2 dl {
  1.   backface-visibility: hidden;
  2. }
コード002■画像にロールオーバーすると水平に回って背中合わせのテキストが表れる
  1. body {
  2.   background: #deddcd;
  3.   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  4. }
  5. a {
  6.   color: whitesmoke;
  7. }
  8. a:hover {
  9.   color: yellow;
  10.   text-decoration: none;
  11. }
  12. ul {
  13.   list-style: none;
  14.   top: 0;
  15.   height: 200px;
  16.   margin: 50px 0px;
  17.   padding: 0;
  18.   text-align: center;
  19. }
  20. ul li,
  21. ul li dl {
  22.   width: 160px;
  23.   height: 200px;
  24. }
  25. ul li {
  26.   display: inline-block;
  27.   position: relative;
  28.   margin: 0 5px;
  29. }
  30. ul dl {
  31.   box-sizing: border-box;
  32.   position: absolute;
  33.   top: 0;
  34.   margin: 0;
  35.   padding: 20px 10px;
  36.   color: white;
  37.   background: rgba(205,92,92, 0.75);
  38. }
  39. ul dl dt {
  40.   margin-bottom: 0.5em;
  41. }
  42. ul dl dd {
  43.   margin: 0;
  44.   font-size: 10px;
  45.   line-height: 1.6em;
  46.   text-align: justify;
  47.   word-break: break-all;
  48. }
  49. ul dl dd:last-of-type {
  50.   margin-top: 10px;
  51.   text-align: right;
  52. }
  53. ul a {
  54.   padding: 0.3em 0.5em;
  55.   background-color: #7a3f3a;
  56. }
  57. .type1 dl {
  58.   opacity: 0;
  59.   transform: scale(0.75, 0);
  60.   transition: 0.5s;
  61. }
  62. .type1:hover dl {
  63.   opacity: 1;
  64.   transform: scale(1, 1);
  65. }
  66. .type2 {
  67.   overflow: visible;
  68.   perspective: 400px;
  69.   transform-style: preserve-3d;
  70. }
  71. .type2 img,
  72. .type2 dl {
  73.   transition: 0.8s;
  74.   backface-visibility: hidden;
  75. }
  76. .type2:hover img {
  77.   transform: rotateY(180deg);
  78. }
  79. .type2 dl {
  80.   background-color: #cd5c5c;
  81.   transform: rotateY(-180deg);
  82. }
  83. .type2:hover dl {
  84.   transform: rotateY(0);
  85. }

03 画像の両外から幕が開閉するようにテキストの表示を切替える

3つ目のサンプルは、ポインタを重ねると画像の左右から幕が閉じるようにしてテキストが表れ、外すと開いて消えます。HTMLのリストに加える画像とテキストの要素は、つぎのように前のふたつと同じ組立てです。li要素にはまた新たなclass属性(type3)を定めました。

<ul>
  <li class="type1">
    <!-- [中略] -->
  </li>
  <li class="type2">
    <!-- [中略] -->
  </li>
  <li class="type3">
    <img src="images/ActionScript30for3D.png">
    <dl>
    <dt>ActionScript 3.0<br>
による三次元表現<br>
ガイドブック</dt>
    <dd>Flashコンテンツに3次元空間の表現力を加えるためのテクニックを完全解説</dd>
    <dd><a href="http://fumiononaka.com/Books/ActionScript30for3D.html" target="_blank">More info</a></dd>
    </dl>
  </li>
</ul>

画像の左右から閉じる幕は、疑似要素::beforeと::afterでつくります[*2]。これらの疑似要素は、選ばれた要素の子要素として前(::before)後(::after)に加えられます。かたちとして使いたい要素を定めるのに便利です。

初めに幕は開いておきます(図006)。以下のCSSのように幕の幅は画像の半分、高さは同じに揃えます(第109〜110行目)。そして、transformプロパティでは、skewX()関数で水平に傾けたうえ、translateX()関数を用いて画像の外側に開きます(第121および第124行目)。

図006■幕の疑似要素を水平に傾けて外側に開く
図006左

  1. .type3 dl {
  2.   background-color: transparent;
  3. }
  1. .type3 dl::before,
  2. .type3 dl::after {
  3.   content: "";
  4.   display: block;
  5.   position: absolute;
  6.   top: 0;
  7.   left: 0;
  8.   width: 80px;
  9.   height: 200px;
  10.   background: indianred;
  11.   opacity: 0.75;
  1. }
  1. .type3 dl::before {
  2.   transform: translateX(-135px) skewX(-30deg);
  3. }
  4. .type3 dl::after {
  5.   transform: translateX(215px) skewX(-30deg);
  6. }

画像にマウスポインタを重ねたら幕が閉じ、その前にテキストが表れるようにします(図007)。CSSは以下のように:hover疑似クラスで、ふたつの疑似要素(::beforeと::after)の傾き(skewX()関数)をまっすぐに戻して、画像が覆われるように水平位置(translateX()関数)を定めます(第127および第130行目)。

図007■閉じた幕の前にテキストが表れる
図006右

  1. .type3:hover dl::before {
  2.   transform: translateX(0) skewX(0);
  3. }
  4. .type3:hover dl::after {
  5.   transform: translateX(80px) skewX(0);
  6. }

もっとも、これだけではテキスト(要素dtとdd)がふたつの疑似要素の手前に出てきません。要素の重ね順はz-indexプロパティに整数値を与えて定めます。ただし、このときpositionプロパティは、デフォルトのstatic以外にしなければならないことに気をつけましょう(スタイルシートリファレンス「z-index」参照)。以下のCSSは、positionプロパティをrelativeとし、z-indexには整数1を与えました(第92〜93行目)。

もうひとつ、画像の外側に出た幕の疑似要素は隠しましょう。要素のoverflowプロパティをhiddenに定めると、外にはみ出したコンテンツは見えなくなります(第28行目)。

  1. ul li {
  1.   overflow: hidden;
  1. }
  1. .type3 dl dt,
  2. .type3 dl dd {
  3.   position: relative;
  4.   z-index: 1;
  1. }

幕の開け閉めはできましたので、transitionプロパティで動きをアニメーションにします。以下のCSSは前述の幕の疑似要素の動きに加えて、テキストは透明から不透明に変えました(第94および第99行目)。幕も初めは透明にしておきます(第112行目)。

このお題では、アニメーションを少し細かく変えてみました。transitionプロパティには、つぎの4つの値が与えられます。そして、それぞれについて別に定められたプロパティで値を変えることもできます(表004)。

transition 対象プロパティ 時間 タイミング関数 開始待ち時間
表004■transitionの仕方を個別に定めるプロパティ
transitionを定めるプロパティ 定める値 デフォルト値
transition-property アニメーションさせる対象のプロパティ。 all
padding-box アニメーションにかける時間。 0s
transition-timing-function 値の変わり方を定めるタイミング関数。 ease
transition-delay アニメーションを始めるまでに待つ時間。 0s

透明のテキスト(要素dtとdd)が表れるアニメーションには、transition-delayプロパティで少しタメを入れました(第100行目)。また、マウスポインタを重ねた:hover疑似クラスで、幕(疑似要素::beforeと::after)のアニメーションはtransition-durationプロパティで少し時間を縮めました(第118行目)。したがって、幕は閉じる方が開くときより速くなります。

  1. .type3 dl dt,
  2. .type3 dl dd {
  1.   opacity: 0;
  2.   transition: 0.8s;
  3. }
  4. .type3:hover dl dt,
  5. .type3:hover dl dd {
  6.   opacity: 1;
  7.   transition-delay: 0.3s;
  8. }
  9. .type3 dl::before,
  10. .type3 dl::after {
  1.   opacity: 0;   /* 0.75; */
  2.   transition: 0.8s;
  3. }
  4. .type3:hover dl::before,
  5. .type3:hover dl::after {
  6.   opacity: 0.75;
  7.   transition-duration: 0.5s;
  8. }

これで、画像にマウスポインタを重ねると両側から閉じる幕の上にテキストが表れ、ポインタを外せば幕が開いてテキストは消えます。ここまでのすべてのCSSをまとめたのが、つぎのコード003です。初めに掲げたサンプル001にはこのCSSが定められています。

コード003■画像にロールオーバーすると両側から閉じる幕の上にテキストが表れる
  1. body {
  2.   background: #deddcd;
  3.   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  4. }
  5. a {
  6.   color: whitesmoke;
  7. }
  8. a:hover {
  9.   color: yellow;
  10.   text-decoration: none;
  11. }
  12. ul {
  13.   list-style: none;
  14.   top: 0;
  15.   height: 200px;
  16.   margin: 50px 0px;
  17.   padding: 0;
  18.   text-align: center;
  19. }
  20. ul li,
  21. ul li dl {
  22.   width: 160px;
  23.   height: 200px;
  24. }
  25. ul li {
  26.   display: inline-block;
  27.   position: relative;
  28.   overflow: hidden;
  29.   margin: 0 5px;
  30. }
  31. ul dl {
  32.   box-sizing: border-box;
  33.   position: absolute;
  34.   top: 0;
  35.   margin: 0;
  36.   padding: 20px 10px;
  37.   color: white;
  38.   background: rgba(205,92,92, 0.75);
  39. }
  40. ul dl dt {
  41.   margin-bottom: 0.5em;
  42. }
  43. ul dl dd {
  44.   margin: 0;
  45.   font-size: 10px;
  46.   line-height: 1.6em;
  47.   text-align: justify;
  48.   word-break: break-all;
  49. }
  50. ul dl dd:last-of-type {
  51.   margin-top: 10px;
  52.   text-align: right;
  53. }
  54. ul a {
  55.   padding: 0.3em 0.5em;
  56.   background-color: #7a3f3a;
  57. }
  58. .type1 dl {
  59.   opacity: 0;
  60.   transform: scale(0.75, 0);
  61.   transition: 0.5s;
  62. }
  63. .type1:hover dl {
  64.   opacity: 1;
  65.   transform: scale(1, 1);
  66. }
  67. .type2 {
  68.   overflow: visible;
  69.   perspective: 400px;
  70.   transform-style: preserve-3d;
  71. }
  72. .type2 img,
  73. .type2 dl {
  74.   transition: 0.8s;
  75.   backface-visibility: hidden;
  76. }
  77. .type2:hover img {
  78.   transform: rotateY(180deg);
  79. }
  80. .type2 dl {
  81.   background-color: #cd5c5c;
  82.   transform: rotateY(-180deg);
  83. }
  84. .type2:hover dl {
  85.   transform: rotateY(0);
  86. }
  87. .type3 dl {
  88.   background-color: transparent;
  89. }
  90. .type3 dl dt,
  91. .type3 dl dd {
  92.   position: relative;
  93.   z-index: 1;
  94.   opacity: 0;
  95.   transition: 0.8s;
  96. }
  97. .type3:hover dl dt,
  98. .type3:hover dl dd {
  99.   opacity: 1;
  100.   transition-delay: 0.3s;
  101. }
  102. .type3 dl::before,
  103. .type3 dl::after {
  104.   content: "";
  105.   display: block;
  106.   position: absolute;
  107.   top: 0;
  108.   left: 0;
  109.   width: 80px;
  110.   height: 200px;
  111.   background: indianred;
  112.   opacity: 0;
  113.   transition: 0.8s;
  114. }
  115. .type3:hover dl::before,
  116. .type3:hover dl::after {
  117.   opacity: 0.75;
  118.   transition-duration: 0.5s;
  119. }
  120. .type3 dl::before {
  121.   transform: translateX(-135px) skewX(-30deg);
  122. }
  123. .type3 dl::after {
  124.   transform: translateX(215px) skewX(-30deg);
  125. }
  126. .type3:hover dl::before {
  127.   transform: translateX(0) skewX(0);
  128. }
  129. .type3:hover dl::after {
  130.   transform: translateX(80px) skewX(0);
  131. }

[*2] 疑似要素::beforeと::afterは、:beforeおよび:afterと書くこともできます。2コロン(::)の書き方は、疑似クラスと見分けがつきやすいように、CSS3から定められました。

作成者: 野中文雄
作成日: 2015年3月31日

Copyright © 2001-2015 Fumio Nonaka.  All rights reserved.