前回記事CSSで見出しデザイン1の続き記事です。
今回は疑似要素before,afterを使った見出しの制作方法をご紹介します。
こんなもの
目次
一般的な見出しはCSSでよく使われるプロパティ名を組み合わせただけです。例えばborder、border-left、border-bottom、border-radius、padding、padding-left、padding-bottom・・・。それらを組み合わせたり色を変えたりして作られています。しかし、その方法では、
簡単な丸を作ったり、三角形を作ったり、四角形を作ったり、あるいは四角形を回転させたりということはできません。それぞれの図形をCSSで描くことができれば、それをあとは載せてあげて、表示する順序を多少指定してあげるだけでできます。before、afterはそれができるのです。
h1タグで、h1.style1とh1.style3とh1.style5というデフォルトのデザイン（全部コードは同じですが・・・）から疑似要素を追加していきたいと思います。疑似要素を追加したい場合は元のコードのほうに position:relative; を追加し、追加したい疑似要素before,afterの方には position:absolute;とcontent: ""; をそれぞれ追加してあげる必要があります。
HTML部
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>見出しbefore、after</title> <link rel="stylesheet" type="text/css" href="headline_before.css"> </head> <body> <div id="box"> <h1 class="style1">見出しstyle1デザイン</h1> <h1 class="style2">見出しstyle1デザイン+before</h1> <h1 class="style3">見出しstyle3デザイン</h1> <h1 class="style4">見出しstyle3デザイン+before</h1> <h1 class="style5">見出しstyle5デザイン</h1> <h1 class="style6">見出しstyle5デザイン+before</h1> <h1 class="style7">見出しstyle5デザイン+before+after</h1> </div> </body> </html>
CSS部
@charset "utf-8";
/* CSS Document */
#box{
margin: 10px auto;
width: 600px;
min-height: 600px;
padding: 20px;
border:1px solid #000;
}
/*見出しstyle1*/
h1.style1{
margin: 20px;
width: 500px;
height: 30px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:20px;
padding-left: 50px;
background: #CFC;
}
/*見出しstyle2*/
h1.style2{
margin: 20px;
width: 500px;
height: 30px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:20px;
padding-left: 50px;
background: #CFC;
position:relative;/*疑似要素を使う場合には必要*/
}
h1.style2:before{
position:absolute;/*中の緑の線を左上から描いていくために必要*/
content: "";/*これを入れることで線が表示される準備ができる*/
width: 10px;/*中の緑の線の太さ*/
height: 24px;/*中の緑の線の高さ*/
background: #090;/*中の緑の線の色*/
top: 3px;/*中の緑の線の上からの距離*/
left: 5px;/*中の緑の線の左からの距離*/
}
/*見出しstyle3*/
h1.style3{
margin: 20px;
width: 500px;
height: 30px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:20px;
padding-left: 50px;
background: #CFC;
}
/*見出しstyle4*/
h1.style4{
margin: 20px;
width: 500px;
height: 30px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:20px;
padding-left: 50px;
background: #CFC;
position:relative;/*疑似要素を使う場合には必要*/
}
h1.style4:before{
position:absolute;/*中の緑の丸を左上から描くために必要*/
content: "";/*これを入れることで丸が表示される準備ができる*/
border-radius: 10px;/*半径10pxの90度の扇形を４つ*/
height: 20px;/*直径は20px*/
width: 20px;/*直径は20px*/
background: #090;/*中の緑の丸の色*/
top: 4px;/*中の緑の丸の上からの距離*/
left: 5px;/*中の緑の丸の左からの距離*/
}
/*見出しstyle5*/
h1.style5{
margin: 20px;
width: 500px;
height: 30px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:20px;
padding-left: 50px;
background: #CFC;
}
/*見出しstyle6*/
h1.style6{
margin: 20px;
width: 500px;
height: 30px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:20px;
padding-left: 50px;
background: #CFC;
position:relative;/*疑似要素を使う場合には必要*/
}
h1.style6:before{
position:absolute;/*中の緑の四角を左上から描くために必要*/
content: "";/*これを入れることで四角が表示される準備ができる*/
width: 20px;
height: 20px;
background: #090;/*中の緑の丸の色*/
top: 4px;/*中の緑の丸の上からの距離*/
left: 5px;/*中の緑の丸の左からの距離*/
transform:rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
/*見出しスタイル7*/
h1.style7{
margin: 20px;
width: 500px;
height: 30px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:20px;
padding-left: 50px;
background: #CFC;
position:relative;/*疑似要素を使う場合には必要*/
}
h1.style7:before{
position:absolute;/*中の左上の緑の四角を左上から描くために必要*/
content: "";/*これを入れることで四角が表示される条件が整う*/
width: 20px;
height: 20px;
background: #090;/*中の緑の左上の四角の色*/
top: 4px;/*中の緑の丸の上からの距離*/
left: 5px;/*中の緑の丸の左からの距離*/
transform:rotate(-45deg);/*回転させる*/
-webkit-transform: rotate(-45deg);/*ベンダープレフィックスを付けて回転させる*/
-moz-transform: rotate(-45deg);/*ベンダープレフィックスを付けて回転させる*/
-ms-transform: rotate(-45deg);/*ベンダープレフィックスを付けて回転させる*/
-o-transform: rotate(-45deg); /*ベンダープレフィックスを付けて回転させる*/
}
h1.style7:after{
position:absolute;/*中の右下の緑の四角を左上から描くために必要*/
content: "";/*これを入れることで四角が表示される条件が整う*/
width: 10px;
height: 10px;
background: #0E0;/*中の緑の右下の四角の色*/
top: 16px;/*中の緑の丸の上からの距離*/
left: 20px;/*中の緑の丸の左からの距離*/
transform:rotate(30deg);/*回転させる*/
-webkit-transform: rotate(30deg);/*ベンダープレフィックスを付けて回転させる*/
-moz-transform: rotate(30deg);/*ベンダープレフィックスを付けて回転させる*/
-ms-transform: rotate(30deg);/*ベンダープレフィックスを付けて回転させる*/
-o-transform: rotate(30deg);/*ベンダープレフィックスを付けて回転させる*/
}
するとこのようになります。
作り方のフローは次の通りです。
