CodeGym /コース /Frontend SELF JA /フローティング要素

フローティング要素

Frontend SELF JA

レベル 22 , レッスン 1

使用可能

7.1 floatプロパティ

floatとclearプロパティを使ったフローティング要素は、ウェブデザインで複雑なレイアウトを作るための最初の手法の一つだったんだよね。最近の方法、例えばFlexboxとかGridがよく使われてるけど、floatやclearを使う知識は今でも古いプロジェクトと関わるときとか、CSSの基本を理解するために重要だと思うよ。

floatプロパティ

floatプロパティは、要素を左や右に「浮かせて」、テキストや他の要素に回り込ませることができるんだ。これが特にカラムを持ったレイアウトや、画像をテキストで回り込ませるようなときに便利だよ。

シンタックス:

    
      .element {
        float: left; /* または right */
      }

floatプロパティの値:

left: 要素が左に浮かび、次の要素は右に回り込む
right: 要素が右に浮かび、次の要素は左に回り込む
none: デフォルト値、要素は浮かばないよ
inherit: 親要素の値を継承する

floatの使用例:

CSS

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }

HTML

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="content">
        <p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
      </div>

7.2 clearプロパティ

clearプロパティはフローティング要素の回り込みを制御するために使われるよ。特定の側からの回り込みを防ぐことができるんだ。

シンタックス:

    
      .element {
        clear: left; /* または right */
      }

clearプロパティの値:

left: 要素が左で回り込まれない
right: 要素が右で回り込まれない
both: 要素が左右どちらでも回り込まれない
none: デフォルト値、要素は両側で回り込まれる

clearの使用例:

CSS

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .clear {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }

HTML

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="clear">Cleared Element</div>
      <div class="content">
        <p>This content will not wrap around the floated elements because of the cleared element above.</p>
      </div>

"clearfix"テクニックの例:

CSS

    
      .container::after {
        content: "";
        display: table;
        clear: both;
      }

HTML

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
      </div>

7.3 floatを使う利点と欠点

利点

使いやすさ:
- floatを使って簡単なレイアウトを簡単に作れる
ブラウザの広い対応:
- 全ての最新のブラウザ、古いバージョンも含めてfloatの対応があるよ
レイアウトの柔軟性:
- 画像をテキストで回り込ませるレイアウトや複数のレイアウトを作ることができる

欠点

複雑なレイアウトの管理の難しさ:
- floatは、特に縦の配置が必要なときに複雑なレイアウトで問題を引き起こすかも
親要素の高さの問題:
- 親要素が「崩れる」ことがある。全ての子要素が浮いているとき。これにはclearfixなどのテクニックを使って直す必要がある
時代遅れの可能性:
- 最近の方法、FlexboxやGridみたいなものは、もっと強力で柔軟なレイアウト作成ができるよ

floatとclearを使ったレイアウト作成の例

floatとclearを使って二列レイアウトを作ってみるよ。

この例では、サイドバー(.sidebar)とメインコンテンツ(.main)をもつ二列レイアウトを作ってるんだ。 .sidebarと.main要素は左に浮かんでいて、.footer要素はclear: both;で回り込みを防いでいるよ。

CSS

    
      .container {
        width: 100%;
      }

      .sidebar {
        float: left;
        width: 25%;
        background-color: lightblue;
        padding: 10px;
      }

      .main {
        float: left;
        width: 75%;
        background-color: lightgreen;
        padding: 10px;
      }

      .footer {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
        text-align: center;
      }

HTML

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer Content</div>
      </div>

floatとclearを使うことは、もっと最近の方法が登場したとしても、ウェブ開発者のツールボックスで重要だよね。古いプロジェクトをサポートしたり更新したりするのにも役立つし、簡単なレイアウトを作るのにも使える。最近の方法、例えばFlexboxやGridは、もっと複雑でレスポンシブなレイアウトを作るのに適しているけど、floatとclearの知識はまだ現役だよ！

前へ前のレッスン

次へ次のレッスン

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION