02 レスポンシブホームページ基本講座レスポンシブデザインをもっと効率的に

2020年11月5日2024年12月29日

URLをコピーしました！

レスポンシブデザインの課題

レスポンシブデザインは、異なるデバイスに適応する柔軟なウェブデザインを実現します。しかし、実際に構築する際には以下のような課題に直面することがあります

ブレイクポイントが多すぎる
デバイスごとに細かくブレイクポイントを設定すると、CSSが煩雑になり管理が困難になる。
コードの重複
同じスタイルが複数箇所に繰り返し記述され、ファイルが肥大化する。
保守性の低下
デザイン変更時に影響範囲を確認しづらく、修正に手間がかかる。

これらの問題を解決するために、CSSの効率的な管理方法を学びましょう。

効率的なCSS管理の基本戦略

モバイルファーストの考え方を採用する

モバイルファーストは、デフォルトスタイルをモバイル向けに設定し、大きな画面に向けてスタイルを追加していく設計手法です。デフォルトで軽量なスタイルが適用され、追加部分を必要最小限に抑えられます。

/* モバイル用のデフォルトスタイル */
body {
    font-size: 14px;
    margin: 0;
}

/* タブレット以上の画面向け */
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* デスクトップ以上の画面向け */
@media (min-width: 1200px) {
    body {
        font-size: 18px;
    }
}

CSSカスタムプロパティ（変数）を活用する

カスタムプロパティを使うと、テーマカラーやフォントサイズなどの値を一元管理できます。カラースキームやサイズ変更時に、1箇所を修正するだけで全体に反映されます。

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --font-size-small: 14px;
    --font-size-large: 18px;
}

body {
    font-size: var(--font-size-small);
    color: var(--primary-color);
}

@media (min-width: 1200px) {
    body {
        font-size: var(--font-size-large);
    }
}

CSSカスタムプロパティ（変数）とは？

CSSカスタムプロパティ（変数）は、CSSで繰り返し使う値（色、フォントサイズなど）を1箇所で管理できる機能です。変更が必要な場合でも、変数の値を変更するだけで、すべての適用箇所に反映されます。変数は:rootセレクタに定義します。:rootはHTML全体に適用される特殊なセレクタです。var(--変数名)で呼び出します。

/* 定義 */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --font-size: 16px;
}

/* 使用 */
body {
    color: var(--primary-color);
    font-size: var(--font-size);
}
h1 {
    color: var(--secondary-color);
}

FlexboxやCSS Gridを活用する

レスポンシブレイアウトでは、FlexboxやCSS Gridを使うことで効率的かつ直感的に配置を管理できます。コード量が少なく、画面サイズに応じて自動的にレイアウトを調整できます。

/* Flexboxを使ったレスポンシブレイアウト */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.item {
    flex: 1 1 calc(33.333% - 1em);
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 calc(50% - 1em);
    }
}

@media (max-width: 480px) {
    .item {
        flex: 1 1 100%;
    }
}

CSS Gridとは？

CSS Gridは、コンテンツを行と列のグリッド（格子状）に配置するためのレイアウトシステムです。複雑なレイアウトを簡潔に書けます。親要素にdisplay: gridを設定して、グリッドを定義します。**grid-template-columnsとgrid-template-rows**で列幅と行の高さを指定します。下記のサンプルコードにある　repeat(3, 1fr)は、3列を均等に分割する指定で、1frはフラクションユニットで、利用可能なスペースを均等に分割します。これにより3つのコンテンツが等幅で並びます。

/* 親要素にグリッドを設定 */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列、各列が等幅 */
    gap: 10px; /* グリッド間の余白 */
}

/* 子要素のスタイル */
.item {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
}

`calc()`関数とは？

calc()は、数値を動的に計算してCSSプロパティに適用できる関数です。固定値と可変値（パーセントやvwなど）を組み合わせたい場合に便利です。可変値を使った柔軟なレイアウトが可能で、固定幅と動的な幅を組み合わせた設計ができます。

.container {
    width: calc(100% - 50px); /* 親要素の幅から50pxを引いた値 */
    margin: calc(2rem + 10px); /* 2remと10pxを足した値 */
}

`clamp()`で柔軟なスタイルを実現

CSSのclamp()関数を使用すると、レスポンシブデザインにおけるフォントサイズや余白を柔軟に指定できます。ビューポートの幅に応じて動的にサイズを調整し、ブレイクポイントを減らせます。

/* フォントサイズを最小14px、最大20pxの範囲で調整 */
h1 {
    font-size: clamp(14px, 5vw, 20px);
}

clamp()は、最小値、推奨値、最大値の3つを指定して、値を自動的に調整する関数です。レスポンシブタイポグラフィや余白設定に最適です。

clamp(最小値, 推奨値, 最大値)

/* フォントサイズを最小14px、最大24pxに制限 */
h1 {
    font-size: clamp(14px, 5vw, 24px);
}

14px: 最小値。これ以下にはならない。
5vw: 推奨値（ビューポート幅の5%）。
24px: 最大値。これ以上にはならない。

動的な調整が可能で、ブレイクポイントを減らせます。見出しであるタイポグラフィやレイアウトに柔軟性を持たせられます。

効率的なレスポンシブページ例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>複雑なレスポンシブページ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <h1>レスポンシブデザインの実践例</h1>
        <nav class="navigation">
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">サービス</a></li>
                <li><a href="#">ブログ</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    <main class="main-content">
        <section class="featured">
            <h2>特集記事</h2>
            <p>ここには特集記事の内容が入ります。特集コンテンツとして大きく表示されます。</p>
        </section>
        <section class="articles">
            <h2>最新記事</h2>
            <div class="article-list">
                <article>
                    <h3>記事1</h3>
                    <p>記事1の概要がここに入ります。</p>
                </article>
                <article>
                    <h3>記事2</h3>
                    <p>記事2の概要がここに入ります。</p>
                </article>
                <article>
                    <h3>記事3</h3>
                    <p>記事3の概要がここに入ります。</p>
                </article>
            </div>
        </section>
        <aside class="sidebar">
            <h2>サイドバー</h2>
            <p>広告やリンクを表示するエリアです。</p>
        </aside>
    </main>
    <footer class="footer">
        <p>&copy; 2024 Example Company. All rights reserved.</p>
    </footer>
</body>
</html>

/* カスタムプロパティの定義 */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --bg-color: #f8f9fa;
    --text-color: #333;
    --max-width: 1200px;
}

/* ベーススタイル */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
}

.header {
    background-color: var(--primary-color);
    color: white;
    padding: 1em;
    text-align: center;
}

.navigation ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.navigation li {
    margin: 0 1em;
}

.navigation a {
    color: white;
    text-decoration: none;
}

.main-content {
    display: grid;
    grid-template-columns: 1fr; /* モバイルでは1カラム */
    gap: 1em;
    max-width: var(--max-width);
    margin: 1em auto;
    padding: 1em;
}

.featured {
    grid-column: 1; /* モバイルでは1カラムで表示 */
    background-color: var(--primary-color);
    color: white;
    padding: 1em;
    border-radius: 5px;
}

.articles {
    grid-column: 1; /* モバイルでは1カラムで表示 */
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.article-list article {
    background-color: white;
    border: 1px solid #ddd;
    padding: 1em;
    border-radius: 5px;
}

.sidebar {
    grid-column: 1; /* モバイルでは1カラムで表示 */
    background-color: var(--secondary-color);
    color: white;
    padding: 1em;
    border-radius: 5px;
}

.footer {
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    padding: 1em;
}

/* タブレット以上（768px以上） */
@media (min-width: 768px) {
    .main-content {
        grid-template-columns: 2fr 1fr; /* 2カラムレイアウト */
    }

    .featured {
        grid-column: span 2; /* タブレットでは幅いっぱいに表示 */
    }

    .article-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .article-list article {
        flex: 1 1 calc(33.333% - 1em); /* 記事を3等分に */
    }
}

/* デスクトップ以上（1200px以上） */
@media (min-width: 1200px) {
    .main-content {
        grid-template-columns: 3fr 1fr; /* メインコンテンツを広げる */
    }

    .featured {
        font-size: 1.2em; /* 特集記事を目立たせる */
        padding: 2em;
    }

    .sidebar {
        font-size: 0.9em; /* サイドバーを控えめに */
    }
}