タイトル周りでよく見かける、文字の幅に応じた下線の装飾があります。文字数によって自動的に横幅が変わる設定はCSSで簡単に表現できますでの見ていきましょう。
今回は、以下の３つのサンプルをご用意しました。
- 文字数に応じた下線
- 横幅を指定した下線
- 文字数よりも短い下線
順に解説していきます。
1.文字数に応じた下線を引きたいとき
タイトルの文字数によって下線の長さを自動的に可変させる場合はこちらになります。３文字であれば短く、９文字であれば長くなる。そんな感じです。
サンプルでは、h2タグにクラス名「sample1」を付けて指定しています。
|
1 |
<h2 class="sample1">タイトル</h2> |
CSSでh2.sample1に対して「display: inline-block;」を指定するだけでOKです。
|
1 2 3 4 |
h2.sample1 { border-bottom: 5px solid #000; display: inline-block; } |
2.横幅を指定して下線を引きたいとき
タイトルの文字数に関係なく、統一して横幅を揃えたい場合はこちら。px指定や%指定などお好みで指定してみてください。
サンプルでは、h2タグにクラス名「sample2」を付けて指定しています。
|
1 |
<h2 class="sample2">タイトル</h2> |
CSSでh2.sample2に対して「width: 300px;」を指定し、中央揃えのためにmargin-leftとmargin-rightにautoを指定しています。
|
1 2 3 4 5 6 |
h2.sample2 { border-bottom: 5px solid #000; width: 300px; margin-left: auto; margin-right: auto; } |
3.文字数よりも短い下線を引きたいとき
最後にタイトルの文字数に関係なく、文字幅よりも短い下線を引きたい場合はこちら。この場合はborderプロパティではなく、疑似要素を使って表現します。
サンプルでは、h2タグにクラス名「sample3」を付けて指定しています。
|
1 |
<h2 class="sample3">タイトル</h2> |
まず、CSSでh2.sample3に対して「position: relative;」を指定します。
それから、h2.sample3:afterに対して疑似要素から空のボックスを生成して位置を調整、線の横幅と太さを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
h2.sample3 { position: relative; } h2.sample3:after { content: ""; display: block; position: absolute; left: 50%; /* 左右位置の調整 */ transform: translate(-50%); /* 左右位置の調整 */ bottom: -10px; /* 上下位置の調整 */ width: 50px; /* 下線の横幅を指定 */ height: 5px; /* 下線の太さを指定 */ background-color: #000; /* 下線の色を指定 */ } |
幅を揃えたいときもあれば、短くさりげなく入れたいときもある。その時々でお好きな方法で装飾をしてみてください。