「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『CSS（シーエスエス）』を学習したい方向けに、
基本的なポイントをまとめてみました！
そもそも『CSS（シーエスエス）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『CSS（シーエスエス）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
また、『HTML（エイチティーエムエル）』は、
『CSS』学習とは切っても切れない基礎知識ですので、
以下の別記事他、『HTML』学習のご紹介ページもぜひ事前にご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
[toc]
『ボックスモデル』を理解しよう！
今回は『ボックスモデル』の基本を学びましょう！
『ボックスモデル』を理解すると、
余白設定等、Webコンテンツを見やすく、
美しく見せるスキルの基本が身に付きます。
当たり前ですが、
HTMLをブラウザ表示させると、
タグに応じてそれぞれコンテンツが表示されますよね。
その各コンテンツの表示領域のことを、
『ボックス』と言います。
『ボックス』は、
コンテンツを表示する「コンテンツ領域」を中心にして、
『パディング』⇒『ボーダー』⇒『マージン』、
の順に外側を囲むようにして構成されています。
これが『ボックスモデル』の基本です。
文章だけでは分かりづらいと思いますので、
以下の図でイメージを確認してみましょう。
ボックスモデルのイメージ図
それぞれのコンテンツ領域の形が、
『箱』みたいなので、
『ボックス』モデルと呼ばれています。
それぞれ詳しく見ていきましょう！
なお、今回の各項目ベースとなるHTML・CSSは以下です。
ボックスモデル.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ボックスモデルに関するCSS学習</title>
<link rel="stylesheet" href="ボックスモデル.css">
</head>
<body>
<h1>ボックスモデルを理解しよう！</h1>
<p>どう変わるのか確認しよう！</p>
</body>
</html>
ボックスモデル.css
@charset "utf-8";
h1 {
background-color: orange;
}
p {
background-color: #A0D8EF;
}※ボックスモデル.cssは後で比較が分かりやすいように、
各文章に色付けしてあります。
一旦ブラウザで表示させてみます。
この見た目がどう変わるのか比較しながら、
これから一緒に学習していきましょう！
パディング（padding）を調整してみよう！
コンテンツ領域のすぐ外側の領域を、
『padding（パディング）』と言います。
先に掲載したボックスモデルのイメージ図も確認してみて下さい。
後述する『border（ボーダー）』と『コンテンツ』の間ですね。
『padding』を操作するとどうなるか、
ボックスモデル.cssを、
以下の通りに編集して確認してみましょう！
ボックスモデル.css
@charset "utf-8";
h1 {
background-color: orange;
padding: 50px;
}
p {
background-color: #A0D8EF;
}
4行目で『padding』を調整しています。
ボックスモデル.htmlをブラウザ表示させてみると、
こんな感じ。
CSSで『padding』を50pxに変更した結果、
オレンジで装飾していた文章（h1部分）が、
全体的に大きくなりました。
水色で装飾していた文章（p部分）との余白部分は、
大きさが変わっていない点も注目です。
（ここは後で学習する『margin』で調整します。）
『padding』設定を、
上下左右個別に操作することも可能です。
以下の通り、ボックスモデル.cssを編集して、
ブラウザ表示させてみましょう。
ボックスモデル.css
@charset "utf-8";
h1 {
background-color: orange;
padding: 50px 10px 25px 30px;
}
p {
background-color: #A0D8EF;
}
こんな感じに見た目が変わりました。
先程は均等に大きくなっていたオレンジ部分が、
上下左右違う大きさに変わっています。
『padding』は、
プロパティ値の記述順番で、
上下左右どこの領域を操作するか、
指定することが出来ます。
今回の例では、
以下の記述順番ルールを使いました。
padding: 上 右 下 左;
その他にも、以下のような、
上下ひとまとめ・左右ひとまとめで設定する方法等もあります。
padding: 上下 左右;
状況に応じて、
書きやすい設定方法を使いましょう！
ボーダー（border）を設定してみよう！
続いて、
『border（ボーダー）』の設定方法を学習していきます！
ここまで使ってきたボックスモデル.cssを、
以下の通りに修正します。
ボックスモデル.css
@charset "utf-8";
h1 {
background-color: orange;
padding: 50px 10px 25px 30px;
}
p {
background-color: #A0D8EF;
border: red solid 10px;
}
8行目で『border』を設定しています。
ブラウザ表示させてみましょう。
水色部分（p部分）に枠線が付きました！
『border』のプロパティ値、
「red」で赤色を指定、
「solid」で枠線の種類を指定、
「10px」で枠線の太さを指定しています。
プロパティ値の順番に特に決まりはありません。
どの順番で書いてもブラウザに認識されます。
色や太さは他の項目と共通の指定方法です。
今回の例で「solid」とした枠線の種類はいくつかあります。
以下、「solid」以外に、
よく使うものをあげておきます。
・「double」＝ 二重線の枠
・「dotted」＝ 点線の枠
・「dashed」＝ 破線の枠
ぜひ組み合わせを色々と試してみて下さい。
表現したいイメージに合わせて、
枠線を自由に作成・調整出来るようになりましょう！
マージン（margin）を調整してみよう！
最後に、
ボックスモデルの一番外側、
『margin（マージン）』を学習していきます。
前半部分で掲載した、
ボックスモデルのイメージ図も再確認して下さい。
「習うより慣れろ。」ということで、
他の項目と同様、
早速比較作業をやってみましょう。
ボックスモデル.cssを以下のように修正します。
ボックスモデル.css
@charset "utf-8";
h1 {
background-color: orange;
padding: 50px 10px 25px 30px;
}
p {
background-color: #A0D8EF;
border: red solid 10px;
margin: 50px;
}
9行目で『margin』を調整しています。
ブラウザ表示してみましょう。
水色部分（p部分）の『margin』が調整されています。
当初より、少し右にずれ、
上のオレンジ色部分（h1部分）との間の余白も大きくなりました。
言い換えると、
「一番外側のマージン領域全体を50pxに調整した。」、
ということになります。
ここまで学習してきた、
『padding』・『border』部分は変わらず、
『border』よりも外側の領域が調整されている点がポイントです。
『padding』で学習した際と同様、
『margin』も上下左右を指定して調整出来ます。
記述方法は『padding』と同じです。
余白をうまく調整して、
見た目に美しい、見やすいWebコンテンツを作成しましょう！
まとめ
-
『ボックスモデル』の理解は、コンテンツの余白調整等、
見た目が美しく、見やすいWebコンテンツ作成の一助となる！ -
『ボックスモデル』の中心は『コンテンツ』。
-
『ボックスモデル』は以下の順で箱が重なっているイメージ。
『コンテンツ』⇒『パディング』⇒『ボーダー』⇒『マージン』 -
『パディング』は『コンテンツ』と『ボーダー』の間の領域。
上下左右の調整が可能。 -
『ボーダー』は枠線のこと。
枠線の色、種類、幅が調整出来る。 -
『ボーダー』より外、一番外側の領域が『マージン』。
『パディング』と同じく、上下左右の調整が可能。
いかがでしたでしょうか？
今回は、『CSS』学習初心者の方向けに、
『ボックスモデル』の基本を解説させて頂きました。
覚えることは沢山ありますが、
焦らず、一つ一つツボをおさえていきましょう！
今後も随時、学習のツボをUPしていけたらと思っていますので、
宜しければご参考下さい。
今回の記事が、
少しでも皆さんのお役に立てたら幸いです！