「CSSで見出しデザイン2」の編集履歴（バックアップ）一覧はこちら
CSSで見出しデザイン2 - (2015/05/29 (金) 19:18:59) の最新版との変更点
追加された行は緑色になります。
削除された行は赤色になります。
前回記事[[CSSで見出しデザイン1]]の続き記事です。~
今回は疑似要素before,afterを使った見出しの制作方法をご紹介します。
こんなもの~
#image(width=650,headline_giji.png)
~
~
目次
~
#contents
----
~
*疑似要素before,afterをなぜ使う？
一般的な見出しはCSSでよく使われるプロパティ名を組み合わせただけです。例えばborder、border-left、border-bottom、border-radius、padding、padding-left、padding-bottom・・・。それらを組み合わせたり色を変えたりして作られています。しかし、その方法では、&color(red){簡単な丸を作ったり、三角形を作ったり、四角形を作ったり、あるいは四角形を回転させたりということはできません。それぞれの図形をCSSで描くことができれば、それをあとは載せてあげて、表示する順序を多少指定してあげるだけでできます。before、afterはそれができるのです。}
~
~
*疑似要素がある場合とない場合で作ってみる。
h1タグで、h1.style1とh1.style3とh1.style5というデフォルトのデザイン（全部コードは同じですが・・・）から疑似要素を追加していきたいと思います。疑似要素を追加したい場合は元のコードのほうに&color(red){position:relative;}を追加し、追加したい疑似要素before,afterの方には&color(red){position:absolute;とcontents: "";}をそれぞれ追加してあげる必要があります。
**作り方
+疑似を追加しないデフォルトの見出しのデザインを作り、表示させる。
+疑似を追加するためにデフォルトの見出しの最後にposition:relative;を付けて疑似の準備をする。
+疑似要素のセレクターbefore,afterを用意する。
+疑似要素のセレクターbefore,afterの中にposition:absolute;とcontent: "";を追加してあげる。
+図形をCSSで描いていく。
+最後に左上からの距離topやleftを記述して図形を調整します。
**コード
&u(){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>
&u(){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);/*ベンダープレフィックスを付けて回転させる*/
}
するとこのようになります。
#image(width=500,headline_giji.png)
**作り方まとめ
作り方のフローは次の通りです。
+疑似を追加しないデフォルトの見出しのデザインを作り、表示させる。
+疑似を追加するためにデフォルトの見出しの最後にposition:relative;を付けて疑似の準備をする。
+疑似要素のセレクターbefore,afterを用意する。
+疑似要素のセレクターbefore,afterの中にposition:absolute;とcontent: "";を追加してあげる。
+図形をCSSで描いていく。（注1）
+最後に左上からの距離topやleftを記述して図形を調整します。
~
&color(red){※四角や長方形ならwidthとheightとbackground、円ならwidthとheightとborder-とborder-radiusを付け加えていきます。回転させる場合は（円は必要ないけど・・）、transform:rotate(角度)を追加していきます。}
~
~
うーん。ちょっとわかりにくいかもですね。どれか重点的に解説したほうがよさそうです。どこを解説すべきでしょうか？コメントください。
#comment
前回記事[[CSSで見出しデザイン1]]の続き記事です。~
今回は疑似要素before,afterを使った見出しの制作方法をご紹介します。
~
こんなもの~
#image(width=650,headline_giji.png)
~
~
目次
~
#contents
----
~
*疑似要素before,afterをなぜ使う？
一般的な見出しはCSSでよく使われるプロパティ名を組み合わせただけです。例えばborder、border-left、border-bottom、border-radius、padding、padding-left、padding-bottom・・・。それらを組み合わせたり色を変えたりして作られています。しかし、その方法では、&color(red){簡単な丸を作ったり、三角形を作ったり、四角形を作ったり、あるいは四角形を回転させたりということはできません。それぞれの図形をCSSで描くことができれば、それをあとは載せてあげて、表示する順序を多少指定してあげるだけでできます。before、afterはそれができるのです。}
~
~
*疑似要素がある場合とない場合で作ってみる。
h1タグで、h1.style1とh1.style3とh1.style5というデフォルトのデザイン（全部コードは同じですが・・・）から疑似要素を追加していきたいと思います。疑似要素を追加したい場合は元のコードのほうに&color(red){position:relative;}を追加し、追加したい疑似要素before,afterの方には&color(red){position:absolute;とcontent: "";}をそれぞれ追加してあげる必要があります。
**作り方
+疑似を追加しないデフォルトの見出しのデザインを作り、表示させる。
+疑似を追加するためにデフォルトの見出しの最後にposition:relative;を付けて疑似の準備をする。
+疑似要素のセレクターbefore,afterを用意する。
+疑似要素のセレクターbefore,afterの中にposition:absolute;とcontent: "";を追加してあげる。
+図形をCSSで描いていく。
+最後に左上からの距離topやleftを記述して図形を調整します。
**コード
&u(){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>
&u(){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);/*ベンダープレフィックスを付けて回転させる*/
}
するとこのようになります。
#image(width=500,headline_giji.png)
**作り方まとめ
作り方のフローは次の通りです。
+疑似を追加しないデフォルトの見出しのデザインを作り、表示させる。
+疑似を追加するためにデフォルトの見出しの最後にposition:relative;を付けて疑似の準備をする。
+疑似要素のセレクターbefore,afterを用意する。
+疑似要素のセレクターbefore,afterの中にposition:absolute;とcontent: "";を追加してあげる。
+図形をCSSで描いていく。（注1）
+最後に左上からの距離topやleftを記述して図形を調整します。
~
&color(red){※四角や長方形ならwidthとheightとbackground、円ならwidthとheightとborder-とborder-radiusを付け加えていきます。回転させる場合は（円は必要ないけど・・）、transform:rotate(角度)を追加していきます。}
~
~
うーん。ちょっとわかりにくいかもですね。どれか重点的に解説したほうがよさそうです。どこを解説すべきでしょうか？コメントください。
~
#comment
