HTML/CSS入門編｜8章：ボックスモデルを学ぼう

HTML/CSS入門編 8章ボックスモデルを学ぼう

本章では、WebページのCSSコーディングをする上での重要な概念であるボックスモデルについて解説します。

ボックスモデルについての理解は、デザインカンプのデザイン（レイアウトや装飾）をCSSで正確に再現するために必須となります。

演習素材について
本章では、「8章ボックスモデルを学ぼう」フォルダ内の演習データを使用します。
「8章ボックスモデルを学ぼう」フォルダの中には、「boxmodel-lesson」と「a-btn-lesson」フォルダが入っています。

「8章ボックスモデルを学ぼう」フォルダ
- start：作業前のデータが入っています。
- fin：完成データが入っています。

演習を行う際には、「start」フォルダ内のファイルを使用してください。
自分で書いたコードがうまく表示されないときは、「fin」フォルダ内の完成データとの違いを探してみると良いでしょう。

※「HTML/CSS入門編はじめに - Webページのことを知ろう」の「【0-4】HTML/CSS 入門編演習素材のダウンロード」節で、本教材の演習で使用するデータをまとめてダウンロードすることができます。

【8-1】ボックスモデルとは

ボックスモデルの概念を学ぼう

ブラウザは、基本的にHTMLタグでマークアップされたすべての要素を、1つの四角い領域＝ボックスとしてみなし、Webページのレイアウトは、このボックスに対してサイズ（幅・高さ）、並び方、余白などを指定することによって行います。
ボックスの中心部には、テキストなどのコンテンツを表示するためのコンテンツ領域があり、この領域は初期状態ではコンテンツの分量に応じた幅と高さを持ちますが、CSSによってサイズの調整が可能です。
コンテンツ領域の周囲には、ボーダー（枠線）、パディング（ボーダーの内側の余白）、マージン（ボーダーの外側の余白）といった周辺領域があり、これらの周辺領域も、CSSによって自由に見た目を調整することができます。（表示させない設定も可能）
コンテンツ領域の幅・高さ、ボーダー、パディング、マージンというボックスの主要な構成要素を、ブラウザがどのように解釈して描画するか、というルールのことをボックスモデルといいます。

ボックスモデルの概念図

ボックスモデルの主要プロパティ

プロパティ名	意味
width	幅
height	高さ
border	枠線
padding	ボーダーの内側の余白
margin	ボーダーの外側の余白

ボックスを視覚化するために背景色を入れる

HTMLタグでマークアップしただけでは、ボックスは目に見えません。

<h1>みんなのパスタレシピ</h1>
<p class="main-text">
  このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br />
  ぜひ自分でつくって食べてみてね！
</p>
<h2>ペペロンチーノ</h2>

HTML/CSS入門編サンプルコード8-1

ブラウザプレビュー

上記HTMLサンプルコード8-1に以下のCSSを適用すると、ボックスのコンテンツ領域が視覚化されます。

h1 {
  background-color: #ff0000;
}

p {
  background-color: #f5f5dc;
}

h2 {
  background-color: #00ad00;
}

HTML/CSS入門編サンプルコード8-2

ブラウザプレビュー

各要素にbackground-colorを設定すると、このようにボックスのコンテンツ領域に背景色が表示され、視覚的にわかりやすくなります。
ボックスモデルを視覚的に理解するには、背景色を使うことが有効です。

ブロックボックスとインラインボックスを学ぼう

先述したように、すべてのHTMLタグはボックスと呼ばれるコンテンツ領域と、枠線や余白部分といったその周辺領域を持ちます。
このボックスには、「ブロックボックス」と「インラインボックス」の2種類があります。

h1、p、ul、ol、li、div要素...などで作成されるボックスはブロックボックスです。
ブロックボックスになる要素をブロック要素といいます。
a、img、span、input、textarea要素...などで作成されるボックスはインラインボックスです。
インラインボックスになる要素をインライン要素といいます。

ブロックボックスとインラインボックスの分類表

分類	説明	代表的なHTMLタグ
ブロックボックス	独立した要素として扱われ、改行されて積み重なる要素	h1~h6, p, blockquote, pre, hr, article, section, aside, nav, header, footer, address, div, main, figure, figcaption, fieldset, ul, ol, li, table, thead, tbody, tfoot, tr, th, td
インラインボックス	テキストの一部として扱われ、横に並ぶ要素	span, a, strong, em, img, code, abbr, cite, small, sub, sup, label, time

※上記の表を全て覚えなくても、実際にタグを入力し、ブラウザプレビューしてみれば、ブロックボックスは前後が改行され、インラインボックスは連続して入力すれば横に並んで表示されるので、すぐにどちらなのかを確認することができます。

ブロックボックスの特徴

前後に改行が入る
幅と高さをCSSで設定することができる
初期状態では、コンテンツの分量と関係なく親要素と同じ幅に広がる
初期状態では、コンテンツがちょうど収まる最小限の高さになる
代表的なブロック要素：h1、p、ul、ol、li、div要素など

インラインボックスの特徴

改行が入らない
幅と高さをCSSで設定することができない（例外あり）
幅も高さも、その要素のコンテンツがピッタリ収まるサイズになる
上下のマージンを設定することができない
代表的なインライン要素：a、img、span、input、textarea要素など

全てのタグの要素は、ブロック要素とインライン要素のどちらかに分類されます。
ブロックボックスとインラインボックスは、それぞれ異なる特徴を持っており、CSSによるレイアウトや装飾を思いどおりに行うために両者の細かな違いを知っておくことは大変重要です。

※現在のCSSの公式仕様では、「インラインレベルボックス（inline-level box）」「ブロックレベルボックス（block-level box）」という表現が使われていますが、現場レベルでは、「ブロックボックス」と「インラインボックス」という呼び方が最も普及しています。

実際のコードとブラウザプレビューで、ブロックボックスとインラインボックスの違いを見てみましょう。

ブロックボックスとインラインボックスの違い

<body>

  <h1>動物写真集</h1>

  <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="dog.html">犬のページ</a></li>
    <li><a href="cat/cat.html">猫のページ</a></li>
    <li><a href="rabbit/rabbit.html">うさぎのページ</a></li>
  </ul>
  
</body>

HTML/CSS入門編サンプルコード8-3

h1 {
  background-color: #9bd670; /* 緑 */
}

a {
  background-color: #ffe51c; /* 黄 */
}

HTML/CSS入門編サンプルコード8-4

ブラウザプレビュー

上記のブロックボックスとインラインボックスの特徴は、実務レベルのCSSコーディングにおいては大変重要な知識となりますので、何度も確認しながら学習を進めましょう。

続いて、ボックスモデルの主要プロパティである、幅（width）、高さ（height）、ボーダー（border）、パディング（padding）、マージン（margin）の5つのプロパティの記述方法を解説していきます。
実際にコードを入力しながら学習していきましょう。

それでは、ボックスモデルの演習を開始します。

本演習では、「boxmodel-lesson」フォルダ内のファイルを使用します。

演習の準備

1. 「start」フォルダ内に格納されているpasta-recipe.htmlと「css」フォルダ内のstyle.cssをエディターで開いてください。
2. ブラウザプレビューします。

このファイルの内容は、前章「HTML/CSS入門編 7章 Webフォントを使おう」で作成したpasta-recipe.htmlと基本的には同じですが、見やすさを考慮し、一部のCSSを削除してあります。
前章の学習で自分で作成したファイルをそのまま流用しても構いません。
その場合は必要に応じて不要なCSSを削除またはコメントアウトしてください。

演習ファイルのブラウザプレビュー

【8-2】ボックスモデルのプロパティを覚えよう

ボックスモデルの主要なプロパティは、幅（width）、高さ（height）、ボーダー（border）、パディング（padding）、マージン（margin）の5つです。

幅（width）を指定しよう

幅の設定

width:サイズ指定;

HTML/CSS入門編サンプルコード8-5

ボックスの幅を指定するためにはwidthプロパティを使います。
ブロックボックスの幅の初期値は「auto」となり、何も指定しなければ幅は親要素の横幅いっぱいのサイズになります。
このボックスの幅を特定のサイズで表示したい場合に、widthを指定します。
img要素、input、textarea要素以外のインラインボックス（a、span要素など）には、widthは適用されません。

幅（width）をpx指定したときと%指定したときの違い

px指定したとき

%指定したとき

【画面収録】px指定

【画面収録】%指定

高さ（height）を指定しよう

高さの設定

height:サイズ指定;

HTML/CSS入門編サンプルコード8-6

ボックスの高さを指定するためにはheightプロパティを使います。
ブロックボックスとインラインボックスの高さは共に、何も指定しなければコンテンツの分量に応じて最小限のサイズに広がります。
このボックスの高さを特定のサイズで表示したい場合に、heightを指定します。
img要素、input、textarea要素以外のインラインボックス（a、span要素など）には、heightは適用されません。

高さ（height）をpx指定したときと%指定したときの違い

px指定したとき

%指定したとき

【画面収録】px指定

【画面収録】%指定

ボーダー（border）を指定しよう

ボーダーの設定

border:色指定 太さ 種類;

HTML/CSS入門編サンプルコード8-7

ボックスの周囲にボーダー（枠線）を指定するためにはborderプロパティを使います。
ボーダーを表示するためには、以下の3つのプロパティを全部指定しなければなりません。
3つのプロパティを記述する順番に決まりはありません。

プロパティ	意味
border-color	ボーダーの色
border-width	ボーダーの太さ
border-style	ボーダーの種類（solid（実線）、dotted（点線）、dashed（破線）、double（二重線））

border-color: #543700;
border-width: 6px;
border-style: solid;

HTML/CSS入門編サンプルコード8-8

上記CSSサンプルコード8-8は、以下のようにまとめて記述することができます。

 border: #543700 6px solid;

HTML/CSS入門編サンプルコード8-9

このように、CSSのプロパティには、複数のプロパティを1行にまとめて記述するショートハンドと呼ばれる記述法が使えるものがあります。
borderプロパティのショートハンドは、使用頻度の高いプロパティのひとつです。
通常はこちらの記述方法でまったく問題ありません。

ブラウザプレビュー（solid）

ブラウザプレビュー（dotted）

ブラウザプレビュー（dashed）

ブラウザプレビュー（double）

【画面収録】h1要素にborderプロパティを設定する

上下左右のボーダーを個別に指定しよう

上下左右のボーダーは以下のプロパティで個別に指定することができます。
見出しの装飾や、罫線などに利用することができます。

ボックスモデルの概念図（borderの個別指定）

上ボーダーの設定

border-top:色指定 太さ 種類;

HTML/CSS入門編サンプルコード8-10

下ボーダーの設定

border-bottom:色指定 太さ 種類;

HTML/CSS入門編サンプルコード8-11

左ボーダーの設定

border-left:色指定 太さ 種類;

HTML/CSS入門編サンプルコード8-12

右ボーダーの設定

border-right:色指定 太さ 種類;

HTML/CSS入門編サンプルコード8-13

※3つの値を記述する順番に決まりはありません。

記述例

h2 {
  width: 1000px;
  margin: 0 auto 40px auto;
  color: #ffffff;
  background-color: #00ad00;
  border-left: 8px solid #006400;
  text-indent: 6px;
  box-sizing: border-box;
}

.main-text {
  width: 1000px;
  margin: 0 auto 40px auto;
  font-size: 20px;
  line-height: 1.75;
  border-bottom: 2px dashed #444;
  box-sizing: border-box;
}

HTML/CSS入門編サンプルコード8-14

ブラウザプレビュー

※h2要素をtext-indentで字下げすることにより、ボーダーとテキスト「ペペロンチーノ」との間に適度な余白を設定しています。

【画面収録】pとh2要素にボーダーを設定する

パディング（padding）を指定しよう

パディング（padding）の設定

padding: 余白の数値（px、%など）;

HTML/CSS入門編サンプルコード8-15

ボーダーとコンテンツ領域の間の余白のことをパディングといい、paddingプロパティで余白の数値を指定します。
paddingで設定した余白部分には背景色や背景画像が表示されます。
テキストの周囲に余白をつくり、読みやすくするなどの用途に使います。

記述例

h1 {
/*・・・省略・・・*/
  width: 1000px;
  border: #543700 6px solid;
  padding: 10px;
}

HTML/CSS入門編サンプルコード8-16

padding設定前

padding設定後

【画面収録】h1要素にpaddingプロパティを設定する

paddingで余白を指定するときの注意点を知ろう
h1要素にpaddingを10px指定すると、コンテンツ領域とボーダーの間に上下左右それぞれ10pxずつの余白ができます。
このとき、注意が必要なのは、元々設定されていたwidthやheight、borderプロパティのサイズにpaddingの余白が加算されることにより、ボックスの見た目が大きくなるという点です。（【図解】を参照）
この問題に対処するためには、次の２つの方法があります。

【図解】borderとpaddingを設定したh1要素の実際のサイズ

対処法1. widthからpadding、borderを引き算する

パディングとボーダーを含むh1要素全体の幅を1000pxに設定したい場合は、次のようにwidthの数値を変更するという方法があります。

h1 {
/*・・・省略・・・*/
  width: 968px;
  border: #543700 6px solid;
  padding: 10px;
}

HTML/CSS入門編サンプルコード8-17

【図解】borderとpaddingの値は変えずにh1要素の全体の幅を1000pxに設定する

このように、横方向のパディングとボーダーのサイズの合計32pxをwidthの1000pxから減算するのです。
これで、全体の幅は1000pxになりますが、この方法では直感的にわかりにくい数値指定になってしまう上に、widthが%指定されている場合は減算の計算が複雑になるという欠点があります。

対処法2. box-sizingプロパティで対処する

box-sizingは、要素の幅や高さの計算方法を決めるプロパティです。
値にborder-boxを指定すると、要素のwidthとheightがpaddingやborderを含めたサイズで計算されるようになります。

h1 {
  /*・・・省略・・・*/
  width: 1000px;
  border: #543700 6px solid;
  padding: 10px;
  box-sizing: border-box;
}

HTML/CSS入門編サンプルコード8-18

応用・豆知識

box-sizing: border-box; は非常に便利なため、多くのWebサイトではCSSファイルの冒頭で以下のように記述し、すべての要素に適用しています。

*,
*::before,
*::after {
  box-sizing: border-box;
}

この「おまじない」を最初に書いておくことで、すべての要素でwidthやheightの計算が直感的になり、レイアウトが格段に組みやすくなります。

【図解】box-sizingプロパティでwidthにborderとpaddingが含まれる設定にした場合

上下左右のパディングを個別に指定しよう

上下左右のパディングは以下のプロパティで個別に指定することができます。

ボックスモデルの概念図（paddingの個別指定）

上パディングの設定

padding-top:余白の数値（px、%など）;

HTML/CSS入門編サンプルコード8-19

下パディングの設定

padding-bottom:余白の数値（px、%など）;

HTML/CSS入門編サンプルコード8-20

左パディングの設定

padding-left:余白の数値（px、%など）;

HTML/CSS入門編サンプルコード8-21

右パディングの設定

padding-right:余白の数値（px、%など）;

HTML/CSS入門編サンプルコード8-22

パディングのショートハンドを覚えよう

パディングには、上下左右の個別指定を1行にまとめるショートハンドがあります。
この記述方法は大変便利ですので、パターンを覚えましょう。

※半角スペースを空けながら複数の値を記述します。

マージン（margin）を指定しよう

マージン（margin）の設定

margin: 余白の数値（px、%など）;

HTML/CSS入門編サンプルコード8-23

ボーダーの外側の余白のことをマージンと呼び、marginプロパティで数値を指定します。
marginで設定した余白部分には背景色や背景画像が表示されません。
隣り合う他の要素との間隔を調整するために使います。

記述例

h1 {
  margin: 50px;
}

HTML/CSS入門編サンプルコード8-24

margin設定前

margin設定後

※h1要素にマージンを設定すると、body要素やp要素との間隔が空きました。

【画面収録】h1要素にmarginプロパティを設定する

ボーダーが表示されていないと、マージンとパディングはブラウザ表示上、見た目上の違いがない場合もありますが、基本的には以下のような使い分けをするとよいでしょう。

marginとpaddingの違い

プロパティ	適用範囲	用途
margin	要素の外側の余白	要素間の間隔の調整
padding	要素の内側の余白	コンテンツとボーダーの間の余白の調整

※要素の内側と外側の境界線がボーダーです

上下左右のマージンを個別に指定しよう

上下左右のマージンは以下のプロパティで個別に指定することができます。

ボックスモデルの概念図（marginの個別指定）

上マージンの設定

margin-top:余白の数値（px、%など）;

HTML/CSS入門編サンプルコード8-25

下マージンの設定

margin-bottom:余白の数値（px、%など）;

HTML/CSS入門編サンプルコード8-26

左マージンの設定

margin-left:余白の数値（px、%など）;

HTML/CSS入門編サンプルコード8-27

右マージンの設定

margin-right:余白の数値（px、%など）;

HTML/CSS入門編サンプルコード8-28

マージンのショートハンドを覚えよう

パディングと同様に、マージンには、上下左右の個別指定を1行にまとめるショートハンドがあります。
基本的なルールはパディングのショートハンドと同じです。

※半角スペースを空けながら複数の値を記述します。

マージンの相殺を知ろう

marginプロパティを使うときの注意点は、マージンの相殺（そうさい）という仕様について理解し、対処法を知っておくことです。
マージンの相殺とは、2つのブロックボックスが垂直方向に並んでいるとき、marginの合計ではなく、大きい方のmarginのみが適用されるという仕様のことです。
通常、marginの値は足し算されず、どちらか大きい方の値が優先されるという仕組みになっています。

マージンの相殺の主な2パターン

垂直方向に並んだブロックボックスのmargin
親子要素のmargin

1. 垂直方向に並んだブロックボックスのmarginの相殺

縦に並んだ要素間のマージンは合算されません。
h1要素のmargin-bottomを50px、p要素のmargin-topを30pxに設定すると、大きい方の50pxのみが適用されます。

<h1>みんなのパスタレシピ</h1>
<p class="main-text">
  このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br>
  ぜひ自分でつくって食べてみてね！
</p>

HTML/CSS入門編サンプルコード8-29

h1 {
  /*・・・省略・・・*/
  margin-bottom: 50px;
}

.main-text {
  /*・・・省略・・・*/
  margin-top: 30px;
}

HTML/CSS入門編サンプルコード8-30

ブラウザプレビュー

2. 親子要素のマージンの相殺

親要素と子要素のマージンも合算されません。
body要素のmargin-topを50px、h1要素のmargin-topを30pxに設定すると、大きい方の50pxのみが適用されます。

<body>
  <h1>みんなのパスタレシピ</h1>
  <!-- 中略 -->
</body>

HTML/CSS入門編サンプルコード8-31

body {
  /*・・・省略・・・*/
  margin-top: 50px;
}

h1 {
  /*・・・省略・・・*/
  margin-top: 30px;
}

HTML/CSS入門編サンプルコード8-32

ブラウザプレビュー

マージンの相殺を避けるには？

マージンの相殺を避けるための解決法の1つは、paddingを使うことです。
2つの要素の境界にボーダーを表示しているときは、見た目に影響してしまいますので注意が必要ですが、ボーダーが非表示であれば、最もシンプルな解決策です。

h1 {
  /*・・・省略・・・*/
  margin-bottom: 50px;
}

.main-text {
  /*・・・省略・・・*/
  padding-top: 30px;
}

HTML/CSS入門編サンプルコード8-33

ブラウザプレビュー

ボックスを中央配置にしよう

widthを指定したブロックボックスは、親要素の幅に応じて水平位置を中央に配置することができます。
左右のマージンを「auto」と指定すると、そのボックスを中央に配置することができます。
※widthが指定されていない、または100%と指定されている場合は、中央に配置されず、左寄せのままです。

記述例

<body>
  <h1>みんなのパスタレシピ</h1>
  <p class="main-text">
    このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br>
    ぜひ自分でつくって食べてみてね！
  </p>

  <h2>ペペロンチーノ</h2>
  <!-- 中略 -->
</body>

HTML/CSS入門編サンプルコード8-34

h1 {
  width: 1000px;
  margin: 20px auto 40px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 45px;
  text-align: center;
  letter-spacing: 0.1em;
  background-color: #ff0000;
  border: #543700 6px solid;
  padding: 10px;
  box-sizing: border-box;
}

h2 {
  width: 1000px;
  margin: 0 auto 40px auto;
  color: #ffffff;
  background-color: #00ad00;
  border-left: 8px solid #006400;
  text-indent: 6px;
  box-sizing: border-box;
}

.main-text {
  width: 1000px;
  margin: 0 auto 40px auto;
  font-size: 20px;
  line-height: 1.75;
  border-bottom: 2px dashed #444;
  box-sizing: border-box;
}

HTML/CSS入門編サンプルコード8-35

ブラウザプレビュー

【画面収録】h1、h2、p要素を中央配置にする

displayプロパティを使おう

displayプロパティは要素の表示形式（レイアウトの方法）を設定するためのプロパティです。
displayプロパティを使用すると、ブロックボックスをインラインボックスに、インラインボックスをブロックボックスに変換することなどができます。

display: 値（表示形式）;

HTML/CSS入門編サンプルコード8-36

displayプロパティの値

displayプロパティで指定できるブロック、インライン関係の値にはblock、inline、inline-blockの3種類があります。
それぞれの違いは以下のようになります。

	block	inline	inline-block
改行	あり	なし（横に並ぶ）	なし（横に並ぶ）
width / height	設定可能	設定不可	設定可能
margin-top / margin-bottom	設定可能	設定不可	設定可能
ボックスの中央配置	可能	不可	不可

img要素を中央配置にしよう

img要素はインライン要素であるため、左右のマージンをautoに設定しても中央配置にできません。
しかし、次のように、displayプロパティの値をblockに設定すれば、ブロックボックスに変換されるので、中央配置が可能になります。

img {
  display: block;
  margin: 0 auto;
}

HTML/CSS入門編サンプルコード8-37

ブラウザプレビュー

【画面収録】img要素をmargin:0 auto;で中央配置にする

【8-3】ボックスを装飾しよう

ボタンをデザインしよう

ボックスを装飾するプロパティを使い、ボタンをデザインしてみましょう。

ボックスを装飾するプロパティには以下のものがあります。
これらのプロパティを使用して、右のようなボタンをデザインしてみます。

ボックスの装飾

ボックスを角丸にする（border-radiusプロパティ）
ボックスに影をつける（box-shadowプロパティ）
グラデーションの背景色を作成する（backgroundプロパティの関数linear-gradient）

ブラウザプレビュー

【画面収録】a要素を装飾してボタンをデザインする

ボタンデザインの演習を開始します。
ここからの演習では、「a-btn-lesson」フォルダ内のファイルを使用します。

a要素をサイズ指定しよう

まずは、「start」フォルダ内のindex.htmlと「css」フォルダに格納されているstyle.cssをエディターで開き、ブラウザプレビューしましょう。
ボタンにはリンク先を設定しますので、aタグを使い、以下のようにマークアップします。
このa要素をCSSで装飾していきます。

<a href="#" class="btn">カートに入れる</a>

HTML/CSS入門編サンプルコード8-38

後ほどグラデーションの背景色に差し替えますが、ここではまず通常の背景色を指定しておきます。
お好きな色で構いません。

.btn {
  background-color: #ff7535;
}

HTML/CSS入門編サンプルコード8-39

ブラウザプレビュー

a要素はインラインボックスであるため、幅、高さはコンテンツであるテキスト「カートに入れる」がギリギリ収まるサイズになります。

続いて、サイズ（width、height）を指定します。
インラインボックスにはwidth、heightは設定不可であるため、displayプロパティでブロックボックスに変換します。

.btn {
  background-color: #ff7535;
  width: 200px;
  height: 40px;
  display: block;
}

HTML/CSS入門編サンプルコード8-40

ブラウザプレビュー

a要素にwidth、heightが設定されました。

テキストの装飾や表示位置を設定しよう

次にテキストの装飾や表示位置を設定します。
以下のプロパティを追加してください。

.btn {
  background-color: #ff7535;
  width: 200px;
  height: 40px;
  display: block;
  color: #ffffff;/*文字色：白*/
  text-align: center;/*水平方向の行揃え：中央揃え*/
  line-height: 40px;/*行の高さ：ボックスの高さと同じ数値で、垂直方向の揃えが中央になる*/
  text-decoration: none;/*下線を消す*/
  font-size: 14px;/*文字サイズ*/
  font-family: sans-serif;/*書体：ゴシック系*/
  font-weight: bold;/*太字*/
}

HTML/CSS入門編サンプルコード8-41

ブラウザプレビュー

テキストの装飾と表示位置が設定されました。

1行テキスト垂直方向の行揃えを中央に設定するには

line-heightは複数行テキストの行間を設定するプロパティですが、1行テキストに設定する際、親要素の高さと同じ数値を指定すると、テキストがその親要素の高さに対して垂直方向中央に位置します。

土台となるパーツができました。
ここから角丸・影・グラデーションの装飾を適用し、デザインを完成させていきます。

ボックスを角丸にしよう

border-radius: 40px;

HTML/CSS入門編サンプルコード8-42

ボックスを角丸にするには、border-radiusプロパティを使います。

.btn {
  background-color: #ff7535;
  width: 200px;
  height: 40px;
  display: block;
  color: #ffffff;/*文字色：白*/
  text-align: center;/*水平方向の行揃え：中央揃え*/
  line-height: 40px;/*行間：ボックスの高さと同じ数値で、垂直方向の揃えが中央になる*/
  text-decoration: none;/*下線を消す*/
  font-size: 14px;/*文字サイズ*/
  font-family: sans-serif;/*書体：ゴシック系*/
  font-weight: bold;/*太字*/
  border-radius: 40px;/*ボックスを角丸にする*/
}

HTML/CSS入門編サンプルコード8-43

ブラウザプレビュー

ボックスに影をつけよう

box-shadow: 1px 1px 3px #949494;

HTML/CSS入門編サンプルコード8-44

ボックスに影をつけるには、box-shadowプロパティを使います。

.btn {
  background-color: #ff7535;
  width: 200px;
  height: 40px;
  display: block;
  color: #ffffff;/*文字色：白*/
  text-align: center;/*水平方向の行揃え：中央揃え*/
  line-height: 40px;/*行間：ボックスの高さと同じ数値で、垂直方向の揃えが中央になる*/
  text-decoration: none;/*下線を消す*/
  font-size: 14px;/*文字サイズ*/
  font-family: sans-serif;/*書体：ゴシック系*/
  font-weight: bold;/*太字*/
  border-radius: 40px;/*ボックスを角丸にする*/
  box-shadow: 1px 1px 3px #949494;/*ボックスに影をつける*/
}

HTML/CSS入門編サンプルコード8-45

ブラウザプレビュー

上下左右に均一な影をつける

横方向の距離と縦方向の距離を共に0に設定することにより、上下左右に均一で対称な影をつけることができます。

.btn {
/*　省略　*/
  box-shadow: 0px 0px 3px #949494;/*上下左右に均一な影をつける*/
}

HTML/CSS入門編サンプルコード8-46

ブラウザプレビュー

影を内側につける

初期設定では影はボックスの外側につきますが、insetという値を追加することにより、影をボックスの内側につけることができます。

.btn {
/*　省略　*/
  box-shadow: inset 1px 1px 5px #5e5e5e;/*ボックスの内側に影をつける*/
}

HTML/CSS入門編サンプルコード8-47

ブラウザプレビュー

グラデーションの背景色を作成しよう

background: linear-gradient(to bottom, #ef4c00, #ff8e5a);

HTML/CSS入門編サンプルコード8-48

グラデーションの背景色を作成するには、backgroundプロパティの値であるlinear-gradientを使用します。

上記が基本的な書式です。
「to 方向」の「方向」には、「top」「right」「bottom」「left」のどれかを指定します。

記述例（下へ向けて2色のグラデーション）

.btn {
  background-color: #ff7535;
  width: 200px;
  height: 40px;
  display: block;
  color: #ffffff;/*文字色：白*/
  text-align: center;/*水平方向の行揃え：中央揃え*/
  line-height: 40px;/*行間：ボックスの高さと同じ数値で、垂直方向の揃えが中央になる*/
  text-decoration: none;/*下線を消す*/
  font-size: 14px;/*文字サイズ*/
  font-family: sans-serif;/*書体：ゴシック系*/
  font-weight: bold;/*太字*/
  border-radius: 40px;/*ボックスを角丸にする*/
  box-shadow: 1px 1px 3px #949494;/*ボックスに影をつける*/
  background: linear-gradient(to bottom, #ef4c00, #ff8e5a);/*グラデーションの背景色を作成する*/
}

HTML/CSS入門編サンプルコード8-49

ブラウザプレビュー

角度を指定してグラデーションの背景色を作成する

「to 方向」の代わりに、「数値deg」と角度を指定することにより、細かく角度を指定したグラデーションを作成することができます。

記述例（斜め45度へ2色のグラデーション）

background: linear-gradient(45deg, #ef4c00, #ff8e5a);

HTML/CSS入門編サンプルコード8-50

3色以上のグラデーションを作成する

「,」（カンマ）で区切って色の記述を追加していくことにより、3色以上のグラデーションを作成することが可能です。

記述例（下へ向けて4色のグラデーション）

background: linear-gradient(to bottom, #ff641c, #ffc9b0, #ff631a, #c83f00);

HTML/CSS入門編サンプルコード8-51

ブラウザプレビュー

色が変化する位置を指定する

色指定の後に半角スペースを空けてからパーセンテージを追加することにより、グラデーションの色が変化する位置を指定することができます。

記述例（上から65%の位置から色が変化する）

background: linear-gradient(to bottom, #ef4c00 65%, #ff8e5a);

HTML/CSS入門編サンプルコード8-52

ブラウザプレビュー

色が変化する位置の操作で、以下のような立体的なデザインにすることも可能です。

記述例（立体的なデザイン）

background: linear-gradient(to bottom, #ff9260, #ff9360 50%, #ef4c00 50%, #ff8e5a);

HTML/CSS入門編サンプルコード8-53

ブラウザプレビュー

ボタンデザインの完成

最後に、マウスホバー時の設定をして、ボタンデザインの完成です。
装飾はいろいろとアレンジしてみましょう。

記述例（マウスホバー時に表示されるグラデーションの作成）

.btn:hover {
  background: linear-gradient(to bottom, #ff7535, #b83a00);
}

HTML/CSS入門編サンプルコード8-54

完成コード

<a href="#" class="btn">カートに入れる</a>

HTML/CSS入門編サンプルコード8-55

.btn {
  width: 200px;
  height: 40px;
  display: block;
  border-radius: 40px;
  color: #ffffff;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  font-size: 14px;
  font-family: sans-serif;
  font-weight: bold;
  box-shadow: 1px 1px 3px #949494;
  background: linear-gradient(to bottom, #ef4c00, #ff8e5a);
}

.btn:hover {
  background: linear-gradient(to bottom, #ff7535, #b83a00);
}

HTML/CSS入門編サンプルコード8-56

【画面収録】ボタンデザイン完成

これで「HTML/CSS入門編 8章：ボックスモデルを学ぼう」の解説を終わります。
次の章に進みましょう。

前の章に戻る次の章に進む