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

CSSのmin()関数で作るレスポンシブロゴ｜メディアクエリ不要の実装方法

CSS min()関数でレスポンシブロゴを作る

CSSのmin()関数を活用すると、メディアクエリを一切書かずにレスポンシブなロゴを実装できます。min()は、カンマ区切りで渡した複数の値の中から最も小さい値を返す関数です。可変単位（vwなど）と固定単位（pxなど）を組み合わせることで、「画面が狭いときは縮み、一定サイズ以上には拡大しない」という挙動をたった1行で表現できます。

構文

min()関数の基本的な構文は次のとおりです。

セレクタ {
    プロパティ: min(/*値1*/, /*値2*/);
}

サンプル1：高さにmin()を指定する

以下の例では、ロゴ画像のheightにmin(40vw, 384px)を指定しています。スマートフォンなどの狭い画面ではビューポート幅の40%に合わせて縮小され、大きな画面では384pxを超えないため、レイアウトが崩れる心配がありません。

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                float: left;
                height: min(40vw, 384px);
                margin: 3%;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="https://images.unsplash.com/photo-1610672777263-9bab3d7947f0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=384&ixlib=rb-1.2.1&q=80&w=384" alt="bride-logo" />
            <h3>Responsive LOGO!</h3>
            <p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est, sit amet aliquam justo metus eu est. Praesent eleifend sodales orci, vel ornare sapien porta id. Pellentesque ipsum sem, aliquam vitae venenatis quis, lobortis vitae est. Proin a semper lectus. Nam rhoncus ipsum quis nisl porta pretium. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
            <p>
                Vivamus quis velit diam. Curabitur tempus diam nec enim tincidunt posuere. Nulla nec nunc in dui aliquam congue. Nulla commodo tincidunt iaculis. Nulla egestas odio et arcu elementum euismod.
            </p>
        </div>
    </body>
</html>

表示結果は以下のようになります。

CSSのmin()関数で作るレスポンシブロゴ｜メディアクエリ不要の実装方法

CSSのmin()関数で作るレスポンシブロゴ｜メディアクエリ不要の実装方法

サンプル2：幅にmin()を指定する

続いて、widthにmin(45vw, 512px)を適用した例です。画像はコンテナ幅の45%を基準にしつつ、最大512pxに収まるよう自動調整されます。あわせて、ボックスには緑色の内側の影（inset box-shadow）を設定し、ロゴを際立たせています。

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                margin: 2%;
                float: left;
                box-shadow: inset 0 0 22px green;
            }
            img {
                width: min(45vw, 512px);
                margin: 3%;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="https://images.unsplash.com/photo-1611589694870-377ee3903be0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=512&ixlib=rb-1.2.1&q=80&w=512" alt="home" />
        </div>
        <h3>Another Responsive LOGO!</h3>
        <p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est, sit amet aliquam justo metus eu est. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
    </body>
</html>

表示結果は以下のようになります。

CSSのmin()関数で作るレスポンシブロゴ｜メディアクエリ不要の実装方法

CSSのmin()関数で作るレスポンシブロゴ｜メディアクエリ不要の実装方法

まとめ

min()関数を使えば、メディアクエリを追加することなく、ロゴや画像をさまざまな画面サイズへ自然に対応させられます。同様にmax()関数やclamp()関数を組み合わせると、下限・上限・推奨値を柔軟に制御でき、より洗練されたレスポンシブデザインが実現できます。ぜひ日常のコーディングに取り入れてみてください。

  1. CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法

    Webサイトに掲載する「お客様の声（テスティモニアル）」は、信頼性を高めるための重要な要素です。CSSを活用すれば、デスクトップでもスマートフォンでも見やすい、レスポンシブなデザインを簡単に実現できます。 この記事では、メディアクエリとfloatを使って、画面幅に応じてレイアウトが自動的に切り替わるテスティモニアルカードの作り方を解説します。 実装のポイント 基本レイアウト： プロフィール画像を float: left; で左に回り込みさせ、名前とコメントを右側に配置します。 円形画像： border-radius: 50%; を指定することで、画像を丸く表示できます。 float の解除：

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

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