『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

CSS05 ボックスの構造を理解しよう!その1(10分46秒)

ボックスの構造を理解しよう!その2

スタイルシート独特の考え方であるボックスについて2回に分けて詳しく解説しています。

ボックスの背景、枠線、余白など各要素ごとに細かく指定する方法をマスターしましょう!

第一回目の今回は、ボックスの構造とpaddingとborderプロパティの指定方法・注意点です。

概要

  • ボックスの構造について
  • paddingプロパティ
  • borderプロパティ

補足・ポイント

ボックスの構造について

ボックスの構造

スタイルシートでは、テキストや画像などのコンテンツを格納する領域のことを「ボックス」と呼びます。

ボックスの構造

ボックスは、

  • テキストや画像などコンテンツを表示する領域
  • それを囲む枠線であるボーダー
  • パディングと呼ばれるコンテンツとボーダーの間の余白
  • マージンと呼ばれる枠線と外側の余白

によって構成されています。

こういった、コンテンツ、枠線や余白に対して、それぞれスタイルを指定することで要素をデザインしていきます。

そして、このボックスを元にwebページ全体のデザイン・レイアウトをしていくことになります。

paddingプロパティの書き方

ブロックレベル要素の内側で、コンテンツとの間に余白を作るにはpaddingプロパティを使います。

paddingプロパティの値の指定方法

値を1つ指定する
上下左右、同じサイズのパディングになります。
値を2つ指定する
記述順に、上下・左右のパディングになります。
値を3つ指定する
記述順に、上・左右・下のパディングになります。
値を4つ指定する
記述順に、時計回りに上・右・下・左のパディングになります。

例:上下(60px)と左右(30px)を指定

p {
 padding;60px 30px;
}

※値が0の時には単位は省略できます。

※複数指定は半角スペースで区切ります。

個別にpaddingを指定する書き方

上下左右、どれか1つだけ指定したい場合などには、以下のプロパティを使うこともできます。

  • padding-top(上)
  • padding-right(右)
  • padding-bottom(下)
  • padding-left(左)
p {
padding-bottom:50px;
  padding-top:20px;
}

borderプロパティの書き方

ボックスのボーダー(枠線)は、「スタイル(形状)」「色」「(太さ)」を自由にデザインすることができます。

ボーダーのスタイル(形状)を指定

プロパティ {
border-style:値;
}

値には以下が入ります。

none
表示させない(デフォルト)
solid
1本線で表示されます。
double
2本線で表示されます。
dashed
破線で表示されます。
dotted
点線で表示されます。

※border-styleは省略できません。
ボーダーのスタイルを指定せずに、ボーダーの色や太さを指定しても、枠線は表示されません。
初期値がnoneとなっているためです。

ボーダーの幅を指定

プロパティ {
border-width:数値;
}

※省略できます。
初期値:midium

ボーダーの色を指定

プロパティ {
border-color:色の指定;
}

※省略できます。
テキストに指定した色で表示されます。

例:1本線・3px・赤色

プロパティ {
border-style:solid;
border-width:3px;
border-color:red;
}

ボーダーのスタイル・幅・色を一括指定

borderプロパティを使えば、スタイル、幅、色を一括指定できます。

値は半角スペースで区切ります。

値を書く順番は特に関係ありませんが、自分の書き方を決めておくとよいです。

プロパティ {
border:幅 スタイル 色;
}

例:1px・1本線・赤色

プロパティ {
border:1px solid red;
}

上下左右を個別に指定・一括指定

パディングと同様に、上下左右を個別に指定したり、一括で指定したりすることができます。

値を1つ指定する
上下左右がそのスタイルになります。
値を2つ指定する
記述順に、上下・左右のスタイルになります。
値を3つ指定する
記述順に、上・左右・下のスタイルになります。
値を4つ指定する
記述順に、時計回りで上・右・下・左のスタイルになります。

例:上下と左右のスタイル・幅・色を指定

p {
 border-style:solid double;
border-width:2px 7px;
border-color:red green;
}

個別に指定

上下左右、どれか1つだけ指定したい場合などには、以下のプロパティを使うこともできます。

  • border-top(上)
  • border-right(右)
  • border-bottom(下)
  • border-left(左)

例:p要素の下のみに5px・1本線・赤色

p {
border-bottom:5px solid #cc0000;
}

要領がわかってきたらいろいろと試してみて下さい。

ボーダーやパディングの指定だけでもいろんなデザインができます。

次回は、marginプロパティとボックスとwidthプロパティの関係について解説します。

どうぞ、お楽しみに!

ボックスの構成要素である、paddingやmargin、borderの指定方法には、いくつか種類があり、受講生さんの中には、「全部覚えなければいけないのか!!」と構えてしまわれる方が多いようです。

しかし、これらをすべて覚えなければ、先に進めない・・・ということはないのでご安心を。

CSSを書くことや読むことに慣れてくるとプロパティを見れば、だいたい「何についての指定」なのかが解かるようになってきます。

それができれば、あとは「自分なりの指定方法」みたいなものを決めておけばOKなのです。

Web制作会社には、それぞれCSSの書き方ルールのようなものが決まっていることが多いです。

「何についての指定」の意味さえ理解していれば、就職後も柔軟な対応ができますよね^^

この記事が気に入ったら
いいね ! しよう

関連記事

Webデザイナー向けオンラインスクール・オンラインサロン
ポートフォリオの作り方とWordPressが学べる動画講座

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!