【CSS/html】aタグの幅(width)を変える方法

「リンクの幅を広くしたい!」

「aタグにwidthを指定したのに効かない!?」

aタグの幅(width)を変える方法を解説します。

【結論】display:inline-blockを指定する

aタグはインライン要素であり、そのままでは横幅を調整するCSSである「width」が効きません。

widthを効かせるためにCSS「display:inline-block」を指定しましょう。

指定したら「width」で横幅を調整することができるようになります。

<style>
.example a{
    width: 50%;
    border: 1px solid #999;
    background: #d7eaf5;
}
</style>
<div class="example">
    <a href="#">普通のaタグ（width効かない）</a><br>
    <a href="#" style="display: inline-block;">display:inline-blockを指定したaタグ（width効く）</a>
</div>

displayについて詳しくはこちら↓

widthについて詳しくはこちら↓

要素の解説

インライン要素、ブロック要素、inline-blockについて解説します。

インライン要素

インライン要素とはaタグ、spanタグなど文章中にテキストとして使う要素です。要素同士は横に並びます。

文章中に使われることが前提としているためwidthを含む一部のCSSが効きません。

ブロック要素

インライン要素の対となるのが「ブロック要素」です。

ブロック要素はdivやpタグなど枠や箱として使う要素です。要素同士は縦に並びます。

ブロック要素はwidthなどインライン要素では効かなかったCSSも効きます。

「display:block」でブロック要素にできます。

inline-block

そしてinline-blockはインライン要素とブロック要素両方の特徴を合わせ持った要素です。

inline-blockはインライン要素のように横に並ぶ特徴を持ちながらブロック要素のようにwidthなどのCSSが効くようになります。

「display:inline-block」でinline-blockにできます。

widthを効かせる

inline-blockまたはブロック要素にすることでaタグにwidthが効くようになり、横幅を調整できるようになります。

ブロック要素とinline-blockでまた違いはあるのですが、よくわからないうちはinline-blockにしておくことをオススメします。

【まとめ】aタグの幅(width)を変える方法

「width」で横幅を調整できる

aタグにwidthを効かせるために「display:inline-block」を指定する

以上、aタグの幅(width)を変える方法でした。