【CSS講座①】見出しデザインをカッコよくする

1. h2 {
2.   border-bottom: solid 3px black; /*線の種類（実線） 太さ 色*/
3. }

説明：border-bottomプロパティを使えば、下線のスタイルを指定できます。例えば、値を”solid 3px black”とすれば、実線で太さが3pxの黒色の線になります。

※線の種類は、1本線は”solid“、2本線は”double”、点線は”dotted”などで指定します。

H2タグの上下に線を引く

1. h2 {
2.   border-bottom: solid 3px blue; /*下線の種類（実線）太さ 色 */
3.   border-top: solid 3px blue; /*上線の種類（実線）太さ 色 */
4.   padding: 1em 0; /* 上下の余白は1.0em・左右の余白は0em */
5. }

数字単位のemとは、フォントサイズの大きさを表しています。1emとはフォントサイズ1文字の大きさ分です。

説明：border-topプロパティを使えば、上線のスタイルを指定できます。また、paddingプロパティを使うことで、文字の周りに余白を入れることができます。例えば、値を”padding: 1em 0;”とした場合は、上下は余白1.0em、左右は余白0となります。

※上下左右全てに余白を入れたい場合は、”padding: 1em”となります。また、”padding: 1em 2em 3em 4em;”とした場合は、上の余白1em・右の余白2em・下の余白3em・左の余白4emとなります。

図から理解できるように、要素を囲むようにpadding領域があり、枠線領域、その枠線領域の外枠にmargin領域があります。例えば、テキストAとテキストBの間を広げる場合には、margin領域を広げます。また、テキストAの枠線と要素の間隔を広げる場合には、padding領域を広げることになります。

H2タグの全体を角丸の線で囲む

1. h2 {
2.   color: red; /* 赤の文字色 */
3.   border: solid 3px blue; /* 青の実線 */
4.   padding: 0.5em; /*文字周りの余白*/
5.   border-radius: 0.5em; /* 角丸 */
6. }

説明：border-radiusプロパティを使えば、枠線の角を丸くすることができます。

説明：border-leftプロパティを使えば、左側に線を引くスタイルを指定できます。逆に右側に線を引きたい場合は、border-rightプロパティを使います。また、backgroudプロパティを使えば、要素の背景色を変更することができます。

【番外編】H2タグの最初の1文字を強調する

1. h2::first-letter {
2.   font-size: 150%; /*フォントサイズを150%大きく */
3.   color: red; /* 文字色を赤 */
4. }

first-letterは疑似要素と呼ばれて、要素の一部に対してスタイルを適用することができます。疑似要素には、first-letter以外にもfirst-line・before・afterなるものが存在します。後日、疑似要素について細かい説明をしていきます。