このページでは擬似要素、before、afterについてまとめていきます。
before、afterの擬似要素とは要素の直後、または要素の直前にいれる要素のことです。
before、afterでできるCSSデザインから見ていきましょう。
1、サンプル1
2、サンプル2
サンプル1は確かにimgタグをインライン要素として、埋め込むこともできます。
※画像は40×40で作成
<p><img src="hoge.jpg" width="40" alt="画像">文字文字文字</p>
すると以下のようになってしまいます。
これでは矢印の画像をもう少し下にしたい場合、操作できません。行中に画像が埋め込まれているという状況だからです。
ここで、befor,afterの出番です。
まずはbeforeのみを使います。
HTML部
<p>文字文字文字</p>
CSS部
@charset "utf-8"; p:before { content: url(yajirusi.jpg); margin: 10px; position: relative; top: 14px; }
するとこのようになります。
CSSの解説 positionプロパティについての解説はboxの配置方法を参照
p:before { content: url(yajirusi.jpg);/*矢印の画像を挿入する*/ margin: 10px;/*矢印と文字とのmarginは10px*/ position: relative;/*直前の要素から相対的な位置にする*/ top: 14px;/*親要素の基準位置からの距離微妙に調整していった結果14が最適だった*/ }
今度はボックスの左右の線にグラデーションの影を付ける方法です。
HTML部
<body> <div id="box"></div> </body>
CSS部
#box{ margin:50px auto; width: 400px; height: 300px; background: #FFFFFF; border: solid 1px #000000; }
ボックスが中央に表示されたらOKです。
CSS部
#box{ margin:50px auto; width: 400px; height: 300px; background: #FFFFFF; border: solid 1px #000000; position:relative;/*これを追記*/ } #box:before,#box:after{/*ID属性ならdiv#box:before,div#box:afterでもいいし、class属性ならdiv.box:before,div.box:afterでもいい。*/ content:""; position:absolute; width: 30px;/*適当でいい。400px÷2より小さい数がわかりやすい。30%などでもいい*/ height: 290px;/*298pxにしてグラデーションをかけると、上のほうにまで影が突き出るため、少し小さ目に*/ border: 1px solid #000000; z-index:1;/*まずはこれを表示させてボックスのありかを確認する。*/ } div#box:before { left: 5px; /* 左側用*/ } div#box:after { right: 5px; /* 右側用*/ } するとこうなる。
#box{ margin:50px auto; width: 400px; height: 300px; background: #FFFFFF; border: solid 1px #000000; position:relative; } #box:before,#box:after{/*ID属性ならdiv#box:before,div#box:afterでもいいし、class属性ならdiv.box:before,div.box:afterでもいい。*/ content: ""; position:absolute;/*これ重要*/ width: 10px;/*適当でいい。400px÷2より小さい数がわかりやすい。30%などでもいい*/ top:5px;/*追記。影が突き出るため、上から5px分の位置からグラデーションを開始する*/ height: 290px;/*290くらいが妥当。ここは微調整してください。*/ border: 1px solid #000000; z-index:-1;/*最後は-1にして後ろ側に回り込ませる。*/ } #box:before{ left: 5px;/*左側用*/ box-shadow:-10px 0px 10px rgba(0,0,0,0.4); } #box:after{ right: 5px;/* 右側用*/ box-shadow:10px 0px 10px rgba(0,0,0,0.4); }
するとこのようになる。
完成です。 左側のみに影をかけようとしても、上側や下側も少し影ができるため、左右のみに影つけるためのcontentボックスを小さめにすることが重要です。