【Chapter5】表示と配置

概要と目標表示やレイアウトに関する
プロパティを学習しよう。

表示に関するプロパティや、レイアウトに必要な配置に関するプロパティを学習しましょう。

今回のゴール

RERUN

表示形式 `display`プロパティ

display(ディスプレイ)は、要素の表示形式を指定するプロパティ。
初期値は「inline」だが、一般的なブラウザは、ブロックレベル要素に分類される要素には、
「block」が、インライン要素に分類される要素には、「inline」が設定されている。

初期値	値の継承	適用対象
`inline`	しない	全要素

主な値
指定できる値	説明
`none`	なし
`block`	ブロックボックスを生成 (ブロックレベル要素と同等)
`inline`	インラインボックスを生成 (置き換えインライン要素を除くインライン要素と同等)
`inline-block`	インラインボックスのような振る舞いのブロックボックスを生成 (置換えインライン要素と同等)
`list-item`	ブロックボックスのような振る舞いで、マーカーを表示するボックスも生成 (`li`要素と同等)
`table`	`table`要素と同じ振る舞いをするブロックボックスを生成 (`table`要素と同等)
`table-row`	表の行として振る舞うボックスを生成 (`tr`要素と同等)
`table-cell`	表のセルとして振る舞うボックスを生成 (`th`要素、`td`要素と同等)

`display`プロパティを使ってみよう。

「css-lessons」 › 「chapter05」 › 「display」フォルダ内の「index.html」をテキストエディタで開く
HTMLの内容を確認

chapter05/display/index.html

<h1>displayの練習</h1>

<ul class="menu">
  <li><a href="#">リスト項目</a></li>
  <li><a href="#">リスト項目</a></li>
  <li><a href="#">リスト項目</a></li>
  <li><a href="#">リスト項目</a></li>
</ul>

<p><a href="#" class="button">ボタン</a></p>

「css-lessons」 › 「chapter05」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
class名「menu」の li 要素をインラインに、class名「button」をブロックに変更

chapter05/display/style.css

.menu li {
  display: inline;
}

.button {
  display: block;
  background-color: #00BCD4;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  width: 320px;
  padding: 1em;
  margin: 80px auto 0;
}

.button:hover {
  background-color: #4DD0E1;
}

上書き保存
「css-lessons」 › 「chapter05」› 「display」フォルダ内の「index.html」をダブルクリック。
表示形式が変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

ポジション `position`プロパティ

position(ポジション)は、要素の位置を決めるための規則を指定するプロパティ。
要素を配置する位置は、「top」、「bottom」、「left」、「right」プロパティで指定する。

初期値	値の継承	適用対象
`static`	しない	全要素

主な値
指定できる値	説明
`static`	通常配置 (「`top`」、「`bottom`」、「`left`」、「`right`」は無効)
`relative`	相対配置 (通常配置される位置から「`top`」、「`bottom`」、「`left`」、「`right`」で指定した分移動する)
`absolute`	絶対配置 (祖先要素に「`static`」以外の位置指定がされている要素がある場合はその要素を、位置指定されている要素がなければ、`html`要素を基準に移動する)
`fixed`	固定配置 (`html`要素を基準に移動し、スクロールしても動かないように固定される)

`position`プロパティを使ってみよう。

「css-lessons」 › 「chapter05」 › 「position」フォルダ内の「index.html」をテキストエディタで開く
HTMLの内容を確認

chapter05/position/index.html

<h1>positionの練習</h1>

<section class="card">
  <div class="card-body">
    <h2>TKG1</h2>
    <p class="card-badge">おすすめ</p>
    <p>positionを使って、たまごかけご飯の写真と見出しを入れ替える。</p>
  </div>

  <div class="card-image">
    <p><img src="images/tkg.jpg" alt="" width="320" height="213" alt="おいしそうなたまごかけご飯"></p>
  </div>
</section>

<section class="card">
  <div class="card-body">
    <h2>TKG2</h2>
    <p class="card-badge">おすすめ</p>
    <p>positionを使って、たまごかけご飯の写真と見出しを入れ替える。</p>
  </div>

  <div class="card-image">
    <p><img src="images/tkg.jpg" alt="" width="320" height="213" alt="おいしそうなたまごかけご飯"></p>
  </div>
</section>

<section class="card">
  <div class="card-body">
    <h2>TKG3</h2>
    <p class="card-badge">おすすめ</p>
    <p>positionを使って、たまごかけご飯の写真と見出しを入れ替える。</p>
  </div>

  <div class="card-image">
    <p><img src="images/tkg.jpg" alt="" width="320" height="213" alt="おいしそうなたまごかけご飯"></p>
  </div>
</section>

<p><a href="#top" class="button-fixed">TOPへ</a></p>

「css-lessons」 › 「chapter05」 › 「position」フォルダ内の「style.css」をテキストエディタで開く
class名「card」内の写真と文章を入れ替えて、class名「button」をウインドウの右下に固定させる

chapter05/position/style.css

body {
  background-color: #eee;
}
h2, p {
  margin: 0;
}

.card {
  position: relative;
  width: 320px;
  padding-top: 213px;
  background-color: #fff;
  margin-top: 40px;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.card-body {
  padding: 16px;
}

.button-fixed {
  position: fixed;
  bottom: 40px;
  right: 40px;
}

上書き保存
「css-lessons」 › 「chapter05」› 「position」フォルダ内の「index.html」をダブルクリック。
位置が変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

重ね順 `z-index`プロパティ

z-index(ゼットインデックス)は、positonで位置指定されてる要素の重ね順を指定するプロパティ。
z-indexが指定されていない場合は「auto」となり、HTMLで後に記述されている要素ほど、
上に重なって表示される。z-indexを指定すると、その数値が大きほど上に重なって表示されるように変更できる。

初期値	値の継承	適用対象
`auto`	しない	位置指定されている要素

主な値
指定できる値	説明
`auto`	`z-index`の指定がない状態と同様で、HTML内で後ろにある要素ほど上に重なる
整数値	数字が大きければ大きほど上に重ねて表示する (負の数値も指定可能)

`z-index`プロパティを使ってみよう。

「css-lessons」 › 「chapter05」 › 「position」フォルダ内の「style.css」をテキストエディタで開く
class名「card-badge」にpositionを指定し、重ね順を変更

chapter05/position/style.css

body {
  background-color: #eee;
}
h2, p {
  margin: 0;
}

.card {
  position: relative;
  width: 320px;
  padding-top: 213px;
  background-color: #fff;
  margin-top: 40px;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.card-body {
  padding: 16px;
}

.card-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: inline-block;
  background-color: #F44336;
  color: #fff;
  font-size: .75em;
  padding: 4px;
}

.button-fixed {
  position: fixed;
  bottom: 40px;
  right: 40px;
}

上書き保存
「css-lessons」 › 「chapter05」› 「position」フォルダ内の「index.html」をダブルクリック。
重ね順が変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

回り込み `float`プロパティ

float(フロート)は、要素の回り込みを指定するプロパティ。
要素のボックスを浮動化し、左まはた右に寄せ、その反対側に後続の内容を流し込ませる。
floatした要素に「width」の指定がない場合、内容に合わせた縮んだ幅になる。

初期値	値の継承	適用対象
`none`	しない	全要素 (絶対位置決めの要素を除く)

主な値
指定できる値	説明
`none`	フロートしない
`left`	左にフロートし、右側に後続の要素が回り込む
`right`	右にフロートし、左側に後続の要素が回り込む

`float`プロパティを使ってみよう。

「css-lessons」 › 「chapter05」 › 「float」フォルダ内の「index.html」をテキストエディタで開く
HTMLの内容を確認

chapter05/float/index.html

<h1>floatの練習</h1>

<section class="content">
  <h2>TKG1</h2>
  <p class="content-left"><img src="images/tkg.jpg" alt="" width="320" height="213" alt="おいしそうなたまごかけご飯"></p>
  <p>floatを使って、たまごかけご飯の写真を空中に浮かせれば、この文章が写真を避けるように回り込む。</p>
</section>

<section class="content">
  <h2>TKG2</h2>
  <p class="content-right"><img src="images/tkg.jpg" alt="" width="320" height="213" alt="おいしそうなたまごかけご飯"></p>
  <p>floatを使って、たまごかけご飯の写真を空中に浮かせれば、この文章が写真を避けるように回り込む。</p>
</section>

「css-lessons」 › 「chapter05」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
class名「content」内の写真にfloatを指定

chapter05/float/style.css

h2, p {
  margin: 0;
}
.content {
  width: 690px;
}

.content-left {
  float: left;
  margin-right: 16px;
  margin-bottom: 16px;
}

.content-right {
  float: right;
  margin-left: 16px;
  margin-bottom: 16px;
}

上書き保存
「css-lessons」 › 「chapter05」› 「float」フォルダ内の「index.html」をダブルクリック。
回り込みされたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

回り込みの解除 `clear`プロパティ

clear(クリア)は、要素のfloatによる回り込みを解除するプロパティ。
clearを使うことで、要素が回り込まなくなる。

初期値	値の継承	適用対象
`none`	しない	ブロック

主な値
指定できる値	説明
`none`	`float`を解除しない
`left`	`float: left` を解除する
`right`	`float: right` を解除する
`both`	両方解除する

`claer`プロパティを使ってみよう。

「css-lessons」 › 「chapter05」 › 「float」フォルダ内の「style.css」をテキストエディタで開く
class名「content」の回り込みを解除する

chapter05/float/style.css

h2, p {
  margin: 0;
}
.content {
  width: 690px;
  clear: both;
}

.content-left {
  float: left;
  margin-right: 16px;
  margin-bottom: 16px;
}

.content-right {
  float: right;
  margin-left: 16px;
  margin-bottom: 16px;
}

上書き保存
「css-lessons」 › 「chapter05」› 「float」フォルダ内の「index.html」をダブルクリック。
回り込みが解除されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

オーバーフロー `overflow`プロパティ

overflow(オーバーフロー)は、ボックスに指定された幅や高さを超えた内容の表示方法を指定するプロパティ。

初期値	値の継承	適用対象
`visible`	しない	ブロック (CSS3では、インラインボックスも対象)

主な値
指定できる値	説明
`visible`	はみ出して表示
`hidden`	はみ出した部分を非表示
`scroll`	常時スクロールバーを付ける
`auto`	内容がはみ出した時だけ、スクロールバーを付ける

`overflow`プロパティを使ってみよう。

「css-lessons」 › 「chapter05」 › 「overflow」フォルダ内の「index.html」をテキストエディタで開く
HTMLの内容を確認

chapter05/overflow/index.html

<h1>overflowの練習</h1>

<section>
  <h2>ニュース</h2>
  <dl class="news">
    <dt><time datetime="2018-04-30">2018.04.30</time></dt>
    <dd>こんなことがありました。</dd>
    <dt><time datetime="2018-04-28">2018.04.28</time></dt>
    <dd>こんなことがありました。</dd>
    <dt><time datetime="2018-04-25">2018.04.25</time></dt>
    <dd>こんなことがありました。</dd>
    <dt><time datetime="2018-04-20">2018.04.20</time></dt>
    <dd>こんなことがありました。</dd>
    <dt><time datetime="2018-04-16">2018.04.16</time></dt>
    <dd>こんなことがありました。</dd>
    <dt><time datetime="2018-04-12">2018.04.12</time></dt>
    <dd>こんなことがありました。</dd>
    <dt><time datetime="2018-04-06">2018.04.06</time></dt>
    <dd>こんなことがありました。</dd>
  </dl>
</section>

「css-lessons」 › 「chapter05」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
class名「news」のオーバーフローした部分をスクロールバーで表示

chapter05/overflow/style.css

.news {
  height: 240px;
  overflow: auto;
  border: 1px solid #ddd;
  padding: 16px;
}

上書き保存
「css-lessons」 › 「chapter05」› 「overflow」フォルダ内の「index.html」をダブルクリック。
スクロールバーが表示されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

基本的なレイアウト CSSで段組みをするには、
`float`が基本。

CSSで段組みをするには様々な方法があるが、
floatによるレイアウトが基本。
基本の配置は、width、float、clear、overflowがあれば出来る。

width … センタリングする要素と、floatする要素に必要
float … 横並びにする要素に必要
claer … floatの後（下）にくる要素に必要
overflow: hidden … floatの親要素に必要

ボックスをセンタリングをしてみよう。

「css-lessons」 › 「chapter05」 › 「layout」フォルダ内の「index.html」をテキストエディタで開く
HTMLの内容を確認

chapter05/layout/index.html

<div id="container">
  <header id="header">
    <h1>基本的なレイアウト</h1>
    <p>ここはヘッダー</p>
  </header>
  <div id="contents">

    <main id="main">
      <h2>メインコンテンツ</h2>
      <p>ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。ここはメインコンテンツ。</p>
    </main>

    <aside id="side">
      <h2>補足コンテンツ</h2>
      <p>ここは補足コンテンツ。ここは補足コンテンツ。ここは補足コンテンツ。ここは補足コンテンツ。ここは補足コンテンツ。ここは補足コンテンツ。</p>
    </aside>

  </div>
  <!-- /#contents-->

  <footer id="footer">
    <p>ここはフッター</p>
  </footer>
</div>
<!-- /#container-->

「css-lessons」 › 「chapter05」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
id名「container」に幅を指定し、センタリング

chapter05/layout/style.css

* {
  margin: 0;
  padding: 0;
  font-size: 1em;
}

body {
  background-color: #eee;
}

#container {
  width: 960px;
  margin: 0 auto;
}

#header {
  background-color: #333;
  color: #fff;
}

#contents {
  margin: 30px 0;
}

#main {
  background-color: #fff;
}

#side {
  background-color: #fff;
}

#footer {
  background-color: #333;
  color: #ccc;
  text-align: center;
}

上書き保存
「css-lessons」 › 「chapter05」› 「layout」フォルダ内の「index.html」をダブルクリック。
ボックスがセンタリングされたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

2段組みにしてみよう。

「css-lessons」 › 「chapter05」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
id名「main」と、id名「side」に幅を指定し、floatを指定

chapter05/layout/style.css

* {
  margin: 0;
  padding: 0;
  font-size: 1em;
}

body {
  background-color: #eee;
}

#container {
  width: 960px;
  margin: 0 auto;
}

#header {
  background-color: #333;
  color: #fff;
}

#contents {
  margin: 30px 0;
}

#main {
  width: 690px;
  float: left;
  background-color: #fff;
}

#side {
  width: 240px;
  float: right;
  background-color: #fff;
}

#footer {
  background-color: #333;
  color: #ccc;
  text-align: center;
}

上書き保存
「css-lessons」 › 「chapter05」› 「layout」フォルダ内の「index.html」をダブルクリック。
2段組みになったかと、
フッターが潜り込んだことを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

回り込みを解除してみよう。

「css-lessons」 › 「chapter05」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
id名「footer」の回り込みを解除する

chapter05/layout/style.css

* {
  margin: 0;
  padding: 0;
  font-size: 1em;
}

body {
  background-color: #eee;
}

#container {
  width: 960px;
  margin: 0 auto;
}

#header {
  background-color: #333;
  color: #fff;
}

#contents {
  margin: 30px 0;
}

#main {
  width: 690px;
  float: left;
  background-color: #fff;
}

#side {
  width: 240px;
  float: right;
  background-color: #fff;
}

#footer {
  clear: both;
  background-color: #333;
  color: #ccc;
  text-align: center;
}

上書き保存
「css-lessons」 › 「chapter05」› 「layout」フォルダ内の「index.html」をダブルクリック。
回り込みが解除されたことと、
#contentsの高さがなくなったことを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

高さを復活させてみよう。

#contentsは、は、要素内が「float」によって空中に浮いたため、
何も挟んでいないボックスとなり、高さが 0px になった。
そこで縮んでしまった、#contentsに、本来の使い方ではないが
「overflow: hidden;」を指定すると、高さが戻ってくる。

「css-lessons」 › 「chapter05」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
id名「contents」の高さを復活させる

chapter05/layout/style.css

* {
  margin: 0;
  padding: 0;
  font-size: 1em;
}

body {
  background-color: #eee;
}

#container {
  width: 960px;
  margin: 0 auto;
}

#header {
  background-color: #333;
  color: #fff;
}

#contents {
  overflow: hidden;
  margin: 30px 0;
}

#main {
  width: 690px;
  float: left;
  background-color: #fff;
}

#side {
  width: 240px;
  float: right;
  background-color: #fff;
}

#footer {
  clear: both;
  background-color: #333;
  color: #ccc;
  text-align: center;
}

上書き保存
「css-lessons」 › 「chapter05」› 「layout」フォルダ内の「index.html」をダブルクリック。
高さが復活したことを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題今回の理解度をチェック。

「chapter05」 › 「training」フォルダ内に「style.css」を作成し、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

chapter05」 › 「training」フォルダ内に新規ファイルを作成して下さい。
- ファイル名： style.css
上記で作成したCSSファイルを、「training」フォルダ内にある「index.html」にリンクして下さい。

全称セレクタに以下のスタイルを設定して下さい。

プロパティ	値
文字のサイズ	`1em`
間隔（上下左右）	`0`
余白（上下左右）	`0`

body要素に以下のスタイルを設定して下さい。

プロパティ	値
文字の書体	「游明朝」なければ、「ヒラギノ明朝 ProN W3」なければ、「HG明朝E」なければ、明朝系
行間	`1.5`
背景画像	「images」フォルダ内の「bg-washi.png」
文字の色	`#333333`

id名「container」に以下のスタイルを設定して下さい。

プロパティ	値
幅	`960px`
間隔（上下）	`0`
間隔（左右）	自動

class名「grid-item」に以下のスタイルを設定して下さい。

プロパティ	値
フロート	`left`
幅	`300px`

class名「grid-item」と隣接している、class名「grid-item」に以下のスタイルを設定して下さい。

プロパティ	値
間隔（左）	`30px`

class名「grid」に以下のスタイルを設定して下さい。

プロパティ	値
間隔（上下）	`30px`
floatによる高さが縮んでしまう対策

id名「footer」に以下のスタイルを設定して下さい。

プロパティ	値
回り込みの解除	`両方`

class名「card」とその中の要素を、完成例を参考にスタイルを設定して下さい。
（余白や文字のサイズが完成例と若干違っていてもOKとする）

解答例

chapter05/training/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>架空温泉 だみい屋</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <header id="header">
      <h1>架空温泉 だみい屋</h1>
    </header>

     <main>
        <div class="grid">

          <section class="grid-item">
            <a class="card">
              <div class="card-body">
                <h2 class="card-title">スタンダード10畳</h2>
                <p class="card-badge">ビジネスにおすすめ</p>
                <p>一番多い部屋数があるスタンダードの10畳のお部屋です。</p>
              </div>
              <div class="card-image">
                <p><img src="images/img-standard.jpg" alt="スタンダード10畳"></p>
              </div>
            </a>
          </section>

          <section class="grid-item">
            <a class="card">
              <div class="card-body">
                <h2 class="card-title">離れ</h2>
                <p class="card-badge">カップルにおすすめ</p>
                <p>プライベートな空間でゆったりできる、家族風呂付きの離れです。</p>
              </div>
              <div class="card-image">
                <p><img src="images/img-hanare.jpg" alt="離れ"></p>
              </div>
            </a>
          </section>

          <section class="grid-item">
            <a class="card">
              <div class="card-body">
                <h2 class="card-title">ドッグラン付き客室</h2>
                <p class="card-badge">ワンちゃんにおすすめ</p>
                <p>ワンちゃんと一緒に楽しめる。ドッグラン付きのお部屋です。</p>
              </div>
              <div class="card-image">
                <p><img src="images/img-dogrun.jpg" alt="ドッグラン付き客室"></p>
              </div>
            </a>
          </section>

        </div>
        <!-- /.grid -->
    </main>

    <footer id="footer">
      <p><small>© 2018 架空温泉 だみい屋.</small></p>
    </footer>

  </div>
  <!-- /.container -->
</body>
</html>

chapter05/training/style.css

* {
  font-size: 1em;
  margin: 0;
  padding: 0;
}

body {
  font: 1em/1.5 游明朝, "ヒラギノ明朝 ProN W3", HG明朝E, serif;
  background-image: url(images/bg-washi.png);
  color: #333;
}

#container {
  width: 960px;
  margin: 0 auto;
}

.grid {
  overflow: hidden;
  margin: 30px 0;
}

.grid-item {
  float: left;
  width: 300px;
}

.grid-item + .grid-item {
  margin-left: 30px;
}

.card {
  display: block;
  position: relative;
  background-color: #fff;
  padding-top: 212px;
}

.card-body {
  padding: 24px;
}

.card-title {
  margin-bottom: .5em;
  font-size: 1.25em;
}

.card-badge {
  display: inline-block;
  position: absolute;
  top: 200px;
  left: 24px;
  color: #fff;
  background-color: #333;
  z-index: 1;
  font-size: .75em;
  padding: 4px;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

#footer {
  clear: both;
}

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ `float`を極めれば、
基本的なレイアウトが出来る。

基本的なレイアウトは、floatを用いて段組みを行う。
まずは、基本的なfloatの使い方を覚える。

横並びになる要素には、floatを指定する
floatの後の要素にはclearを指定する
floatの親要素には、overflow: hiddenを指定する

Chapter05 表示と配置

displayプロパティを使ってみよう。

positionプロパティを使ってみよう。

z-indexプロパティを使ってみよう。

floatプロパティを使ってみよう。

claerプロパティを使ってみよう。

overflowプロパティを使ってみよう。

ボックスをセンタリングをしてみよう。

2段組みにしてみよう。

回り込みを解除してみよう。

高さを復活させてみよう。

`display`プロパティを使ってみよう。

`position`プロパティを使ってみよう。

`z-index`プロパティを使ってみよう。

`float`プロパティを使ってみよう。

`claer`プロパティを使ってみよう。

`overflow`プロパティを使ってみよう。