HTML5プロフェッショナル認定 レベル--技術解説無料セミナー
2021/7/11 開催

主題

1.2.2 CSSデザイン

副題

ボックス関連仕様の基本をおさえよう︕

本⽇の講師

NTTテクノクロス株式会社
鈴⽊ 雅貴© LPI-Japan / EDUCO all rights reserved.

⾃⼰紹介

n 鈴⽊雅貴(SUZUKI Masataka) NTTテクノクロス株式会社に所属
 デザインの⼒で会社をよくしていく仕事 Web標準技術が得意 アヒル好きn NTTテクノクロス
 https://www.ntt-tx.co.jp/
 NTT研究所の技術を軸として、世の中の優れた技術・サービスを掛け合わせ、お客様と共にみらいを共創していきます。
© LPI-Japan all rights reserved.

2

関連書籍のご紹介

n HTML5プロフェッショナル認定試験の対策テキスト『HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集』『HTML5プロフェッショナル認定試験 レベル2 対策テキスト&問題集』

私の著書はこちら© LPI-Japan all rights reserved.

3

認定のご紹介n HTML5プロフェッショナル認定とは
WEBサイトやWEBアプリケーションを開発する上で必須である HTML5／CSS／JavaScriptなどについての技術⼒を証明する認定です。基礎から網羅的に学ぶことは、効率的に開発を⾏う上できっと役⽴つことでしょう。

üレベル１はHTMLとCSS
HTMLの基本的な部分からレスポンシブデザインが中⼼で、サイト制作のためのスキルの証明

üレベル２ではJavaScriptJavaScriptを使ってWEBアプリケーションを構築できるだけのスキルの証明© LPI-Japan all rights reserved.

4

今回のテーマボックス関連仕様の基礎をおさえる© LPI-Japan all rights reserved.

5

本⽇お話すること

n ボックスとはn CSSでのボックス操作
n ボックスタイプ
n CSSでのボックスタイプ指定
n まとめ© LPI-Japan all rights reserved.

6

ボックスとは© LPI-Japan all rights reserved.

7

ボックスとはn Webブラウザは、HTMLの要素を⻑⽅形の箱として配置する
n この⻑⽅形の箱がボックス
HTML<p>文章です</p><p>これも文章です</p>

画⾯イメージ
文章です
これも文章です
これがボックス(便宜上黒背景と余白を追加)© LPI-Japan all rights reserved.

8

ボックスをWebブラウザで確認してみよう

n Webブラウザの開発者ツール(デベロッパーツール)を使う
n サイトを表⽰した状態でF12キーを押すと起動© LPI-Japan all rights reserved.

9

開発者ツールの基本的な使い⽅

n 「Elements」タブからHTMLとCSSを確認できる
 ⼀時的な編集も可能
n Chromeでは、確認したいパーツを右クリック →「検証」で、対応する要素を選択した状態にできる
 要素選択モードボタンを使っても同様に選択可能© LPI-Japan all rights reserved.

10確認結果例n ⽔⾊で選択された<li class=“globalMenuList”>...が、⽔⾊の四⾓であるボックスに対応© LPI-Japan all rights reserved.

11

⼩まとめ

n ボックスは、Webブラウザが、HTMLの要素を⻑⽅形の箱として配置したもの
n Webブラウザの開発者ツールで視覚的に確認できる© LPI-Japan all rights reserved.

12

CSSでのボックス操作© LPI-Japan all rights reserved.

13

ボックスを構成するもの

n ボックスは以下4つで構成されているコンテンツ領域
パディング
ボーダー
マージン
Chrome開発者ツールに色を合わせてます

コンテンツが表示される領域
ボーダー内側の余白
ボックスの境界
ボーダー外側の余白(外の余白なので大きさに含まない)
マージン
パディング
コンテンツ領域

ボーダー© LPI-Japan all rights reserved.

14

ボックス構成要素をCSSで操作

n ボックス構成要素のサイズは以下のプロパティで指定可能
コンテンツ領域
パディング
ボーダー
マージン

width(幅), height(高さ)padding
border(ショートハンド), border-widthmargin
マージン
パディング
コンテンツ領域

ボーダー© LPI-Japan all rights reserved.

15

CSSの例n boxクラスを以下のボックスにする コンテンツ領域の幅100px、パディング16px、ボーダーは幅8pxの⿊い直線、マージン16px
CSS.box {
width: 100px;
padding: 16px;
border: 8px solid #000;
margin: 16px;}© LPI-Japan all rights reserved.

16

[おすすめ] CodePenでHTMLとCSSを書いてみる

n ブラウザ上でHTML, CSS, JavaScriptを書いてリアルタイムで確認できるCodePenが便利 https://codepen.io/
n 左上の「Start Coding」からコードを書く画⾯にいける
n ユーザ登録すると作成したコードを残せる© LPI-Japan all rights reserved.

17

試しにCodePenで書いてみる© LPI-Japan all rights reserved.

18

[問題]ボックスの⼤きさn 以下のCSSが指定されたボックスの横幅は︖.box {
width: 100px;
padding: 16px;
border: 8px solid #000;
margin: 16px;}

右の1〜4から選択してください

1.
2.
3.
4.

100px
132px
148px
180px
© LPI-Japan all rights reserved.

19

[答え]ボックスの⼤きさn ボックスの横幅はコンテンツ領域+パディング+ボーダー
 コンテンツ領域の幅: 100px
 パディングの幅: 16px * 2 = 32px
 ボーダーの幅: 8px * 2 = 16px
上記の計: 100px + 32px + 16px = 148px

答え:148px© LPI-Japan all rights reserved.

20直感的ではないwidthとheightn ボックスの幅は、width+padding+bordern 直感的には、widthがそのままボックスの幅になってほしい レイアウトを考えるときにいちいち計算するのは⾯倒 heightにおいても同様
n この要望に答えるべく、サイズの算出⽅法を変更するCSSプロパ
ティ box-sizing が登場© LPI-Japan all rights reserved.

21

box-sizingプロパティ

n box-sizingプロパティで、要素全体の幅と⾼さの算出⽅法を変更することができる
n 指定できる値は以下
content-box
border-box

width, heightで指定した値が、コンテンツ領域の幅と高さになる(デフォルト)
width, heightで指定した値が、コンテンツ領域+パディング+ボーダーを含んだボックスの幅と高さになる© LPI-Japan all rights reserved.

22

CSSの例n さきほどのboxクラスにbox-sizing: border-boxを追加
 ボックスの幅はwidthで指定した100pxになる
CSS.box {box-sizing: border-box;
width: 100px;
padding: 16px;
border: 8px solid #000;
margin: 16px;}© LPI-Japan all rights reserved.

23

[問題]コンテンツ領域の⼤きさn 以下のCSSが指定されたボックスのコンテンツ領域幅は︖.box {
box-sizing: border-box;
width: 100px;
padding: 16px;
border: 8px solid #000;
margin: 16px;}

右の1〜4から選択してください

1.
2.
3.
4.

100px
68px
52px
20px
© LPI-Japan all rights reserved.

24

[答え]コンテンツ領域の⼤きさn box-sizing: border-boxなので、ボックスの横幅はwidthで指定された100pxで、コンテンツ領域はこの100pxからパディングとボーダー分を除いたもの
 パディングの幅: 16px * 2 = 32px
 ボーダーの幅: 8px * 2 = 16px
上記から: 100px - 32px - 16px = 52px

答え:52px© LPI-Japan all rights reserved.

25

⼩まとめ

n ボックスは「コンテンツ領域」「パディング」「ボーダー」「マージン」の4つから構成される
 サイズ計算にマージンは含まない
n CSSでのサイズ指定はwidth,heightと、paddingと、borderと、marginを使う
n box-sizingプロパティでサイズの算出⽅法を変えられる© LPI-Japan all rights reserved.

26

ボックスタイプ© LPI-Japan all rights reserved.

27

CSSにおけるボックスタイプ

n CSSにおけるボックスタイプには2種類ある
ブロック

••
•
•
•

ボックスは横に伸び、可能な限りスペースを埋める
ボックスが新しい行を作る
widthとheightでサイズ指定可能
コンテンツを入れる枠となるイメージ(例: p要素)
中にブロックとインラインを入れられる

インライン•••••

コンテンツによりサイズが決まる
ボックスは新しい行を作らず、横に並ぶwidthとheightでサイズを指定できない
行の一部となるイメージ(例: a要素)
中にはインラインしか入れられない© LPI-Japan all rights reserved.

28

ブロックとインラインのイメージ

ブロックブロックです

インライン
インライン

コンテンツ幅で横並び
これもインライン

インライン

ブロックですブロックですブロックです
インライン
これもブロックです

横いっぱいの幅で、要素ごとに新しい行となり、縦に積まれる行の一部となる© LPI-Japan all rights reserved.

29

(余談) ブロックとインラインの扱い

n HTML4.01まで、ブロックかインラインかを要素ごとに指定
n HTML5から、ブロックとインラインは表⽰側の機能ということ
で、要素に指定されなくなった ブロックとインラインはCSSの機能という扱い
n しかし、現在でもWebブラウザのデフォルトCSSでは、要素ごとにブロックとインラインを指定している 参考: MDNのブロックレベル要素とインライン要素© LPI-Japan all rights reserved.

30

⼩まとめ

n ボックスには⼤きく「ブロック」と「インライン」の2つがある
n ブロックはコンテンツを⼊れる枠のイメージ
n インラインは⾏の⼀部のイメージ© LPI-Japan all rights reserved.

31

CSSでのボックスタイプ指定© LPI-Japan all rights reserved.

32

displayプロパティでボックスタイプ指定

n displayプロパティで、ボックスタイプを指定できる
n 値はブロックならblock、インラインならinline
CSS

p {display: inline;}

p要素はデフォルトではブロックだが、インラインに変更できる© LPI-Japan all rights reserved.

33

試しにCodePenで書いてみる© LPI-Japan all rights reserved.

34インラインでもサイズ指定したい…

n インラインではwidth, heightによるサイズ指定ができない
n ブロックのようにサイズ指定できて、インラインのようにレイアウトされるinline-blockがあるCSSa {display: inline-block;width: 200px;height: 100px;}© LPI-Japan all rights reserved.

35

試しにCodePenで書いてみる© LPI-Japan all rights reserved.

36

displayプロパティについて

n displayプロパティの値は、block, inline, inline-block以外にもいろいろあるn 詳細はMDNのdisplayプロパティ解説を参照
n いろいろあるが、要素のレイアウトは上3つが基本となる© LPI-Japan all rights reserved.

37

⼩まとめ

n displayプロパティでブロックやインラインを指定可能
n サイズ指定可能で、かつインラインのようにレイアウトされるinline-blockがある© LPI-Japan all rights reserved.

38

まとめ

n ボックスとは、Webブラウザが、HTMLの要素を⻑⽅形の四⾓として配置したもの
n ボックスはコンテンツ領域、パディング、ボーダー、マージンから構成され、それぞれCSSでサイズを指定できる
n ボックスタイプにはブロックとインラインがある
n CSSでブロックとインラインを指定できる
n ブロックのようにサイズ指定ができ、インラインのようにレイアウトされるinline-blockがある© LPI-Japan all rights reserved.

39

学習に役⽴つ情報・ツールn MDN
 Mozillaが中⼼となって作成するWeb標準ドキュメントで、情報の信頼性はとても⾼い︕ https://developer.mozilla.org/ja/n CodePen Webブラウザ上からHTML, CSSを編集し確認できる https://codepen.io/
n Webブラウザ開発者ツール© LPI-Japan all rights reserved.

40