[CSS]アイコンとテキストを横並びに揃えるスタイルシートのテクニック

アイコンとテキストを横並びにする配置は、Webページでよく使用されます。ナビゲーションやリスト、リンク、ヘッダやフッタのリンクなど、さまざまなコンテンツで見かけますね。

アイコンとテキストを横並びに美しく揃えるスタイルシートのテクニック、調整用のスタイルシートを紹介します。

Tips for Aligning Icons to Text

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づき、翻訳しています。

• Step 1: アイコンのフォーマットを決める
• Step 2: 同じようなサイズのアイコンを使う
• Step 3: アイコンのサイズにフォントのサイズを合わせる
• Step 4: 位置の調整はCSSを使う
• Step 5: 適用するアイコンのためにclass名を使う

Step 1: アイコンのフォーマットを決める

アイコン画像には、さまざまなフォーマットがあります。

• SVGアイコン
• アイコン フォント
• スプライト画像
• インライン画像

好みがあるかもしれませんが、アイコンのフォーマットはテキストに横並びさせる方法に大いに関係があります。
すべてのアイコンがスプライト画像に含まれているとします。その場合は固定サイズに向いています。コンテンツのサイズも行の高さも一定であるなら、調整することは簡単です。

SVGアイコンは拡大縮小が可能で、調整する時はデザインのプロセスではなく、CSSを使って行います。

ここではSVGアイコンを選択し、テキストに横並びさせるためのベースとして使います。コードはメンテナンス性に優れ、デザインで調整する必要はないのでデザイナーはあなたに感謝するでしょう。

Step 2: 同じ大きさのアイコンを使う

ここに理想的な状態があります。すべてのアイコンは、正確に同じ大きさです。

同じ大きさのアイコン

アイコンはすべて100pxの正方形でデザインされています。もちろん見た目が同じ大きさになるとは限らないことは知っています。アイコンはデザインによって形状が異なり、その空白スペースの量が変わります。

例えば地図のピンは、ショッピングカートより狭いデザインです。SVGで作成する時にファイルサイズを少なくするために、空白スペースを排除するでしょう。それは素晴らしい方法ですが、今回はそれをやめます。テキストと横並びさせるためのアイコンでは、この空白スペースを残したままの同じ幅にします。

Step 3: アイコンのサイズにフォントのサイズを合わせる

アイコンは、タイポグラフィのように扱われるべきです。テキストと関連したり、テキストの代わりとして使われるからです。そのためアイコンのサイズはテキストと同様に、明瞭性を備えた首尾一貫したサイズにするべきです。

テキストが16pxだから、アイコンも16pxにということではありません。フォントのサイズを踏まえた上で、アイコンが機能するサイズにすることが大切です。テキストのサイズとバランスのとれたアイコンとそうでないアイコンを見てください。

Aligning Icons to Text: Example 1

左右両方ともアイコンはテキストときれいに横並びになっていますが、左のアイコンの方がフォントのサイズとバランスがよく見えます。

Step 4: 位置の調整はCSSを使う

アイコンをテキストに横並びで揃える時に、正確に位置を調整するためのスタイルシートを紹介しましょう。

このスタイルシートを利用することで簡単に微調整ができ、アイコンをテキストに横並びに美しく揃えることができます。

Aligning Icons to Text: Example 2

Step 5: 適用するアイコンのためにclass名を使う

上記の例は一見よく見えますが、地図のピンが狭く、音符がテキストに寄っているように見えます。これはCSSで調整することができます。

これでアイコンがテキストに横並びにぴったり揃いました。バランスもいいですね。

Aligning Icons to Text: Example 3