CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでレスポンシブなフローティング要素を作成する方法【初心者向け解説】

CSSでレスポンシブ対応のフローティング（回り込み）要素を作成するには、float プロパティと @media（メディアクエリ）を組み合わせます。これにより、画面幅に応じて要素の左右配置を動的に切り替えることができます。

サンプルコード

以下のコードは、画面サイズに応じてfloatの方向が入れ替わるレスポンシブなレイアウトの実装例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .floatRight, .floatLeft {
        color: white;
        font-size: 20px;
        padding: 10px;
        font-weight: 500;
    }
    .floatRight {
        background-color: rgb(0, 2, 95);
        float: right;
    }
    .floatLeft {
        background-color: rgb(85, 0, 74);
        float: left;
    }
    @media (max-width: 768px) {
        .floatRight {
            float: left;
        }
        .floatLeft {
            float: right;
        }
    }
</style>
</head>
<body>
<h1>Responsive Float Example</h1>
<h2>The floats will swap their position on smaller screens</h2>
<div class="clearfix">
<div class="floatRight">Float Right &gt;</div>
<div class="floatLeft">Float Left &lt;</div>
<br />
</div>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような出力になります。

CSSでレスポンシブなフローティング要素を作成する方法【初心者向け解説】

ウィンドウ幅を768px以下に縮小すると、メディアクエリが適用され、左右のfloat要素の位置が次のように入れ替わります。

CSSでレスポンシブなフローティング要素を作成する方法【初心者向け解説】

ポイント解説

  • floatプロパティ： 要素を左（left）または右（right）に寄せて配置するためのプロパティです。テキストや他の要素はその周りに回り込みます。
  • @media（メディアクエリ）： 画面の最大幅が768px以下の場合にのみスタイルを上書きする仕組みです。タブレットやスマートフォンなど、小さな画面での表示に最適化できます。
  • viewport設定： モバイルデバイスで正しくレスポンシブ表示させるために、metaタグでのviewport指定は必須です。

このように、floatとメディアクエリを組み合わせるだけで、追加のJavaScriptを使わずにCSSのみで柔軟なレスポンシブレイアウトを実現できます。

  1. CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】

    CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <

  2. CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブなカラムカードを簡単に作成できます。本記事では、floatとcalc()、そしてメディアクエリを組み合わせた基本的な実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 レスポンシブカラムカードの仕組み この手法のポイントは、主に以下の3つです。 calc(25% - 20px)：4枚のカードを横並びにするため、各カードの幅を「全体の25%からマージン分を引いた値」として計算しています。 float: left：カードを左に回り込ませることで、横一列に並べています。 @mediaクエリ：画面幅が