【CSS】アイコンや画像を、テキスト先頭の好きな位置に表示させる方法

文頭にSNSなどのアイコンを表示させたいが、サイズや位置が上手く調整できない！
CSSの「before疑似要素」を使うことで、テキスト先頭に配置するアイコンや画像を細かく調整できるようになります。

具体的なHTML / CSSコードも公開していますので、ぜひ参考にしてみてください。

実装例とコード

<div>
  <p class="info">Information</p>
</div>

div {
  width: 80%;
  margin: 0 auto;
  font-size: 20px;
}

/* アイコンを配置したい要素に「position: relative;」を記述 */
.info {
  position: relative;
}

.info::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -24px;

  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);

  /* アイコンのサイズを調整するプロパティ */
  width: 1em;
  height: 1em;

  /* 表示させるアイコンのパスを指定 */
  background-image: url(img/info-icon.png);
}

<div>
  <p class="info">Information</p>
</div>

div {
  width: 80%;
  margin: 0 auto;
  font-size: 20px;
}

/* アイコンを配置したい要素に「position: relative;」を記述 */
.info {
  position: relative;
}

.info::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -24px;

  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);

  /* アイコンのサイズを調整するプロパティ */
  width: 1.3em;
  height: 1.3em;

  /* 表示させるアイコンのパスを指定 */
  background-image: url(img/info-icon.png);
}

<div>
  <p class="info">Information</p>
</div>

div {
  width: 80%;
  margin: 0 auto;
  font-size: 20px;
}

/* アイコンを配置したい要素に「position: relative;」を記述 */
.info {
  position: relative;
}

.info::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -32px;

  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);

  /* アイコンのサイズを調整するプロパティ */
  width: 1.3em;
  height: 1.3em;

  /* 表示させるアイコンのパスを指定 */
  background-image: url(img/info-icon.png);
}

実装のポイント

今回の実装で使用したコードについて、特に重要なものを簡単に解説します。

「before疑似要素」について

div::before {
  content: '';
}

疑似要素は、このように「::」とコロン2つから始まります。

疑似要素はいくつか種類がありますが、よく使われるのはbefore疑似要素（要素の先頭に、特定の文字列や画像などを配置）と、after疑似要素（要素の最後に、特定の文字列や画像などを配置）です。

配置したい内容は、contentプロパティで指定します。（表示内容を ” で囲むのを忘れないように。）

本記事では、before疑似要素の内容を空文字にし、背景に表示したいアイコンを設定することで実装しています。

position: relative;position: absolute;について

ある要素を基準として、特定の要素の位置を指定する場合に使われるプロパティです。

position: relative;

基準となる要素に記述

position: absolute;

基準となる親要素から、特定の位置を指定したい要素に記述

今回の実装では、テキスト部分にposition: relative;を記述し、そのbefore疑似要素（アイコン）にposition: absolute;を記述することで、テキストを基準としたアイコンの位置を指定できるようにしています。

位置の指定は、「top」や「left」といったプロパティを合わせて使用します。

またposition: fixed;と記述することで、特定の要素を画面の特定位置に固定することができます。
画面に追従する（スクロールしても表示が消えない）ヘッダーやフッター、バナーなどを実装することができ、以下記事で実装例を紹介していますので、合わせてご覧ください。

• 【CSS】画面に追従するボタンやバナーを作る方法
• 【CSS】ヘッダーを上部に固定し、スクロールに合わせて追従させる

「background」プロパティについて

今回の実装では、before疑似要素の背景にアイコン画像を設定することで、アイコンを表示させています。
従って、そのアイコンが適切に表示されるよう、背景に関するいくつかのプロパティを合わせて記述しています。

background-position

背景画像の位置に関するプロパティ。
「center」を指定すると、画像中央を起点として表示されます。
通常は左上を起点として表示されます。

background-repeat

背景画像の繰り返し表示に関するプロパティ。
「no-repeat」を指定すると、画像が繰り返されず1つだけ表示されます。
通常は背景のサイズを満たすように画像が繰り返し表示されます。

background-size

背景画像のサイズに関するプロパティ。
「contain」を指定すると、画像がはみ出さない最大の大きさで敷き詰めてくれます。

background-image

背景として表示する画像を指定するプロパティ。
「url()」として、()内に画像のパスを指定します。

フリーのアイコン素材「Material Icons」について

本記事では、アイコン素材としてGoogleが提供する『Material Icons（マテリアルアイコン）』を利用しています。
様々な種類のアイコンを誰でも無料で使えるので、アイコン探しにまず利用したいサービスですね。

今回の実装例では、以下URLよりアイコンをダウンロードして使用しました。

Google Fonts

Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

ダウンロードではなく、<link>タグで読み込んで使う方法もあります。
詳しく知りたい方は、「Material Icons」で調べてみてください。

まとめ

以上、before疑似要素を用いたアイコンの表示方法について紹介しました。

このような表示の仕方はいくつかあるものの、どれを使ったらいいかわからなかったり微調整が難しかったり、思い通りにならないことが多々あると思います。
before疑似要素を使うことで、かなり細かく表示位置やサイズを指定でき、汎用性も高いかと思いますので、ぜひ利用してみてください。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

あわせて読みたい

【Webデザイン集】コピペで使えるWebコーディング（HTML/CSS/JavaScript） Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。（随時更新中）実装方法などは別記事にコードなどを公開していますので、気になる実装…