横幅と高さ

レイアウトにも大きな影響がある「横幅」と「高さ」について説明します。

以降の説明を読む前に、「ブロックとは?」の説明も読んでください。

ブロックの横幅を指定する

説明の前に、次のように入力して、2つを見比べてください。

        <div style="background-color: red;">指定なし</div>
        <div style="width: 320px; background-color: pink;">320pxを指定したとき</div>
        <div style="width: 80px; background-color: orange;">80pxを指定したとき</div>
    

次のように表示されます。

指定なし

320pxを指定したとき
80pxを指定したとき

「指定なし」は、自由記入欄の左から右までぴったり赤い背景になり、「320px」の方は左からちょうど真ん中までがピンクの背景になります。 「80px」はさらにその1/4の横幅になっています。

"width: 320px;"で、ブロックの横幅が320ピクセルになるように指定されます。 80pxの方は80ピクセルになります。

そして、内部のテキストはその中に納まるように表示されます。

自由記入欄の横幅

自由記入欄の横幅は640ピクセルです。 前の入力例の「320pxを指定」の方の横幅は320ピクセルなので自由記入欄の横幅の半分です。 そのため、ピンクの背景も左から自由記入欄の中心のところまで背景色がピンクになっています。

width指定が無い場合

width指定が無い場合、横幅は<div>~</div>の外側と同じになります。

前の入力例の場合、「指定なし」の外側は自由記入欄になるので、横幅も自由記入欄と同じ640ピクセルになっています。

横幅を%で指定する

横幅は%単位で指定することもできます。

        <div style="width: 50%; background-color: pink;">50%を指定</div>
        <div style="width: 25%; background-color: cyan;">25%を指定</div>    
    

%を使った場合、<div>~</div>の外側の横幅を100%としたときの、50%や25%の値を指定したことになります。

これは次のように入れ子構造にしてみるとわかりやすいでしょう。

<div style="width: 50%; background-color:pink;">50%を指定
    <div style="width: 50%; background-color:cyan;">さらに50%を指定
        <div style="width: 50%; background-color:orange;">さらにさらに50%を指定</div>
        <div style="background-color:green;">指定なし</div>
    </div>
</div>

次のように表示されます。

50%を指定
さらに50%を指定
さらにさらに50%を指定

指定なし


ピンクの背景のブロックは入れ子構造のもっとも外側なので、さらにその外側は自由記入欄です。 自由記入欄の横幅が640ピクセルなので、その50%の320ピクセルがピンクのブロックの横幅になります。

水色(cyan)のブロックの外側はピンク(横幅320ピクセル)であり、その50%の160ピクセルが水色のブロックの横幅になります。

オレンジのブロックはさらに50%で横幅は80ピクセルです。

緑色はwidth指定が無いので、外側(この場合は水色のブロック)と同じ160ピクセルの横幅になります。

内側にフィットした横幅

次のように入力してください。

        <div style="width: fit-content; background-color: orange;">内側にフィットした横幅</div>
    

次のように表示されます。

内側にフィットした横幅

"width: fit-content;"と指定すると、ブロックの内側にあわせた横幅になります。 そのため、テキストとほとんど同じ幅に背景色が塗られています。

paddingや枠を使って次のような感じにすると、タイトルや見出しなどに良さそうな感じになります。

        <div style="width: fit-content; margin: 0 auto; color: navy; border: 7px double; padding : .25em 1em;">キャラ説明</div>
        <div style="width: fit-content; margin: 0 auto; color: red; border: 2px solid; border-radius: 2em; padding : .25em 1em;">エピソード1 「旅立ち」</div>
    
キャラ説明

エピソード1 「旅立ち」

横幅と余白・枠との関係

※ 余白についての詳細は、まだ説明していません。「シンプルなレイアウト」で説明します。ここの説明はそちらを読んだ後で見た方が良いかもしれません。

次のように入力して、3つを見比べてみてください。

        <div style="width: 320px; background-color: pink;">余白・枠なし</div>
        <div style="width: 300px; padding: 10px; background-color: cyan;">余白を10ピクセル</div>
        <div style="width: 280px; padding: 10px; border: black 10px solid; background-color: orange;">余白と枠を10ピクセル</div>
    

次のように表示されます。

余白・枠なし

余白を10ピクセル

余白と枠を10ピクセル

3つのブロックの横幅がぴったり同じになっていることがわかるでしょう。

3つのブロックのwidth指定は、320px、300px、280pxです。20ピクセルずつ減っています。

2つ目(余白を10ピクセル)はpaddingで左右に10ピクセル(合計20ピクセル)の余白があるので、 「横幅300+余白20=320」が全体の横幅になっています。 その結果1つ目と2つ目の横幅がぴったり同じになります。

同様に、3つ目(余白と枠を10ピクセル)はborderで左右に10ピクセル(合計20ピクセル)の枠線があります。余白も20ピクセルあるので、「横幅280+余白20+枠線20=320」が全体の横幅になっていて、横幅がぴったり同じになります。

入力例は割愛しますが、marginによる余白も同じように扱われます。 つまり、

全体の横幅=width指定の横幅+余白による横幅+枠線の横幅
になっています。

このことは結構忘れがち/気がつきにくいところなので注意してください。 「段組みレイアウト」をするときに意図した位置にレイアウトできなくなる原因となります。 また、「width指定通りにならない…」と思い込んでしまって、ハマる原因となります。

外側と内側のサイズ

外側サイズより内側のサイズが大きい場合、内側のタイプによって表示が変わります。

テキスト

        <div style="width: 160px; background-color:cyan;">横幅より長くなるテキストが内側にあるとき</div>
    

上のように入力したとき横幅は160ピクセルになります。 ところが内側のテキストが多いので、1行に表示すると160ピクセルを超えています。 その場合、テキストが途中で改行されます。

横幅より長くなるテキストが内側にあるとき

他のブロック

        <div style="width: 320px; background-color: pink;">外側の領域<div style="width: 480px; background-color: cyan;">内側の領域</div>外側の領域</div>
    

上の入力例では、divが二重になっていて、外側は320ピクセル、内側が480ピクセルに指定されています。

外側の領域
内側の領域
外側の領域

このようにブロックが入れ子構造(二重構造)になっていて、外側のブロックより内側のブロックの横幅が大きい場合、はみ出してしまいます。

この例では、全体としては表示されているので大きな問題はありませんが、次の例のように自由記入欄をはみ出してしまうと問題があります。

        <div style="width: 800px; background-color: cyan;">イベント期間中に自国以外の4国に遠征し、攻略成功すると、スタンプカードに設けられた各国1枠のスタンプ欄に「CLEAR」スタンプが押されます。</div>
    

次のように表示されます。

イベント期間中に自国以外の4国に遠征し、攻略成功すると、スタンプカードに設けられた各国1枠のスタンプ欄に「CLEAR」スタンプが押されます。

この例では1つのブロックしかありませんが、全てのブロックは自由記入欄の内側にあるので、「内側=入力例のブロック、外側=自由記入欄」という関係があります。 そして、内側の横幅は800ピクセルが指定されていますが、外側(自由記入欄)の横幅は640ピクセルなので、内側がはみ出していることになります。

自由記入欄の外へはみ出た部分は表示されません。 上の例でも、テキストの“「CLEAR」スタンプ”の周辺が表示されていません。

余白と枠に注意!

はみ出しの問題は、枠や余白で横幅が増える場合にも適用されます。

次の入力例は、自由記入欄からはみ出さない値として、width指定による横幅は600にしています。

しかし、余白や枠線で増える分をうっかり考慮し忘れ、640を超えて自由記入欄からはみ出しています。

        <div style="width: 600px; background-color: cyan; padding: 30px; border: 10px double;">自由記入欄の横幅が640ピクセルなので、それを超えないようにwidth:600pxを指定したけれど…。</div>
    
自由記入欄の横幅が640ピクセルなので、それを超えないようにwidth:600pxを指定したけれど…。

複雑なレイアウトを行っていると、この「うっかり640ピクセルを超える」をやってしまうこともあるので注意してください。

ブロックの高さを指定する

説明の前に、次のように入力して、2つを見比べてください。

        <div style="width: 100px; background-color: red;">横幅のみ</div>
        <div style="height: 100px; width: 100px; background-color: pink;">高さと横幅</div>
    

次のように表示されます。

横幅のみ

高さと横幅

"height: 100px;"で、ブロックの高さが100ピクセルになるように指定されます。 横幅も100ピクセルなので、背景色のピンク色が100ピクセルの正方形になっています。

横幅(width)で説明したことのほとんどは高さ(height)でも適用されますが、次の2つの場合は異なります。

高さ指定がないとき

次のように入力してください。

        <div style="height: 100px; width: 100px; background-color: red;"> <div style="background-color: pink;">%指定</div></div>
    

次のように表示されます。

%指定

上の例はブロックが入れ子になっていて、外側は高さと横幅に100ピクセルを指定しています。内側は指定がありません。

widthの指定が無いとき、横幅は外側の幅と同じになります。 一方、heightの指定が無いとき、高さは外側の高さと一致しません。 指定が無いとき、高さと横幅では表示のされ方が変わります。

高さの%指定

自由記入欄の横幅が640ピクセルに固定されているのに対し、高さは固定されていません。 そのため、%指定でも表示のされ方が変わります。 次のように入力してください。

        <div style="height: 50%; width: 50%; background-color: cyan;">%指定</div>
        <div style="height: 100px; width: 100px;  background-color: red;"> <div style="height: 50%; width: 50%; background-color: pink;">%指定</div></div>
    

次のように表示されます。

%指定

%指定

%指定する場合はブロックの外側で値が決まっている必要があります。

水色の背景のブロックの外側は自由記入欄です。自由記入欄の横幅は640ピクセルなので、width: 50%;と指定すれば横幅は320ピクセルになります。

しかし自由記入欄の高さは固定値ではない(指定されていない)ので、height: 50%;としても、特定の高さにはなりません。指定がないときと同じになります。

ブロックが入れ子になっていて、外側のブロックで高さが指定されているなら、内側のブロックで%指定することができます。

外側(赤い背景)のサイズが100x100なので、内側(ピンク背景)のサイズは50x50になっています。