CSSでwidthやheightを指定したのに、なぜか反映されない。
HTML・CSSを学び始めたばかりの頃は、ここでつまずきやすいですよね。
ぼくも職業訓練でブロックとインラインについて学び、コードを書いてみたときに、「書き方は合っているはずなのに、なぜサイズが変わらないのだろう」と疑問に感じました。
その原因の一つが、要素の表示方法を決めるdisplayです。
この記事では、職業訓練で学んだ内容をもとに、ブロックとインラインの違いや、widthとheightが効かない理由を初心者向けに整理します。
widthとheightが効かない理由
HTMLの要素には、ブラウザによって初期状態の表示方法が設定されています。
たとえば、divやp、h1などは、初期状態ではブロックとして表示されます。
ブロックとして表示される要素は、基本的に新しい行から始まり、親要素の横幅いっぱいに広がることが多いです。
一方、spanやaなどは、初期状態ではインラインとして表示されます。
インラインとして表示される要素は、文章と同じ流れの中に並びます。
たとえば、次のように文章の一部分だけを装飾できます。
<p>
今日は<span class="important">HTMLとCSS</span>を学びました。
</p>.important {
color: red;
font-weight: bold;
}この場合、HTMLとCSSの部分だけ文字の色と太さが変わります。
しかし、spanなどの一般的なインライン要素に、次のようなCSSを書いても、指定した幅や高さは反映されません。
.important {
width: 200px;
height: 50px;
}一般的な非置換インライン要素には、widthとheightが適用されないためです。
「CSSは正しく書いているはずなのに、幅や高さが変わらない」と感じたときは、対象の要素がインラインとして表示されていないか確認する必要があります。
なお、画像を表示するimgなど、インラインとして配置されても幅や高さを指定できる要素もあります。
そのため、「すべてのインライン要素に幅と高さを指定できない」と覚えるのではなく、spanやaなどの一般的なインライン要素では反映されない、と考えると分かりやすいです。
displayを変更すると幅と高さを指定できる
インラインのように横に並べながら、幅や高さも指定したい場合は、display: inline-block;が使えます。
.important {
display: inline-block;
width: 200px;
height: 50px;
color: red;
font-weight: bold;
}inline-blockを指定すると、文章の流れの中に配置しながら、幅や高さを指定できるようになります。
要素を新しい行から表示したい場合は、display: block;も使えます。
.important {
display: block;
width: 200px;
height: 50px;
}CSSのdisplayプロパティは、要素をどのような形式で表示するかを決める重要な設定です。
幅や高さが思いどおりにならないときは、widthやheightの書き方だけでなく、対象となる要素のdisplayも確認することが大切です。
よくあるつまずき例：リンクボタンの幅が変わらない
初心者がつまずきやすい例として、a要素を使ってリンクボタンを作る場面があります。
次のようにa要素に幅や高さを指定しても、思ったような大きさにならないことがあります。
<a href="#" class="button">詳しく見る</a>a.button {
width: 200px;
height: 50px;
background-color: skyblue;
}a要素は初期状態ではインラインとして表示されることが多いため、そのままではwidthやheightが反映されません。
このような場合は、display: inline-block;を追加します。
a.button {
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: skyblue;
}これで、横幅200ピクセル、高さ50ピクセルのリンクボタンとして表示しやすくなります。
line-heightを要素の高さと同じ50ピクセルにすると、1行だけの文字を上下中央付近に配置できます。
実際のボタンでは、文字数の変化や複数行表示に対応しやすいように、paddingやFlexboxを使って調整する方法もあります。
まずは「インライン要素のサイズが変わらないときは、display: inline-block;を試す」と覚えておくと、原因を切り分けやすくなります。
divとspanの違い
今回の授業を通して、divとspanの違いも理解しやすくなりました。
どちらも、内容をまとめてCSSを適用しやすくするために使える要素です。
ただし、初期状態の表示方法と、よく使われる場面が異なります。
divは、初期状態でブロックとして表示されます。
複数の要素を一つのまとまりとして扱いたいときによく使います。
<div class="article">
<h2>今日の学習内容</h2>
<p>ブロックとインラインについて学びました。</p>
</div>この例では、見出しと文章をarticleという一つのまとまりにしています。
一方、spanは初期状態でインラインとして表示されます。
文章の一部分だけを囲み、色や文字の太さなどを変更したいときに便利です。
<p>
今日は<span class="important">重要な内容</span>を学びました。
</p>初心者のうちは、次のように覚えると分かりやすそうです。
divは、複数の要素をまとめるときに使うspanは、文章の一部分をまとめるときに使うdivは初期状態でブロックとして表示されるspanは初期状態でインラインとして表示される
ただし、divとspanには、それ自体に「記事」や「メニュー」といった意味はありません。
内容に合うarticle、section、navなどの要素がある場合は、意味を持つ要素を使うことも意識したいです。
子孫セレクタについても学習した
授業では、ある要素の中にある要素を指定する「子孫セレクタ」についても学びました。
.article p {
text-align: left;
}このCSSでは、articleクラスを持つ要素の中にある、すべてのp要素が対象になります。
直接の子要素だけではなく、さらに内側にある孫要素なども対象です。
たとえば、次のようにdivが間に入っていても、内側のp要素にはCSSが適用されます。
<div class="article">
<div class="content">
<p>この文章も対象になります。</p>
</div>
</div>直接の子要素だけを指定する「子セレクタ」とは動きが異なるため、混同しないようにしたいところです。
同じp要素でも、配置されている場所によってデザインを変えられるため、Webページを整理して作るときに便利です。
HTMLとCSSでは見方が少し違う
授業のあと、自宅でブロック要素とインライン要素について調べました。
そこで知ったのが、現在のHTMLの仕様では、要素の意味や配置ルールを「フローコンテンツ」や「フレージングコンテンツ」などのカテゴリーで整理していることです。
そのため、「HTMLの要素は、すべてブロック要素とインライン要素の二つに分類される」と考えると、少し正確ではありません。
一方、ブロックとインラインという考え方がなくなったわけではありません。
現在もCSSでは、要素をどのようなボックスとして表示し、レイアウトするかを考えるときに使われています。
初心者の段階では、次のように分けて考えると理解しやすいと感じました。
- HTMLでは、内容の意味や構造を考える
- CSSでは、ブロックやインラインなどの表示方法を考える
「HTML5でブロック要素とインライン要素が廃止された」とだけ覚えるのではなく、HTMLとCSSでは考える対象が違うと理解するほうが分かりやすそうです。
widthとheightが効かないときの確認手順
幅や高さが反映されないときは、次の順番で確認すると原因を見つけやすくなります。
- クラス名やセレクタの書き方が間違っていないか確認する
widthやheightの単位が付いているか確認する- 別のCSSに上書きされていないか確認する
- 対象要素の
displayを確認する - インラインの場合は、
inline-blockやblockを試す
たとえば、width: 200;のように単位を書き忘れている場合も、幅は反映されません。
/* 単位がないため無効 */
.example {
width: 200;
}
/* pxを付ける */
.example {
width: 200px;
}また、別の場所に書かれたCSSによって、設定が上書きされている場合もあります。
原因が分からないときは、ブラウザの開発者ツールを使うと、実際に適用されているCSSやdisplayの値を確認できます。
初心者が覚えておきたいポイント
今回の学習で、特に覚えておきたいことをまとめます。
divは初期状態でブロックとして表示されるspanやaは初期状態でインラインとして表示される- 一般的な非置換インライン要素には、
widthとheightが適用されない - 幅や高さが反映されない場合は、
displayを確認する - 横に並べながらサイズを指定したい場合は、
inline-blockが使える .article pは、直接の子だけでなく内側にある子孫のp要素も選ぶ- HTMLは意味や構造を、CSSは見た目や配置を担当する
最初から細かな仕様をすべて覚えるのは難しいです。
まずは実際にコードを書き、display: inline;、display: block;、display: inline-block;を切り替えて、表示の違いを比べるのが理解への近道だと思います。
まとめ
今日は職業訓練で、ブロックとインラインの違いや、divとspanの使い分けについて学びました。
CSSで幅や高さが思いどおりにならないときは、widthやheightの書き方だけが原因とは限りません。
対象となる要素が、ブロックとインラインのどちらとして表示されているかも確認する必要があります。
授業で教わった内容を自宅でも調べ、実際にコードを書いて確かめたことで、HTMLとCSSの役割の違いも少しずつ見えてきました。
単に「インライン要素には幅や高さを指定できない」と覚えるだけではなく、例外があることや、displayによって表示方法を変えられることも知っておくと、CSSのトラブルに対応しやすくなります。
幅や高さが反映されないときは、まず開発者ツールで、その要素のdisplayがどうなっているか確認してみましょう。
コメント