テキスト中央配置のアイコン付きボタンはinline-gridが最適

CSSでアイコン付きボタンを実装するとき、アイコンをabsoluteで配置したり、flexboxで横並びにする方法はよく見かけます。

しかしこれらの方法では、画面幅が狭くなったときにテキストが想定より早く折り返されてしまうという問題が起こりがちです。

そこで注目したいのが、inline-gridを使ったアプローチです。

今回は、このinline-gridを活用して「テキストの中央位置がずれないアイコン付きボタン」の最適解を探っていきたいと思います。

アイコン付きボタンの完成系

See the Pen アイコン付きボタン（テキスト中央配置） by hisa (@hisaaashi) on CodePen.

ポイントは以下の指定です。

.button {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
}

inline-gridを使い、grid-template-columnsでアイコン、テキスト、アイコンという３つの領域を確保しています。

• 左の1fr … テキストを中央に押し込むための余白
• 中央のauto … ボタンのテキスト本体
• 右の1fr … アイコン用のスペース

左の余白は、空の擬似要素を使っています。

画面幅が狭くなっても、空の擬似要素が先に縮むため、テキストはギリギリまで折り返されません。

気になる方は、右下のツマミで幅を可変させてみてください。

absoluteやFlexboxの欠点

absoluteやFlexboxでの実装は、狭い画面幅でテキストとアイコンが重ならないように左右に大きめの余白を持たせる必要があります。

そのため、アイコンが大きい場合や、テキストの量が多い場合だと、想定より早く折り返されてしまう欠点があります。

inline-gridでの実装では、この欠点がなくなり、可能な限りテキストは完全中央配置されます。

Q＆A

gridではなくinline-gridなのはなぜ？

インライン要素にすることで、width: autoでテキストに合わせて最適なボタンサイズにでき、横に並べることも容易になるからです。

アイコンとの間にgapを使わないのはなぜ？

gapを使用すると左の擬似要素にも適用されるため、テキストの左に余分な空白ができてしまいます。gapが小さい場合は大きな問題ではありませんが、アイコンにmarginを持たせた方がベターです。

アイコンをテキストのすぐ横に配置したい

アイコンのjustify-self: endをjustify-self: startにしてください。

アイコンを左端にできますか？

HTMLのアイコンとテキストを逆に配置します。CSSの::beforeを::afterに変更して、アイコンをjustify-self: startにしてください。

アイコンは擬似要素で作成しても良いですか？

はい、問題ないです。

Flexboxではダメですか？

どのパターンであっても柔軟性のことを考えるとinline-gridを利用した方が良いと思います。

まとめ：GridLayoutを使おう

以前はFlexBoxばかり使っていましたが、GridLayoutを使うようになってレイアウトに困ることはほぼなくなりました。

慣れるまで少し難しく感じますが、基本を覚えておけば今後の実装の時短につながるかと思います。

あわせて読みたい

アクセシビリティを考慮したハンバーガーメニューのモダンな作り方 単純に見た目だけでハンバーガーメニューを作ることは簡単ですが、実際にコンピューターや視覚障害者に開閉状態を伝えるためにはアクセシビリティを考慮したコーディン…

カスタマイズに困ったらお気軽にご相談を！

• 「ちょっとしたCSSの調整だけお願いしたい」
• 「不具合を直してほしい」

料金は3,000円〜、お支払いはPayPay・Amazonギフトカードなど柔軟に対応してます🤔