幅が適用されない

「widthを指定しているのに適用されない」といった場合、以下のような原因が考えられます。

spanなどのインライン要素にwidthを設定している

divなどのブロック要素といわれるものに対し、spanなどのインライン要素は、文字を入れるための要素です。このような要素は、内容の文字に自動的に高さや幅が設定されるので、基本的にはwidthを指定しても無視されます。

例えば、文字の一部だけ装飾を変えるなどの目的で文字を囲って使用されます。こういった用途からも、インライン要素にはそもそもwidthの設定は不要な場合が多いです。なので、まずはspanなどのインライン要素ではなく、divなどのブロック要素を使うべきではないかを考えてみましょう。

また、aタグもインライン要素となります。

どうしてもインライン要素にwidthを指定したい場合は?

aタグをボタンにする場合など、どうしてもインライン要素にwidthを指定したい場合があります。

そういった場合は、CSSで要素を強制的にブロック要素に変えてしまいましょう。

style.css
a.button{
    display:block;
    width:200px;
}

上記の方法で「button」というクラスのついたaタグはブロック要素になりました。

するとwidthの200pxも問題なく適用されているはずです。

PAGE TOP