MENU

ボタン・リンク01

Figma
  1. ホーム
  2. Figma
  3. ボタン・リンク01
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

button01・02：displayプロパティによる挙動の違い

ポイント: 同じ見た目のボタンでも、用途に合わせて inline-block と block を適切に使い分けています。

.button01 {
  display: inline-block; /* 文字幅に合わせる */
  padding: 12px 32px;
}

.button02 {
  display: block; /* 横幅いっぱいに広げる */
  text-align: center;
}

解説: リンクタグ（<a>）は本来インライン要素であり、そのままでは上下の余白が正しく適用されません。button01 では display: inline-block を指定することで、ボタンとしての厚みを持たせつつ、ボタン自体の幅は文字量に応じたサイズに留めています。一方で button02 は display: block を適用しており、親要素の横幅いっぱいに広がる特性を持たせています。スマートフォンの画面全体に広がるような「フルワイドボタン」を実装する際の使い分けを意識しました。

button03・04：inline-flexによるアイコンと文字の整列

ポイント: アイコンとテキストを横並びにする際、inline-flex を活用して垂直方向の中央揃えと余白管理を効率化しています。

.button03 {
  display: inline-flex;
  align-items: center; /* 垂直中央揃え */
  gap: 10px;           /* アイコンと文字の間隔 */
  padding: 8px 24px 8px 16px;
}

解説: ボタン内にアイコン画像を含める場合、文字と画像の高さがズレてしまうことがよくあります。ここでは display: inline-flex を使用し、align-items: center を組み合わせることで、アイコンとテキストが常に上下中央で完璧に揃うように実装しました。また、アイコンと文字の間隔は gap プロパティで管理しており、HTML側でスペースを入力することなく、デザインカンプ通りの正確な数値を維持しています。さらに、アイコンがある側の余白を少し狭めるなど、左右のパディングを数値で微調整することで、視覚的なバランスを整えています。

Figma
目次