HOME
テキストの一文字目だけ指定したい場面とは？
雑誌やチラシ・ポスターといった印刷物やWEBサイトで、誰しも一度は下図のようなテキストデザインを見たことがあるのではないでしょうか？
シンプルでありながら目を引くデザインなので、見出しやテキストなどに取り入れれば効果的です。
このようなデザインは実はCSSだけで簡単に実現できてしまいます。
このページでは、上記のようなデザインを実現するためにCSSでテキストの一文字目にだけ異なるスタイルを指定する方法を説明します。
テキストの一文字目だけスタイルを変える２つの方法
テキストの一文字目だけスタイルを変える方法には、疑似要素のひとつである「:first-letter」を使用して一文字目のスタイルを指定する方法とHTML内で「span」タグを使って一文字目を囲んで指定する方法があります。
一文字目を指定するには、「:first-letter」を使う方が簡単
「span」を使う場合HTMLを記述する際に、一回一回一文字目をspanで囲む手間が発生するため、見出しのように何度も使うようなものには不向きです。
一方で疑似要素である「first-letter」であれば一度CSSを記述するだけで済むので簡単です。
疑似要素「:first-letter」の使い方
疑似要素とは、HTMLには何も記述せずにCSS側だけで作り出すことができる要素のことです。
アイコンや記号など装飾の目的だけで使うものはHTMLでは記述せずに疑似要素を使って表示させることが一般的です。（HTMLは可能な限りシンプルで簡潔に記述した方が良いとされています。）
疑似要素の使い方はいたって簡単で、元のセレクタの後ろに「：」（コロン）と「疑似要素」を付けるだけです。
下記の例では、「.sample」というセレクタに「：first-letter」を付けて疑似要素を作り、一文字目に適用したいスタイルを指定しています。
HTML
<p class="sample">見出しデザイン</p>
CSS
.sample{
font-size:24px;
font-weight: bold;
line-height:1;
color:crimson;
border-bottom: solid 10px;
}
.sample::first-letter{
font-size: 1.5em;
color: #fff;
background: crimson;
display: inline-block;
padding: 0 5px;
margin-right: 5px;
}
プレビュー
見出しデザイン
first-letterが使えない場合に確認すべきこと
「first-letter」に記述したスタイルが正しく反映されない場合は、以下の項目を確認して修正してみて下さい。
インライン要素には使えない
「first-letter」はブロックレベルがinlineの要素に対しては適用できません。そのため「span」や「a」タグなどのインライン要素に対して、h1やpタグと同じようにfirst-letterは使えないのです。
ですがブロックレベルはCSSのdisplayプロパティによって自由に変更できます。
プロパティの値をblockもしくはinline-blockに変更すれば、first-letterは使用可能です。
HTML
<span class="sample">見出しデザイン</p>
CSS
span.sample{
display:inline-block;
}
beforeとは併用できない
同じく疑似要素であるbeforeを使用してアイコン等を先頭に表示している場合は、beforeの方が一文字目とみなされてしまうので注意してください。
HTML
<p class="sample">見出しデザイン</p>
CSS
.sample::before{
content:"\f101";
font-family:"Font awesome 5 free";
font-weight: bold;
}
アイコンを他の方法で表示するように変更するか、first-letterではなくspanを使うなどの方法を考えましょう。
spanを使って一文字目のスタイルを変更する方法
spanであればテキストの一文字目だけでなく文中の任意の文字を自由に指定することが可能です。
凝ったデザインやfirst-letterが使えない場面ではspanを使用してスタイリングしてください。
HTML
<p class="sample3"><span>見</span>出し<span>デ</span>ザイン</p>
CSS
.sample3{
font-size:24px;
}
.sample3 span{
font-size:1.5em;
color:red;
font-weight: bold;
}
プレビュー
見出しデザイン
アルファベットを大文字にするのなら「text-transform」を使う
ちなみに「アルファベットの一文字目を大文字にしたい」という目的の場合はもっと最適な方法存在するので、別のページで紹介します。
アルファベットの大文字・小文字を制御できる「text-transform」プロパティでcapitalizeを指定するという方法です。
詳しくはこちらをご覧ください
CSSアルファベットを大文字にする方法
text-transformはHTMLで小文字で記述したテキストを大文字に変換して表示したり、大文字で記述したテキストを小文字に変換して表示することが出来ます。・・・
まとめ
文字を限定したスタイリングでは真っ先に「span」が思いつきそうですが、何度も使う場合には非常に面倒です。一文字目ということであれば「first-letter」を使う方が圧倒的に効率が良いと思うので是非活用してみてください。