Webエンジニア学習日記 CSS編 #07 「box-sizing」

2023年5月8日

CSS プログラミング 学習

t f B! P L
CSSを理解する上で、初心者を困らせるのが、display:blockの状態のサイズについての認識です。 margin , border , paddingのそれらの意味と、値を設定した時に表示がどうなるかをちゃんと理解しないといけません。 それから、上記のサイズについて、box-sizingの設定で大きく見た目が変わってしまうので、この相関関係も理解しましょう。

margin , border , paddingについての理解

(横)200px x (縦)200px のサイズのエレメント(要素やタグ)について解説します。 セットされたmarginとborderとpaddingについてのそれぞれの範囲は次の様になります。 div{ width : 200px; height : 200px; margin : 50px; border : 20px solid black; padding : 50px; }

margin

エレメントの外側にバリアを張るイメージで、スペースを作るのが、マージン機能です。 前後のエレメントと距離をとる時に設定します。 注意点としては、インターネットブラウザの仕様で、マージンの相殺という特性があるので、これを理解していないと、設定に困ってしまいます。 以前にブログで書いたので、読んで理解してみてください。 CSSの相殺性理論

border

エレメントの周囲の枠に領域を作るのが、ボーダー機能です。 border-styleで、実線、破線、ドット線など色々と表現ができます。 border-style : solid; /* 実線 */ border-style : dashed; /* 破線 */ border-style : dotted; /* ドット線 */ ...他にも色々と線の種類があります。 border-colorで、線の色をセットできます。 border-color : red; border-widthで、線のサイズを指定します。 border-width:20px; 上記を纏めて次のように1行で書くことができます。 border : 20px solid red;

padding

エレメントの内側にスペースを作るのが、パッディング機能です。 borderから内側に向かって、サイズ指定することで、余白を作ることができます。 文字などは、余白が無いと、読みづらくなってしまうので、余白を付けるというのはデザインをする上で必須です。

top , right , bottom , left

margin , border , padding これらの命令には、全て、エレメントに対しての上下左右それぞれに設定をすることができます。 上記のサンプルは全て、1つの値のみしか書いていないので、上下左右全て同じ値をセットしている状態です。 次のように、それぞれの方向に独自の値をセットすることもできます。 margin-top margin-right margin-bottom margin-left border-top border-right border-bottom border-left padding-top padding-right padding-bottom padding-left また、上記をそれぞれ1行で書くこともできます。 値は、上右下左の順でスペース区切りで記述します。 margin : top right bottom left; border-style : top right bottom left; border-color : top right bottom left; border-width : top right bottom left; padding : top right bottom left;

box-sizingの理解

margin , border , padding の特性が理解できたところで、次はbox-sizingについて理解しておきましょう。 box-sizingには、content-boxborder-boxの2つの値があり、それぞれ見え方が異なります。

content-box

エレメントにセットされている、paddingとborderのサイズは含まれずに表示されます。
div{ width:200px; height:100px; padding:10px; border:10px; }
content-box

border-box

エレメントにセットされている、paddingとborderのサイズを含んだサイズで表示されます。
div{ width:200px; height:100px; padding:10px; border:10px; }
border-box

オススメ

明らかに、border-boxの方がコントロールしやすいので、個人的にはページ内の全てのエレメントに、box-sizing:border-boxをセットするようにしています。 #NumberPlace *, *::before, *::after{ -webkit-box-sizing : border-box; -moz-box-sizing : border-box; o-box-sizing : border-box; -ms-box-sizing : border-box; box-sizing : border-box; }

あとがき

ウェブデザインをする上で、今回説明した、margin , border , paddingの特性が理解できていれば、大まかなワイヤーフレーム程度の構築はできてしまうでしょう。 この基本が理解できておらず、一生懸命、ピクセルの値を少しずつ調整しながらページを作っているコーダーもいるようですが、 こうした基本設計の部分でのサイズ理解をちゃんとできているだけで、コーディングが楽になるでしょう。 ホームページデザインがうまく出来ないときは、今回解説した内容を思い出すと意外とスッキリとうまくいくかもしれませんよ。

このブログを検索

プロフィール

自分の写真
町田市, 東京都, Japan
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出。

ブログ アーカイブ

QooQ