MEDIAWordPressアドセンスSearchConsoleアナリティクスレンタルサーバードメインCSSのボックスモデルの構造と指定方法を理解する2019.09.12CSSCSSの書き方HOMECSSCSSのボックスモデルの構造と指定方法を理解するCSSのボックスモデルの構造の理解はCSSで「余白を自在にコントロールする」ためには必ず必要だと思う。今までさんざんCSSをいじってきたわりには自己流で書いていたので、少しはまともに理解してみようと思い記事にしておこうと思うのです。ボックスモデルの構造と指定方法を理解できれば、これで今日から私もCSSのボックスモデルマスターに近づける?かもしれない。ボックスモデルの構造を分かりやすく例えるならCSSのボックスモデルとはHTMLタグでマークアップした部分が構成するボックスは、ボックスごとに以下のような構造になり各領域が配置されます。コンテンツエリアにはマークアップした文字や画像が入り、その周りにはCSSの「padding」「border」「margin」プロパティの指定によって「パディング」「罫線(ボーダー)」「マージン」を配置することができます。それぞれが各自の領域内でボックスの構造を作り、一つのボックスが出来上がります。したボックスの各領域のまとまりを「ボックスモデル」と呼び、ウェブページのデザインやレイアウトを調節するときの基本構造になります。Advertisementボックスモデルの構造に使用するCSSボックスモデルの構造を作るために使用するCSSは4つのボックス領域があり、4つの領域を配置するためにCSSでプロパティとその値を指定することでボックスモデルの構造で余白が作れます。ボックス作成に使う3つのプロパティは以下です。marginプロパティborderプロパティpaddingプロパティそしてボックスの一番内側にコンテンツが入ります。CSSで「マージン」「ボーダー」「パディング」をコンテンツの外側に配置することで、要素に余白を作りボックスを見やすくすることができます。プロパティのmargin、border、paddingはそれぞれに値を指定することで、各領域内の余白や色をデザインできます。マージンの指定方法CSSのボックスモデルでは、罫線(ボーダー)の外側に配置する余白を「マージン」と呼び、この余白の大きさを「marginプロパティ」で指定します。ボックスモデルの構造で言えば、マージンはボックスの一番外側に位置しているということですね。マージンを指定しない表示を知りたい。下の画像は<div></div>でマークアップした文章をオレンジ色で表示しただけのものです。<div></div>でマークアップした部分には標準ではマージンは挿入されません。40px;とcssで指定すると、ボーダーの外側に40ピクセルのマージンを配置することができます。ブルーの部分がマージン領域です。このマージンの指定方法はマージンボックスの四辺の値をまとめて指定しています。HTML要素とCSSのコードは以下の書き方です。moccasin;}ですが、もう少しマージンが作るボックスの配置を細かくコントロールしたい場合には、マージンの大きさを辺ごとにCSSで指定することもできます。Advertisementmarginの大きさを辺ごとに指定するmarginは「上下左右」の辺ごとにマージンの大きさを指定することができます。80px」と指定すると以下のようにマージンボックスの「上20px」「右40px」「下60px」「左80px」の大きさのマージン領域が配置できます。このような辺ごとのマージンの指定方法は4つの指定方法があります。上記の4つの指定をするときのmarginの値は上から時計周りに記述します。marginを個別に指定するCSSのmarginで、もっと細かく個別に指定する場合はmarginプロパティを四辺のどれか一部分だけに絞って以下のようにCSSを記述します。左だけなら「margin-left:」と記述して値を指定します。マージンはたとえば、<h1>や<p>などのタグでマークアップした場合には、デフォルトスタイルシートによって標準で上下マージンが挿入されます。(画像のブルー部分がマージン)これは私たちがマージン指定することにより上書きされます。まっさらな状態からボックスモデルの構造を組んでいきたいとかなら、リセットCSSなどで1から配置したりデザインすることもできます。次にボーダー領域をボックスモデルの構造の中に配置する場合です。ボーダーはCSSのborderプロパティでボックスの罫線を表示します。ボックスモデルの中では、マージンから見たボーダーは内側に位置しています。この後に説明するパディングも含めると、ボーダーはボックスの構造の中の真ん中に挟まれて位置していて、名前どおりの「ボーダーライン」を引きます。borderで罫線を表示させデザインや配置をするには、罫線のスタイル、太さ、色の値をまとめてCSSで指定する書き方と、個別に表示する方法があります。まとめて指定する場合は指定したい要素をセレクタにして以下のようにCSSを書きます。#ff7555;これらの値はborder-style、border-width、border-colorで値を個別に指定することもできます。個別の場合の書き方は以下のようにCSSを記述します。#ff7555;はボーダーの色を指定しています。このような指定方法はボーダーのデザインを辺ごとに指定するときに使えるかと思います。ボーダーのデザインを辺ごとに指定するボーダーの辺ごとにデザインを変えてみたい場合には、先ほどの個別に値を指定する書き方を使います。moccasin;}border-style:でボーダーの上下を点線に、左右は線にする指定をしています。border-widthはボーダーの上下の横幅を10pxに、左右の横幅を20pxの値にしてボーダー領域を配置してます。border-colorの値は上、下、左、右の時計回りでカラーコードを書きボーダーの辺ごとにカラーを変えてデザインしています。極端なボーダーの例で、めちゃくちゃダサいデザインですが辺ごとにボーダーを指定するときには、このような指定方法できるのです。Advertisementボーダーを特定の辺だけ表示させる特定の辺だけにボーダーを表示したい場合もあります。その場合のCSSは以下のようにプロパティ指定をします。border-bottom-styleborder-bottom-widthborder-bottom-colorボーダーの下辺だけにborderプロパティを指定するパターンです。borderプロパティに今までの記述はborder-styleやborder-widthとしていましたが、特定の辺だけの場合にはborderプロパティに「どの辺だけを指定領域に含めたいか」を付け足してあげます。-top-right-bottom-leftそうすることで四辺のどれかの一辺だけをコントロールできます。<h2>の要素の下辺だけにボーダーを指定する場合のCSSの書き方が以下のコードです。5px;}みやすいようにマージンとパディングも指定していますが、ボーダーをh2の下だけに表示させてみました。見かける見出しの下に線が引いてあるシンプルなボーダーにすることができます。パディング指定方法CSSのボックスモデルではボーダー(罫線)の内側に挿入する余白をパディングと言います。このときの内側の余白の大きさをCSSのpaddingプロパティで指定します。<div></div>でマークアップした文章をピンクの罫線で囲み、背景をブルーにした場合は標準でパディング表示はされませぬ。20px;とCSSを記述します。すると罫線の内側には20ピクセルのパディングで余白を作ることができます。パディングはボックスモデルのコンテンツに背景カラーや画像を使用した場合には、パディング領域にコンテンツが含まれます。カラーを指定している画像だったのでパディング領域だけみやすい画像も用意しました。次はCSSでパディングを上下左右の辺ごとに指定する場合はpaddingプロパティの値を記述するときに以下のように指定するとコントロールできます。上下/左右マージンのときと同じですが、辺の指定方法も時計周りにしてCSSを書きます。40px;パディングを個別に指定する場合の書き方これまたマージンと同じですがパディングの指定を完全に個別の辺ごとにCSSで指定する場合は以下のように書きます。40px;パディングの四辺を個別にすることで四辺それぞれに異なるパディングにしたり、一部分の辺だけ指定したりする余白を指定できる書き方です。最後にボックスモデルのコンテンツの部分です。CSSのボックスモデルの構造の中で一番内側になる構造部分です。ボックスモデルのマージン、ボーダー、パディングを指定する値の取り方によってボックスの中のコンテンツはさまざまな位置にコントロールできます。背景画像をつけてボックスの位置や余白の取り方を色々試していくと、理解しずらかったボックスモデルのマージン、ボーダー、パディング、がコンテンツに対してどのように指定されて表示されるのか視覚的にも理解が深まります。ボックスモデルの構造を分かりやすく例えるならCSSのボックスモデルの構造の内部、マージン、ボーダー、パディングを少しでも理解できるように記事にしてきましたが、ボックスモデルの構造を分かりやすく何かに例えるなら「家の中と外」のイメージですね。ボーダーを指定しているなら、ボーダーを家の外と中の「ボーダーライン」にして、家の外をmargin。家の中をpaddingのようなイメージを持ってボックスモデルを組み立てていくと理解がしやすくなるかも?しれません。理解するために例えを進化させると、夫婦関係の「ボーダーライン」。自分自身はコンテンツ。パディングもカラーや画像を使うとコンテンツに含まれるので、自分色に染めて領域を増せるので自分パディング。問題は長年連れ添ってる旦那や嫁の変貌ぶりに嫌気がさし、ボーダーラインの外、つまりmargin旦那や嫁になってしまうことです。例えが分かりそうな場合は、そんな感じで理解してみてください。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.10.22CSSでwidthとheightプロパティを利用するとボックスの横幅と高さを指定することができます。2019.11.08以前にヘッダーにロゴとメニューをHTMLでマークアップした記事を書いたことがあって、そろそろCSSでロゴの横にメニューを横並びしてみたくなりました。WordPress.。