コラム

【第9回】実践編-コンテンツ内のエレメントデザイン

h2 タイトル(見出し)の文字の装飾を例にデザインの要素(エレメント)の説明をします。

文字に装飾を入れる

h2見出しを画像を使わず、border-leftプロパティのみで実装します。
分かりやすくするため、左ボーダーの線を青色(#0066CC)に、他の枠の線をピンク色(#FF99CC)にした場合が下記です。

h2element1

HTML

<div class="headline1">
<h2>h2見出しのサンプル</h2>
</div>

CSS

.headline1 h2 { margin:0; padding:0 0 0 20px; border:1px solid #FF99CC; border-left:5px solid #0066CC; font-size:14px;}
/* 左ボーダーの線:青色(#0066CC)  他の枠の線: ピンク色(#FF99CC)*/

 
height プロパティで見出し枠の高さを指定
見出しの枠の高さを広げるため、CSS に「height:43px; 」を追記すると下記のように文字が枠内の上側に寄って表示されます。

CSS

.headline1 h2 { margin:0; padding:0 0 0 20px; height:43px; border:1px solid #FF99CC; border-left:5px solid #0066CC; font-size:14px;}
/* 左ボーダーの線:青色(#0066CC)  他の枠の線: ピンク色(#FF99CC)*/

h2element2

line-height プロパティで見出し枠内の上下中央に指定
CSSの line-height プロパティで高さを決めると要素の大きさはline-heightの値になり、中心から上下に値の半分が割り当てられます。
文字が見出し枠内の上側に寄って寄っているのを上下中央に指定するため、CSSに「line-height: 43px;」を追記すると下記のように表示されます。

CSS

.headline1 h2 { margin:0; padding:0 0 0 20px; height:43px; line-height: 43px; border:1px solid #FF99CC; border-left:5px solid #0066CC; font-size:14px;}
/* 左ボーダーの線:青色(#0066CC)  他の枠の線: ピンク色(#FF99CC)*/

element-h2

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。