ボックスモデル - web-0127のブログ

ボックスモデルの解説の代表例

ボックスを構成する要素

ボックス幅は、コンテント領域幅＋パディング＋ボーダーの太さ＋マージンです。
コンテント領域がボックス幅ではないので、注意が必要です。

※コンテント：widthとheightプロパティで規定される長方形

パディング：padding

ボーダー辺に対し、コンテントの読みやすさを確保するために空ける空間を指します。
「pad」つまり肩パッドのように、内容の嵩を増して大きいと思わせる設定です。

「padding-top」「padding-right」「padding-bottom」「padding-left」の順に記述します。
これをまとめて記述する場合は、ショートハンドプロパティ「padding」を使用します。

※「−」値は指定できません。

ボーダー：border

本来は「border-width」「border-color」「border-style」プロパティですが、
ショートハンドプロパティ「border」か、「border-top」など個別に指定します。
「幅・色・スタイル」の順序は自由です。

マージン：margin

関連する機能を視覚的にグループ化し、別の機能ブロックと区別しやすくします。
ブロックとブロックの間の空間を広げる設定です。

※「auto」が指定できる。
※「−値」を指定できる。

記述の順序は「外側から」と「重なり順の上から」があります
一般的にレイヤー構図を意識して記述することが少ないからか「外側から」記述することが多いようです
記述順序例

練習課題

【CSS01】

文字色と背景色

<body>
<h1>style要素</h1>
<h3>style element</h3>
<p>HTML文書内にまとめて設定します。</p>
</body>

【CSS02】

文字色と背景色

<body>
<h1>About wine</h1>
<h2>Chianti Classico Riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p>
</body>

【CSS03】

リンクの文字色（擬似クラス）

<body>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</body>

【CSS04】

リンクの背景色（擬似クラス）

<body>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</body>

【CSS05】

背景色と余白

<body>
<h2>background-colorの設定</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>
</body>

【CSS06】

背景画像を設定

【CSS07】

背景画像を設定（水平方向に繰り返し）

【CSS08】

背景画像を設定（垂直方向に繰り返し）

【CSS09】

背景画像と枠線

<body>
<h1>Page Design</h1>
<p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br>
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br>
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p>
</body>

【CSS10】

背景画像（繰り返さない）

<body>
<h1>古池や蛙飛び込む水の音</h1>
<p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br>
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br>
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br>
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p>
</body>

【CSS11】

以下の画像と同じように表示させるCSSを記述しなさい
記述場所はエンベッド

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>正しく構造化されたHTMLの例（CSSが適用されている場合）</title>
</head>
<body>
<div id="shopping">
<h2>今日買った物</h2>
<ul>
<li>豚肉</li>
<li>じゃがいも</li>
<li>たまねぎ</li>
<li>にんじん</li>
</ul>
</div>
</body>
</html>

【CSS12】

HTMLの入力に不安がある人は入力から
CSSはエンベッド

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>エコロジー＆環境問題</title>
</head>
<body>
<h1>エコロジーへの取り組み</h1>
<p>
エコロジーや環境問題への関心は、年々高くなっています。<br />
Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。<br />
専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p>
<p>
また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。<br />
リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 </p>
<address>Copyright (C) Computer Technology Groups. All rights reserved.</address>
</body>
</html>