【CSS】width（幅）とheight（高さ）の指定方法、auto、px、％指定｜HTML＆CSS入門講座（６）

　HTML＆CSS入門講座（４）では、「CSSの初心者入門、基本的な書き方、セレクタ、プロパティ、値」について、　HTML＆CSS入門講座（6）では、CSSの中のdisplayプロパティーについて解説してきました。

 

　CSSの中のwidth（幅）とheight（高さ）の指定方法ついて深堀していきます。

<div class="oya">
<ul>
    <li> 箇条書き1 </li>
    <li> <span> 箇条書き2  </span> </li>
    <li> 箇条書き 3</li>
</ul>
</div>

　ここで例題として、上述のHTML文書に対してCSSで、次のように設定した場合どのようになるか見てみましょう。

 

.oya {background-color: rgb(0, 255, 128);}
li {width: 300px;
background-color: darkorange;}
span {background-color: rgb(248, 245, 246);} span {background-color: rgb(248, 245, 246);}

 

　最初のCSSのdivタグにはdisplayが設定されていませんので、divの初期値の「

display: block」が設定され、divのcalss名で設定した色（rgb(0, 255, 128)、薄グリーン）が横一杯に広がります。

 

　次に、箇条書liの中にdisplayが設定されていませんので、親の「display: block」が引き継がれ、幅が300px、背景（darkorange）が設定され、縦に並んだ形で表示されています。

 

　さらに、spanタグで、リストの真中を色（rgb(248, 245, 246)、白ぽい色）に設定されています。

 

.oya {background-color: rgb(0, 255, 128);}
li {display: inline; width: 300px;
    background-color: darkorange;}
span {background-color: rgb(248, 245, 246);}

　次に、上述のように箇条書きのliタグ内に「display: inline」を設定したらどうなるでしょう？

 

　

　今度は、liで設定した幅の広さ「width: 300px」は無視され(display：inlineでは、widthやheightの指定が効いてこない。）、文字園のものの大きさになり、背景だけが指定した色となっています。

 

.oya {background-color: rgb(0, 255, 128);}
li {display: inline-block; width: 300px;
background-color: darkorange;}
span {background-color: rgb(248, 245, 246);}

　次に、上述のように箇条書きのliタグ内に「display: inline-block」を設定したらどうなるでしょう？

　今度は、liで指定した「width: 300px」が効いてきて、各箇条書きの部分で300pxがとられています。

　以上のことから、前のおさらいですが、「display: inline」では、widthの設定は聞かない。

「displa: block」や「displa: inline-block」では、widthの設定が効く。

「displa: block」では、要素が縦に並ぶが、「displa: inline-block」では、要素が横に並ぶ。

また、初期値の「width: auto」は、要素が横幅一杯に伸びること、「width: 〇〇px」で指定してやると、その幅が〇〇pxとられることが分かります。

　それでは、widthに％指定をしてみます。

.oya {background-color: rgb(0, 255, 128); width: 900px}
li {display:block; width: 30%;
background-color: darkorange;}
span {background-color: rgb(248, 245, 246);}
.oya {background-color: rgb(0, 255, 128); width: 900px;}
li {display:inline-block ; width: 30%;
background-color: darkorange;}
span {background-color: rgb(248, 245, 246);}

 

 

　「wudth: 30%」を指定してやると、親のwidht指定が900pxであるので、その子のwidth指定で親の900pxの30％の幅、900×30/100（30％）＝270pxがとられることになり、その通りになっていることが分かります。

heightの指定方法には、次の3つがあります。

 

　したがって、「display: block」で要素が複数あれば、その分だけ縦の高さが広がることを意味します。

 

<div class="oya1">
<p> これは子要素だよ！　</p>
</div>
<p> <span>これも子要素だよ！</span>
<p>
<img src=""https://yanai-ke.com/wp-content/uploads/2020/07/ponponmamu.jpg" alt="黄色のポンポンマムの花だよ！" width="300" height="200" />
</p>

.oya1 {background: orange;}
span {background-color: green;}

 

　結果は下図となります。

 

　displayになにも設定していなので、初期値の「display: block」となっているために。要素は縦に並んでいます。

 

　heightは何も指定していないので、文字の高さ、imgで指定した高さがとられて表示されています。

 

「height＝〇〇px」と「height=〇〇％」指定をしてみます。

 

.oya1 {background: orange; height=100px}
span {display:block; background-color: green; height=50%}
img {display:block; height=50%}

 

　最初の段落タグで指定した「height=100px」は、指定された通りの高さに設定されましたが、後のspanタグ中の高さやimgタグ内の高さを％指定しても、それが指定通りに設定されません。

 

　このように高さに関する指定は、かなり難しい面があるので、あまり使わないほうが良いでしょう。