リンクのスタイリング
方法①
a {
display: inline-block;
width: 160px;
height: 32px;
border: 1px solid black;
border-radius: 8px;
text-align: center;
line-height: 32px;
color: inherit;
}
display: inline-block によって、a が「幅・高さを持てる」ようになっている
width と height でクリックできる範囲（＝リンクのヒットエリア）が明確に設定されている
よって「ボタン全体をクリック可能」にできる。
この方法のメリット・デメリット
メリット デメリット
inline-block + 幅・高さ指定 簡単で確実。テキスト1行ボタンに最適。 高さがテキストに依存しない。
複数行やレスポンシブには不向き。
方法②：Flexboxを使う（より柔軟）
ボタンサイズを固定せず、テキストの内容に応じてサイズを調整したいときはこれ。
a {
display: flex;
align-items: center; /* 垂直方向中央 */
justify-content: center; /* 水平方向中央 */
padding: 0.5em 1.2em; /* テキストに応じて余白 */
border: 1px solid black;
border-radius: 8px;
text-decoration: none;
color: inherit;
}
📘 ポイント
高さを固定せず、padding でサイズを調整。
テキストが長くなっても自然に伸びる。
クリック範囲も自動で拡大する。
→ レスポンシブ対応や多言語サイトで特におすすめ。
説明
ブラウザ的には文字も「子ノード」なので、
aタグ を Flex コンテナにすれば、文字（テキストノード）を中央に配置できます
方法③：a を block 要素にして親いっぱいに広げる
カードやリスト全体をリンクにしたいときはこれ。
a {
display: block;
width: 100%; /* 親要素全体をクリック可能に */
height: 100%;
}
📘 ポイント
display: block; によって1行全体がクリック可能。
画像＋テキストのカード全体リンクなどに最適。
🐾 まとめ
シーン別 おすすめの方法
シンプルなボタン inline-block + width / height ①の方法でOK
柔軟なボタン（文字量でサイズ変化） display: flex + padding レスポンシブ対応向き
カードやリスト全体をクリック可能に display: block + width: 100% 要素全体リンクに便利
ボタンのスタイリング
button {
all: unset;
width: 160px;
height: 32px;
border: 1px solid black;
border-radius: 8px;
text-align: center;
line-height: 32px;
cursor: pointer;
}