【HTML/CSS入門講座】7章.レスポンシブなサイトにしよう

【HTML/CSS入門講座】は全8章から構成される、初心者向けのJava学習コンテンツです。1章から8章まで学習して頂くことでHTML/CSSの基礎を学習することができます。

今回は、サイトをレスポンシブなサイトにしていきます。

レスポンシブとは、ウェブサイトが、デスクトップ、タブレット、スマートフォンなど異なるデバイスや画面サイズに対して適切に表示され、利用されることを意味します。レスポンシブなサイトにするために、CSSに設定を追記します。

サンプル画像とソースコード
ソースコードの解説

サンプル画像とソースコード

まずは、CSSを書いていない場合、画面幅がどのようになるか確認します。以下、サンプル画像です。

サイドメニューが押しつぶされていることが分かります。
次に、CSSを適用した画像です。

画面の幅が一定値より狭くなると、写真の下にサイドメニューが移動するようになっています。

以下、CSS

@media (max-width: 600px) {
    .page-title {
        font-size: 2.5rem;
    }

    .header {
        flex-direction: column;
        align-items: center;
    }

    /* ヘッダー */
    .main-nav {
        font-size: 1rem;
        margin-top: 10px;
    }

    .main-nav li {
        margin:  0 20px;
    }

    /* ホーム */
    .home-content {
        margin-top: 20px;
    }

    /* ギャラリー */
    .gallery-contents {
        flex-direction: column;
        align-items: center;
        margin-right: 35px;
    }

    .grid {
        width: 100%;
    }

    aside {
        width: 100%;
        margin-left: 35px;
    }

    aside li {
        margin-right: 40px;
    }

    #gallery-header .page-title {
        margin-top: 10px;
    } 
}

ソースコードの解説

【CSS】@media

@media (max-width: 600px) {}

これは、画面幅が600px以下の時に{}内の設定を適用するという意味です。

レスポンシブ対応をする時は、CSSで@mediaを使い、その中に適用したいCSSを書いていきます。

【CSS】flex-direction

.header {
    flex-direction: column;
    align-items: center;
}

.gallery-contents {
    flex-direction: column;
    align-items: center;
    margin-right: 35px;
}

これは、.header{}と.gallery-contents{}の2か所で使用されています。
子要素を縦に並べるという設定です。

冒頭の画像では、ギャラリーの写真とサイドメニューが横並びになっていましたが、.gallery-contents{}では、それを縦並びにしています。

またヘッダー部分は、.header{}で、メインメニューを縦並びにしています。