【プログラミング独学10日目】ボックスモデル・ボックスモデルと行ボックスの違い

2022-03-26FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。10日目に突入しました。プログラミングは絶対に向いてないと思い込んでいた自分・・・。もっと早く始めれば良かったです。

私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

【プログラミング独学1日目】HTML・imgタグ・alt属性・metaタグ・rel属性・href属性・

独学でサイト制作は行なってきましたが、改めてHTMLからプログラミングをしっかり学び直すことにしまし ...

 https://chanmk.tokyo/programming_1/

今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

【プログラミング独学10日目】学んだこと

今日もCSSの続きをやりました。今日明日は子どもと2人っきりなので、プログラミング学習ができるのは夜寝かしつけた後のみ。日中のお昼寝中1〜2時間は仕事に充てました。ただ20時すぎに寝かしつけられたのに、一緒に寝落ちしてしまいました・・・。そのまま寝てしまおうかと思いましたが、自分を奮い立たせてパソコンの前に来ることができました。そのときすでに22時半。このブログでアウトプットを続けていなかったら、きっと挫折して寝ていたと思います。記事を途切れさせたくないという気持ちが継続に繋がっているようで良かったです。

ということで今日はほんの少しだけですがアウトプットしていきます。

①ボックスモデル

HTMLでは何らかの要素を配置すると、「ボックスモデル」という領域が定義されます。

例えば以下のように指定します。

<div class="box1">BOX1</div>

.box1 {
　background-color : orange ;
}

なおwidthとheightのデフォルト値はその時点でのブラウザの幅によって変わります。デベロッパーツールでどれくらいの値が指定されたか確認できます。

②<div>について

<div>はデフォルトではスタイルが付かない要素です。そのためclass属性などを付けず、単独で記述してもテキストのみが表示され<div>要素の存在がわかりにくいです。

なお<div>で指定したwidthやheightは、デフォルトで以下のようになります。

③<p>タグはデフォルトで上下にmarginが付く

今回<p>タグではなく<div>で要素を指定しました。これは<p>タグはデフォルトで上下にmarginが付いてしまうからです。<p>タグで指定しても問題はありませんが、ボックスモデルをわかりやすく解説するために<div>が使用されました。

④ボックスモデルと行ボックスの違い

ボックスモデルはテキストに限らず、何らかの要素が配置されたときに確保される領域のことです。background-colorを指定することで領域を確認することができます。

それに対して行ボックスは、テキストが配置されるごとに設定される領域のことです。テキスト行が折り返されるとその都度作成され、例えば3行の文章があると行ボックスは3つ存在すると言えます。このときボックスモデルは1つで、3行まとめて1つのボックスモデルという考え方です。なお行ボックスの高さ調整はline-heightで行い、ボックスモデルのように領域や状態をブラウザで確認する方法はありません。

サイトのデザインカスタマイズやスタイリングを行うときは、ボックスモデルのみ意識すればOKです。行ボックスを意識するのはline-heightやvertical-alignをいじるときくらいで、ふわっと「このあたりに行ボックスがあるな」くらいの理解で良いです。

⑤ボックスモデルを指定する値の単位

ボックスモデルを指定するとき、例えば以下のような記述になります。

. box1 {
　width : 200px ;
　height : 200px ;
}

なお単位はpxではなく％で指定することもできます。％は親要素のサイズに対する割合となります。

<div class="box1">
　<div class="box2">BOX2</div>
</div>

.box2 {
　width : 50% ;
　height : 50% ;
}

例えば上のようにbox1の中にbox2を配置すると、box2の親要素がbox1となります。box2のwidth・heightを50％と指定すると、親要素であるbox1の大きさに対して半分の大きさということになるため、box1の半分の大きさのbox2が表示されます。

⑥コンテンツが領域からあふれる場合

コンテンツの大きさに対してテキストを多く書くと、領域からコンテンツがあふれて表示されます。このときoverflowプロパティを使用すると、あふれた部分の表示を指定することができます。

　overflow:hidden ;

上のように記述すると、あふれた部分のみ表示しない（隠す）ことができます。

　overflow : scroll ;

上のように記述すると、あふれた部分を含めてその領域全体のスクロールができるようになります。

【プログラミング独学10日目】わからなかったこと・調べてわかったこと

今日学んで疑問が残った部分は以下です。

ボックスモデルで境界線がいらない場合要素はどうなる？

ボックスモデルでコンテンツの周りに境界線を付けるかどうかは任意なので、境界線がいらない場合はborder要素が無くなり、padding要素も無くなり、width・height・marginの3つだけになるという認識で合っているのでしょうか。サイトを見ていると、領域ごとに背景色でも無い限り、marginやpaddingは意識しづらいのでややこしいです。

ボックスモデルと行ボックスの違いは？

ボックスモデルの解説を聞いているときに思ったのですが、特に行ボックスには触れられなかったので私も受け流そうとしていました。すると質問欄に他の人が質問していて、とても勉強になりました。