• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ by Proglus(プログラス)

プログラミング学習初心者のための情報メディア

You are here: Home / プログラミング入門 / CSSのclearプロパティとは?そもそも必要ないのでは?疑問を徹底解説!

CSSのclearプロパティとは?そもそも必要ないのでは?疑問を徹底解説!

2020-03-31 By プログラミング入門ナビ編集部

Tweet
このエントリーをはてなブックマークに追加
Pocket

目次

  • 1 はじめに
  • 2 フロートレイアウトとは
    • 2.1 フロートレイアウトをしないとき
    • 2.2 フロートレイアウトをするとき
  • 3 clearプロパティとは
  • 4 clearしてもしなくても同じに見える?
    • 4.1 box1とbox2の高さが同じ場合
    • 4.2 box1の方がbox2より高い場合
  • 5 clearの設定は必要
  • 6 まとめ
  • 7 今すぐメルマガ登録!
  • 8 動画でプログラミング入門をしよう

はじめに

CSSで左寄せや右寄せのレイアウトを行いたい時は、floatプロパティを使ったフロートレイアウトが便利ですよね。

これに関連したプロパティの一つに、clearがあります。

フロートレイアウトにおける回り込みを解除するためのものですが、clearをしてもしなくてもレイアウトが変わって見えないことがあり、混乱してしまうケースが多いようです。

ここでは、フロートレイアウトの基本とclearプロパティの使用有無による違いを解説します。

フロートレイアウトとは

まず、フロートレイアウトについておさらいしていきましょう。

CSSではfloatプロパティに適切な値を指定することで左寄せや右寄せを行い、後に続く要素を反対側に回り込ませることができます。これをフロートレイアウトと呼び、例えば左側に画像を掲載して、右側にそのコメントや説明のテキスト文を並べたい時などに便利です。

フロートレイアウトをしないとき

理解のために、まずフロートレイアウトをしない場合の例を見てみましょう。まず、下記のようなHTMLファイルを作成します。

[test.html]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>float test</title>
        <link rel="stylesheet" href="css/no-float.css">
    </head>
    <body>
        <h1>フロートの練習</h1>
        <div id="wrap">
            <div id="box1">BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト</div>
            <div id="box2">BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト</div>
            <div id="box3">BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト</div>
        </div>
    </body>
</html>

次に、上記HTMLファイルと同じ階層に”css”ディレクトリを作成し、その中に下記のようなCSSファイルを作成します。

[no-float.css]

/* no-float.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
}
#box3 {
    background-color: blue;
    color:  white;
}

HTMLファイルをブラウザで見ると下記のようになり、上からbox1・box2・box3の順でレイアウトされます。

フロートの練習(フロートレイアウトをしない場合)

フロートレイアウトをするとき

それでは、CSSでfloatレイアウトの指定をするとどうなるでしょうか。”css”ディレクトリに新たに下記ファイルを作成します。

[float-noclear.css]

/* float-noclear.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
    float:  left;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
    float:  right;
}
#box3 {
    background-color: blue;
    color:  white;
}

box1ではfloat: leftを、box2ではfloat:rightを指定していることに注目してください。これはそれぞれ左寄せ・右寄せを意味し、その後に続く要素を逆側に回り込ませるようレイアウトします。

HTMLファイル(test.html)の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。

<link rel="stylesheet" href="css/float-noclear.css">

下記のように表示されるはずです。box1が左寄せされ、後に続くbox2はbox1の右側に回り込む形で右寄せされ、box3はその逆側である左側に回り込んでいますね。

フロートレイアウトの練習(フロートレイアウト、clearなしの場合)

clearプロパティとは

floatプロパティの関連プロパティとして、clearがあります。

通常、直前の要素がfloatで左寄せもしくは右寄せされている場合、その逆に回り込む形でレイアウトされるのですが、何らかの理由で回り込みを解除したい場合に使用されます。

  • clear: left 左寄せされた要素に対する回り込みを解除する
  • clear: right 右寄せされた要素に対する回り込みを解除する
  • clear: both 左寄せまたは右寄せされた全ての要素に対する回り込みを解除する
  • clear: none 回り込みを解除しない(デフォルト値)

clearしてもしなくても同じに見える?

clearの効果を確認するため、”css”ディレクトリにさらに下記ファイルを作成してみます。21行目、box3でclear:bothが指定されていることに注目してください。

[float.css]

/* float.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
    float:  left;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
    float:  right;
}
#box3 {
    background-color: blue;
    color:  white;
    clear:  both;
}

HTMLファイル(test.html)の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。

<link rel="stylesheet" href="css/float.css">

box1とbox2の高さが同じ場合

ウィンドウ幅によっては、box1とbox2の高さが同じになります。この時、clearを指定しても、表示結果はclearを指定しなかった場合と全く同じです。

[float.cssを指定した場合の表示]

フロートの練習(clearを指定したがbox1とbox2の高さが同じとき)

box1の方がbox2より高い場合

しかし、文字数はbox1の方が多いため、ウィンドウ幅を広くしたり狭くしたりするとbox1の方がbox2より高さが高くなることがあります。

clear有無による違いはこの時明確になります。HTMLファイル(test.html)の6行目で指定するcssファイルを変更してウィンドウサイズを調整してみてください。

[float.cssを指定した場合の表示]

フロートの練習(clearなし、box1がbox2より高いとき)

[float-noclear.cssを指定した場合の表示]

フロートの練習(clearなし、box1がbox2より高いとき)

このように、一見clearの有無によって見え方が同じでも、ウィンドウサイズが変わると見え方は大きく変わります。

このことを意識してclearを明確に指定しないと、意図と異なる表示になることがあるので注意が必要です。

clearの設定は必要

打ち合わせしている手元

上記のケースで、例えばbox1にバラの写真、box2にバラの説明、box3にまた別の花の写真を載せるのであれば、box3からは別の話題になるのでclearして新しい行から始めるべきですね。

また、余白にはwrapで指定した背景を見せたい場合でも、clearなしでは余白が生まれないので背景を表示することができません。

回り込みの解除をしたい場合は、プレビューでの表示に差がなかったとしても必ずclearの設定を行いましょう。

まとめ

エレガントなビジネスウーマン

フロートレイアウトの基本ルールとclearプロパティの使用有無による違いについて解説しました。

clearは指定してもしなくても表示が変わらないので、そもそも必要ないのでは?と思われることも多いですが、どんなサイズで表示されても意図通りのレイアウトとなるように、必要な場合は必ず使用しましょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Tweet
このエントリーをはてなブックマークに追加
Pocket

Filed Under: プログラミング入門 Tagged With: CSS

Primary Sidebar

Proglus(プログラス) 採用情報 FindU

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • VSCodeで画像が表示されない場合の対処法
  • VSCodeの基本~プロジェクトフォルダの設定方法について解説します!
  • Visual Studio Codeのメニューを 日本語化する方法と英語化する方法について解説!
  • Node.jsをmacOSからアンインストールする方法
  • MySQL WorkbenchからMySQLサーバーへの接続時やSQLファイルを取り込み時にエラーが発生した時の対処方法
  • JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る原因と対処方法を紹介!
  • 【Arduino入門】LCD(液晶ディスプレイ)に文字を表示しよう
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MAMP for MacOSによるMySQLのインストール方法

最近の投稿

  • 【SQL】ER図(Entity-relationship Diagram)について解説します!
  • 【MySQL】公式インストーラー(dmg)を使って、MySQLサーバーをmacOSにインストールする方法を解説
  • 【AWS Cloud9】Gitで使用するエディタを再起動してもvimの設定にする方法
  • 【VSCode】アクティビティバーに拡張機能アイコンが表示表示されていない場合の解決方法
  • 【Windows】Gitをインストールする方法についてプログラミング入門者向けに解説します

カテゴリー

  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

AI AWS AWS Cloud9 Cloud9 CodeWing CSS Emmet GCP Git GitHub Heroku HTML JavaScript Linux macOS MySQL MySQL Workbench node.js Nuxt.js Proglus Python Ruby Ruby on Rails SQL Udemy Visual Studio Code vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習 開発環境構築

アーカイブ

  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2023 · programmingnavi.com ・About・プライバシーポリシー