前回記事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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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度の扇形を4つ*/ 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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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);/*ベンダープレフィックスを付けて回転させる*/ }
するとこのようになります。
作り方のフローは次の通りです。