※当サイトにはプロモーションが含まれています。
クライアント 少しインパクトのある見出しを作ってくれ。
にゃテック おけまるだにゃ！
自分がマニュアル作成や、LPやSPなどでよく使っていたデザインが、１文字目だけ大きくするデザインです。
今回は、この１文字目だけ大きくするデザインをいくつかCSSで作ってみました。
見出しなどでよく使われる１文字目だけ大きくするCSS
単純に１文字目だけを大きくするならば、疑似要素の::first-letterを付与します。
にゃのらいと “:first-child”ではないのかにゃ？
::first-letterと、:first-childは全く違う目的で使うCSSセレクタです。
それぞれの違いを簡単にまとめると･･･、
| 比較項目 | ::first-letter | :first-child |
|---|---|---|
| ターゲット | テキストの1文字目 | 親要素の中の最初の子要素 |
| 用途 | 見出し・段落の装飾 | リスト・カード・段組の条件付きデザイン |
| 対象になる要素 | 主にテキスト要素 | すべての要素（ただし親の最初に限る） |
| よく使われる場面 | 雑誌風の先頭文字、装飾見出し | 最初の段落にだけマージン追加、リスト強調など |
単純に１文字目だけを大きくしたデザインのCSSです。
HTML
<h2 class="nya-first-letter-big">大谷翔平、三冠王を獲得！</h2>
CSS
.nya-first-letter-big::first-letter {
font-size: 1.65em;
}
これを適用すると次のようになります。
大谷翔平、三冠王を獲得！
続いて、１文字目を大きくして、その文字を四角形で囲ったCSSです。
HTML
<h2 class="nya-highlight-square">完全試合を達成！大谷翔平投手</h2>CSS
.nya-highlight-square {
color: #d60a0a;
}
.nya-highlight-square::first-letter {
font-size: 2em;
color: #fff;
background-color: #d60a0a;
padding: 0.1em 0.3em;
}
これを適用すると次のようになります。
完全試合を達成！大谷翔平投手
続いて、四角形にあわせて下線を付け加えたCSSです。
HTML
<h2 class="nya-highlight-square-underline">トランプにサインをする大谷翔平選手</h2>CSS
.nya-highlight-square-underline {
display: inline-block;
border-bottom: 3px solid #d60a0a;
padding-bottom: 0.2em;
color: #d60a0a;
}
.nya-highlight-square-underline::first-letter {
font-size: 2em;
color: #fff;
background-color: #d60a0a;
padding: 0.1em 0.3em;
}これを適用すると次のようになります。
トランプ大統領にサインをする大谷翔平選手
最後は、番号（数字）を先頭の背景として表示させたCSSです。
HTML
<h2 class="nya-overlay-number">
<span class="first2">01</span>
<span class="rest">大谷翔平の凄さをデータで分析</span>
</h2>CSS
.nya-overlay-number {
position: relative;
font-size: 1.5em;
}
.nya-overlay-number span {
position: relative;
display: inline-block;
}
.nya-overlay-number .first2 {
font-size: 2.5em;
color: rgba(214, 10, 10, 0.3);
position: absolute;
left: 0;
top: -40px; /* 数字の位置調整 */
z-index: 1;
}
.nya-overlay-number .rest {
position: relative;
padding-left: 0.5em; /* 被せる余白調整 */
z-index: 2;
}これを適用すると次のようになります。
なお、サイトによっては共通で設定されているCSSの影響によって、数字の一などがズレると思うので調整が必要になると思います。
最後に、これらのHTMLとCSSをまとめたコードを掲載しておくので、ご活用ください。
HTML+CSSまとめ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出しデザイン例</title>
<style>
h2 {
font-family: sans-serif;
margin-bottom: 2em;
}
/* (1) 1文字目だけ大きくなる */
.nya-first-letter-big::first-letter {
font-size: 2em;
}
/* (2) 1文字目が大きく、白文字＋背景四角 */
.nya-highlight-square {
color: #d60a0a;
}
.nya-highlight-square::first-letter {
font-size: 2em;
color: #fff;
background-color: #d60a0a;
padding: 0.1em 0.3em;
}
/* (3) (2)＋下線を四角に合わせて引く */
.nya-highlight-square-underline {
display: inline-block;
border-bottom: 3px solid #d60a0a;
padding-bottom: 0.2em;
color: #d60a0a;
}
.nya-highlight-square-underline::first-letter {
font-size: 2em;
color: #fff;
background-color: #d60a0a;
padding: 0.1em 0.3em;
}
/* (4) 2文字目まで大きく＋半透明＋3文字目以降と重なる */
.nya-overlay-number {
position: relative;
font-size: 1.5em;
}
.nya-overlay-number span {
position: relative;
display: inline-block;
}
.nya-overlay-number .first2 {
font-size: 2.5em;
color: rgba(214, 10, 10, 0.3);
position: absolute;
left: 0;
top: -40px; /* 数字の位置調整 */
z-index: 1;
}
.nya-overlay-number .rest {
position: relative;
padding-left: 0.5em; /* 被せる余白調整 */
z-index: 2;
}
</style>
</head>
<body>
<h2 class="nya-first-letter-big">大谷翔平、三冠王を獲得！</h2>
<h2 class="nya-highlight-square">完全試合を達成！大谷翔平投手</h2>
<h2 class="nya-highlight-square-underline">トランプにサインをする大谷翔平選手</h2>
<h2 class="nya-overlay-number">
<span class="first2">01</span>
<span class="rest">大谷翔平の凄さをデータで分析</span>
</h2>
</body>
</html>
コードの右上にマウスオーバーすると、コピーアイコンが表示され、コピーすることができます。
