• HOME > 
  • CSS > 
  • CSSでテキストの一文字目だけ指定する方法【初心者向け】

CSSでテキストの一文字目だけ指定する方法【初心者向け】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

テキストの一文字目だけ指定したい場面とは?

雑誌やチラシ・ポスターといった印刷物やWEBサイトで、誰しも一度は下図のようなテキストデザインを見たことがあるのではないでしょうか?

テキストデザインの例

シンプルでありながら目を引くデザインなので、見出しやテキストなどに取り入れれば効果的です。

このようなデザインは実はCSSだけで簡単に実現できてしまいます。

このページでは、上記のようなデザインを実現するためにCSSでテキストの一文字目にだけ異なるスタイルを指定する方法を説明します。

テキストの一文字目だけスタイルを変える2つの方法

テキストの一文字目だけスタイルを変える方法には、疑似要素のひとつである「: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;
}
beforeの方が一文字目

アイコンを他の方法で表示するように変更するか、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」を使う方が圧倒的に効率が良いと思うので是非活用してみてください。

広告
広告

関連する記事

サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。