「擬似要素before,afterの使い方」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
このページでは擬似要素、before、afterについてまとめていきます。
#contents
before、afterの擬似要素とは要素の直後、または要素の直前にいれる要素のことです。
before、afterでできるCSSデザインから見ていきましょう。
~
*サンプル
1、サンプル1~
#image(width=150,矢印2.png)
2、サンプル2~
#image(ボックス左右影完成.png)
#co(){{
3、サンプル3
}}
*解説
**1、サンプル1
***疑似要素before,afterを使わないと・・・
サンプル1は確かにimgタグをインライン要素として、埋め込むこともできます。~
※画像は40×40で作成
<p><img src="hoge.jpg" width="40" alt="画像">文字文字文字</p>
すると以下のようになってしまいます。
#image(width=150,矢印.png)
これでは矢印の画像をもう少し下にしたい場合、操作できません。行中に画像が埋め込まれているという状況だからです。~
***疑似要素beforeのみをまずは使ってみる。
ここで、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
今度はボックスの左右の線にグラデーションの影を付ける方法です。
***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;
}
ボックスが中央に表示されたらOKです。~
***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(ボックス表示2.png)
***C,上側5pxから始まるようにし、次に影を付け、z-indexを-1にする。
#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);
}
するとこのようになる。
#image(width=500,ボックス左右影完成.png)
完成です。
左側のみに影をかけようとしても、上側や下側も少し影ができるため、左右のみに影つけるためのcontentボックスを小さめにすることが重要です。
#co(){{
**3、サンプル3
今度は見出しに三角形をつけて吹き出しっぽくしてみましょう。~
***（参考）A,三角形の作り方。まずはwidth:0 height:0で、borderのみで四角形を描く。
***（参考）B,borderで切り取りたい部分だけ切り取り、あとは透過させる。
三角形はborderの線を極めて太くしていき、指定したい箇所だけ残して、あとは透過させる。
http://ideahacker.net/2013/07/26/5962/
三角形の作り方
http://blog.3streamer.net/html5-css3/css3-styling-231/
***C,見出しを作っていく
見出しの作り方
}}
このページでは擬似要素、before、afterについてまとめていきます。
#contents
before、afterの擬似要素とは要素の直後、または要素の直前にいれる要素のことです。
before、afterでできるCSSデザインから見ていきましょう。
~
*サンプル
1、サンプル1~
#image(width=150,矢印2.png)
2、サンプル2~
#image(ボックス左右影完成.png)
*解説
**1、サンプル1
***疑似要素before,afterを使わないと・・・
サンプル1は確かにimgタグをインライン要素として、埋め込むこともできます。~
※画像は40×40で作成
<p><img src="hoge.jpg" width="40" alt="画像">文字文字文字</p>
すると以下のようになってしまいます。
#image(width=150,矢印.png)
これでは矢印の画像をもう少し下にしたい場合、操作できません。行中に画像が埋め込まれているという状況だからです。~
***疑似要素beforeのみをまずは使ってみる。
ここで、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
今度はボックスの左右の線にグラデーションの影を付ける方法です。
***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;
}
ボックスが中央に表示されたらOKです。~
***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(ボックス表示2.png)
***C,上側5pxから始まるようにし、次に影を付け、z-indexを-1にする。
#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);
}
するとこのようになる。
#image(width=500,ボックス左右影完成.png)
完成です。
左側のみに影をかけようとしても、上側や下側も少し影ができるため、左右のみに影つけるためのcontentボックスを小さめにすることが重要です。
#co(){{
**3、サンプル3
今度は見出しに三角形をつけて吹き出しっぽくしてみましょう。~
***（参考）A,三角形の作り方。まずはwidth:0 height:0で、borderのみで四角形を描く。
***（参考）B,borderで切り取りたい部分だけ切り取り、あとは透過させる。
三角形はborderの線を極めて太くしていき、指定したい箇所だけ残して、あとは透過させる。
http://ideahacker.net/2013/07/26/5962/
三角形の作り方
http://blog.3streamer.net/html5-css3/css3-styling-231/
***C,見出しを作っていく
見出しの作り方
}}
