「擬似要素before,afterの使い方」の編集履歴（バックアップ）一覧に戻る
このページでは擬似要素、before、afterについてまとめていきます。
before、afterの擬似要素とは要素の直後、または要素の直前にいれる要素のことです。
before、afterでできるCSSデザインから見ていきましょう。
~
*サンプル
1、サンプル1~
#image(width=150,矢印2.png)
2、サンプル2~
#image(width=500,左右ボックス影.png)
3、サンプル3~
#image()
*解説
1、サンプル1~
サンプル1は確かにimgタグをインライン要素として、埋め込むこともできます。~
※画像は40×40で作成
<p><img src="hoge.jpg" width="40" alt="画像">文字文字文字</p>
すると以下のようになってしまいます。
#image(width=150,矢印.png)
これでは矢印の画像をもう少し下にしたい場合、操作できません。行中に画像が埋め込まれているという状況だからです。~
ここで、befor,afterの出番です。~
まずはbeforeのみを使います。~
&u(){HTML部}
<p>文字文字文字</p>
&u(){CSS部}
@charset "utf-8";
p:before {
content: url(yajirusi.jpg);
margin: 10px;
position: relative;
top: 14px;
}
するとこのようになります。
#image(width=150,矢印2.png)
CSSの解説 positionプロパティについての解説は[[boxの配置方法]]を参照
p:before {
content: url(yajirusi.jpg);/*矢印の画像を挿入する*/
margin: 10px;/*矢印と文字とのmarginは10px*/
position: relative;/*直前の要素から相対的な位置にする*/
top: 14px;/*親要素の基準位置からの距離微妙に調整していった結果14が最適だった*/
}
2、サンプル2~
&u(){HTML部}
<body>
<div id="box"></div>
</body>
&u(){CSS部}
@charset "utf-8";
#box{
margin:50px auto;
width: 400px;
height: 300px;
background: #FFFFFF;
border: solid 1px #000000;
position:relative;/*これが重要*/
}
#box:before{
content:"";
position:absolute;/*これも重要*/
z-index:-1;/*レイヤーを下にするためにはこれを指定。この行をコメントアウトして状況を確認するとわかりやすい。*/
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:20px;
bottom:20px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
#box:after{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
3、サンプル3~
A,まずはbox表示~
&u(){HTML部}
<body>
<div id="box"></div>
</body>
&u(){CSS部}
#box{
margin:50px auto;
width: 400px;
height: 300px;
background: #FFFFFF;
border: solid 1px #000000;
}
B,次に影を付ける用のボックスを描いて確認する。~
&u(){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; /* 右側用*/
}
するとこうなる。
#image()
C,次に影を付ける
#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;/*300-下の記述のborder1px分 × ２*/
border: 1px solid #000000;
z-index:-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);
}
するとこのようになる。
#image()
