このページでは擬似要素、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ボックスを小さめにすることが重要です。
