Column

こんにちは。 iMedioセミナー講師の森 和恵です。
5月も後半。GW休みもすっかり遠のき、普段の生活が戻ってましたね。

前回のコラムでお伝えした、GWおまけ動画はいかがでしたか？
GW中に5日連続で動画を撮影し、ウェブ制作を学ぶ記事を公開しています。
たいへん好評で、閲覧期間を延長しました。まだ見れますので、ぜひ。
http://r360studio.com/blog/adobe/dreamweaver/473

さて。今回は《いまさら聞けない、ウェブコーデイング》の第３回。
テーマは“CSSボックスモデルの仕組み”です。

ボックス（Box）とは、HTMLタグ（要素）に囲まれた領域を指します。
モデル（Model）は、ボックスに指定ができる属性を指します。
https://developer.mozilla.org/ja/docs/Web/CSS/box_model

属性には、“width”（幅） “height”（高さ）に加え、“margin”（外側の余白） “padding”（内側の余白） “border”（線）プロパティがあります。ボックスにこれらの属性を指定することで、ウェブページのレイアウトを作っていきます。

“margin”（外側の余白） “padding”（内側の余白）の違いですが、ボックスの背景に色（background-color）をつけ、背景色が塗られた部分に空いた余白が “padding”で、外側にできた余白が“margin”です。

背景色を指定せず、透明のままであれば、余白をどちらでとってもかまいませんが、“margin”には、マージンの相殺やマイナスマージンなどの特例ルールがいくつか存在し、思ったように設定できない場合もあるので注意が必要です。

ボックスモデルにおいて誤解を受けやすいのが、ボックス全体の幅計算です。

“margin”・ “padding”・ “border”を指定は、加算式で考える必要があります。例えば、“width”に100px、“padding-left”に50pxを指定した場合のボックス全体幅は、150pxです。

ついつい、加算するのを忘れて幅の計算が合わなくて、レイアウトがうまく進まないというケースをよくみかけます。CSS3のバージョンになってから、「box-sizing:border-box」を指定しすると、“padding”・ “border”を“width”に含めるという指定ができるようにもなっています。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。
ウェブページのレイアウトの基礎をしっかり学びたい方は、ぜひ。

【 CSSを使いこなす、Webページレイアウト実践 】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23227

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】https://twitter.com/r360studio
【 担当講座一覧 】http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】 https://teqs.jp/column_tax/column_mori