※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

前回記事CSSで見出しデザイン1の続き記事です。
今回は疑似要素before,afterを使った見出しの制作方法をご紹介します。
こんなもの



目次



疑似要素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: ""; をそれぞれ追加してあげる必要があります。

作り方

  1. 疑似を追加しないデフォルトの見出しのデザインを作り、表示させる。
  2. 疑似を追加するためにデフォルトの見出しの最後にposition:relative;を付けて疑似の準備をする。
  3. 疑似要素のセレクターbefore,afterを用意する。
  4. 疑似要素のセレクターbefore,afterの中にposition:absolute;とcontent: "";を追加してあげる。
  5. 図形をCSSで描いていく。
  6. 最後に左上からの距離topやleftを記述して図形を調整します。

コード

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);/*ベンダープレフィックスを付けて回転させる*/
}

するとこのようになります。

作り方まとめ

作り方のフローは次の通りです。

  1. 疑似を追加しないデフォルトの見出しのデザインを作り、表示させる。
  2. 疑似を追加するためにデフォルトの見出しの最後にposition:relative;を付けて疑似の準備をする。
  3. 疑似要素のセレクターbefore,afterを用意する。
  4. 疑似要素のセレクターbefore,afterの中にposition:absolute;とcontent: "";を追加してあげる。
  5. 図形をCSSで描いていく。(注1)
  6. 最後に左上からの距離topやleftを記述して図形を調整します。
    ※四角や長方形ならwidthとheightとbackground、円ならwidthとheightとborder-とborder-radiusを付け加えていきます。回転させる場合は(円は必要ないけど・・)、transform:rotate(角度)を追加していきます。

    うーん。ちょっとわかりにくいかもですね。どれか重点的に解説したほうがよさそうです。どこを解説すべきでしょうか?コメントください。
名前:
コメント:
添付ファイル