ボックスモデルについて解説ボックスモデルとはどの要素も四角い領域を生成します。この四角い領域を「ボックス」といいます。ボックスを作成する要素はブロックレベル要素に限りません。インライン要素もボックスを作成しますがその表示方法が少しブロック要素と異なるところがポイントです。*要素とはあるタグで囲まれた内容のすべての(タグを含めて)ことです。area)があり、それを囲むパディング(padding)、ボーダー(border)、マージン(margin)といった周辺領域を持ちます。図示すると次のようになります。ボックスの幅と高さボックスの幅と高さは次のような計算式で算出されます。要素に背景色または背景画像を設定した場合は内容領域とパディング領域とボーダー領域までが描画されます。マージン領域には描画されません。マージン領域は常に透明で親要素の背景色または背景画像が描写されます。ルート要素の背景は、ユーザーエージェント(ブラウザ)の表示部分全体の背景となります。それはマージン部分やスクロールバー部分を含みますのでルート要素に設定した背景はマージン部分に表示されます。パディングを設定したような状態になります。」マージンマージンは上下左右に設定できます。margin-left値は数値指定する場合とパーセンテージ指定する場合があります。数値で指定する場合は必要なマージンを数値で指定しますが、パーセンテージ指定する場合は包含ブロックについて理解する必要があります。包含ブロックは次に説明予定です。数値指定、パーセンテージ指定ともマイナス指定が可能です。値にautoを使用することができます。これは状況によって自動的に値が決まります。値をautoにした場合のポイントはインライン要素のマージンの上下左右は0が設定されます。ブロック要素の上下の値をautoにした場合は0として設定されます。次のようなp要素を中央揃えするサンプルを用意しました。amet</p>p{width:360px;margin-left:auto;margin-right:auto;}.test{margin:auto;}この例はブロック要素を中央揃えする時に使用される定番の方法です。ポイントはwidthで幅を決めておくことです。サンプルを確認してみると、どの行も中央揃えされているのがわかります。注意深く見ると、1行目と2行目の行間と3行目と4行目の行間が変わっています。これは1行目と2行目のp要素には上下のマージンを設定していません。上下のマージンはブラウザのデフォルトのマージン設定がそのまま効いた状態になっています。ところが、3行目と4行目はmargin:autoとして上下左右にautoの値を設定しています。左右のautoは中央揃えの役目を担います。上下のautoは値を0に設定したことと同様になります。そのためブラウザデフォルトの値は0に書き換えられて行間が変わった訳です。見逃しがちなところですからmargin:autoの記述は十分気をつけましょう。1〜margin-autoマージンの相殺マージンの相殺について次のように定義されています。相互に隣り合っているか、入れ子関係にある複数のボックス間において、間にパディングもしくはボーダー領域を挟まずに隣接するマージンは結合して1つのマージンになります。この現象のことをマージンの相殺といいます。わかりにくい表現ですが、これは通常フローする兄弟要素の垂直方向のマージンは結合されると言っています。「間にパディングもしくはボーダー領域を挟まず」とは親子関係のボックスを指しています。親要素にパディングまたはボーダーがないと親子のマージンは結合され、あたかも親要素に子要素のマージンが突き出たかのようになります。この現象はレイアウトを作るときに悩まされる現象ですからしっかりと学習をして身につけておきたいところです。通常にフローしている複数のブロックボックス間で相殺が行われ、隣接するマージンの最大値が相殺後のマージン幅となります。正負の値が混在している場合、最大値と最小値を足し合わせた値がマージン幅となり、正の値が存在しない場合は隣接するマージンの最小値がマージン幅となります。マージンの相殺は水平方向のマージンは相殺されません。フロートしたボックス間、絶対配置及び相対配置のボックスにおいては、マージンは相殺されません。パディングパディングは要素の内容領域とボーダーとの余白です。上下左右にパディングを設定できます。パディングの値は数値やパーセンテージで指定をすることができますが、マイナスの値は指定できませんW3Cの仕様には値にautoの記述はありません。autoはマージンで使用するようにしましょう。padding-leftボーダーボーダープロパティは、ボックスのボーダー領域の幅、色、形式を指定するものです。これらのプロパティはあらゆる要素(ブロックレベル要素、インライン要素)に適用可能です。border-left-width値は次のキーワードを使用するか数値で指定します。マイナスの値はありません。autoもありません。thin:細いボーダーmedium:通常のボーダーthick:太いボーダー3つの値の解釈はUAに依存しますが、次の関係は守る必要があります。border-left-color値はcolor指定します。border-left-style値には以下のものがありますが、ブラウザで表示の変わるものもあります。none:ボーダーを無しにします。この値を指定すると’border-width’の算出値は強制的に’0’になります。hidden:’none’とほぼ同じです。表関連要素でボーダーの競合が発生する場合は例外となります。dotted:ボーダーを点線にします。dashed:ボーダーを破線にします。solid:ボーダーを切れ目の無い実線にします。double:ボーダーを二重線にします。2本の実線とその間の空白との合計幅が’border-width’の値と等しくなります。groove:キャンバスの窪みとしてボーダーを表示します。ridge:’groove’の逆で、キャンバスの隆起としてボーダーを表示します。inset:ボックスのボーダーより内側全体がキャンバスの窪みになる様に表示します。outset:’inset’の逆で、ボックスのボーダーより内側全体がキャンバスの隆起になる様に表示します。ボーダーの種類の設定は規定値がnoneです。そのため他のborder-widthやborder-colorを指定してもボーダーは表示されません。逆にこの性質を利用してborder-styleをnoneにすることですでに設定しているborderの設定を取り消して非表示にすることができます。SNSで共有しましょう。