メディアクエリーの実践

📌学習内容

📖 メニューボタン実習

「X軸整列」メニューボタンを移動バージョンのY軸に整列させる
•PCのデフォルトバージョンの設定

        .media-menu {
            list-style: none;
            margin: 0;
            padding: 0;

            display: flex;
            justify-content: space-between;
            align-items: center;

            width: 700px;
            background-color: black;
        }

        .media-menu a {
            color: black;
            text-decoration: none;
        }

        .media-menu li {
            width: 150px;
            background-color: yellow;
            border: solid 5px red;
            padding: 5px 15px;
            text-align: center;
        }

•アプリケーションメディアクエリー

        @media (min-width: 320px) and (max-width: 767px) {
            .media-menu {
                flex-direction: column;
                width: 190px;
                align-items: flex-start;
            }

            .media-menu li {
                margin-bottom: 10px;
            }

            .media-menu li:last-child {
                margin-bottom: 0;
            }
        }

📖 HELBAKタイトルエリア練習

•特長
-headerレイアウトはPCおよびモバイルデバイスとは異なります
-PCバージョンでheader固定

•header標準
📎html

        <header class="intro">
            <h1>Logo</h1>
            <nav>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </nav>
        </header>

        <main role="main"> <!-- 익스플로러 호환을 위해 role="main" 꼭 -->
            <h1>Hello World</h1>
        </main>

📎CSS

        .intro {
            width: 100%;
            height: 80px;
            background-color: #ffffff;
        }

        .intro h1 {
            width: 50%;
            height: 80px;
            background-color: black;
        }

        .intro nav {
            width: 50%;	
            height: 80px;
            background-color: yellow;
        }

        .intro nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        main {
            width: 100%;
            height: 2000px;
            background-color: lightgray;
        }    

•li x軸を並べて色を入れ替える

        .intro nav ul {
            display: flex;
        }

        .intro nav ul li {
            width: 33.3333%;
            height: 80px;
        }

        .intro nav ul li:nth-child(1) {
            background-color: lightpink;
        }

        .intro nav ul li:nth-child(2) {
            background-color: skyblue;
        }

        .intro nav ul li:nth-child(3) {
            background-color: yellowgreen;
        }

•LOGO領域とメニュー領域の分離

        .intro {
            display: flex;
        }

•固定header

        .intro {
            position: fixed;
        }

        main {
            padding-top: 80px;  
            /*3차원인 .intro 뒤로 2차원 main이 숨겨지기 때문에 padding 적용*/
        }

•モバイルバージョンの使用

        @media (min-width: 320px) and (max-width: 767px) {
            .intro {
                flex-direction: column;
                height: 160px;
            }

            .intro h1 {
                width: 100%;
            }

            .intro nav {
                width: 100%;
            }
        }

•モバイルバージョンからのheaderフリーズ解除

        @media (min-width: 320px) and (max-width: 767px) {
            .intro {
                position: static;
            }

            main {
                padding-top: 0;
            }

📖 メディアクエリーレイアウトの変更の実践

•PCバージョン:画像レイアウト3 x 2

📎html

        <div class="container">
            <div class="column">
                <img src="https://via.placeholder.com/250x150">
                <div class="image-info">
                    <h2>Title</h2>
                </div>
            </div>
        </div>

📎CSS

        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            width: 1140px;
            margin: 0 auto;
            background-color: lightpink;
        }

        .column {
            width: 355px;
            background-color: white;
            border: solid 2px red;
            margin-bottom: 10px;
        }

        .column:nth-child(4),
        .column:nth-child(5),
        .column:nth-child(6) {
            margin-bottom: 0;
        }

        .column img {
            width: 100%;
            vertical-align: middle; /*img의 기본 마진을 없애줌*/
        }

•テキスト領域への設計の適用

        .image-info {
            padding: 20px 0;
            text-align: center;
        }

        .image-info h2 {
            margin: 0;
        }

•メディア照会-タブレット版画像レイアウト2 x 3

        @media (min-width: 540px) and (max-width: 720px) {
            .container {
                width: 720px;
            }
        }

•第4、5、および6地域の利益値0のリリース

        @media (min-width: 540px) and (max-width: 720px) {
            .column:nth-child(4) {
                margin-bottom: 10px;
            }
        }

•メディアクエリー-バージョン画像レイアウト1 x 6を移動

        @media (min-width: 320px) and (max-width: 539px) {
            .container {
                width: 100%;
            }

            .column {
                width: 100%;
            }

            .column:nth-child(4),
            .column:nth-child(5) {
                margin-bottom: 10px;
            }
        }

両側空白期間

        @media (min-width: 320px) and (max-width: 539px) {
            .container {
                box-sizing: border-box;
                width: 100%;

                padding: 0 20px;
            }

📖 メディアクエリを適用する3つの方法

(1)上記のようにCSSファイルに@mediaを適用する
(2)モバイル版CSSの個別作成、適用、管理

(3)headにstyleタグを適用する

📌難点

幸いたいしたことはなかった

📌に感銘を与える

実習の過程で、前に学んだ概念を総合的に運用したことを感じました.また,講師が以前に与えられた属性値をなぜ修正したり削除したりしたのかを説明すると,苦労せずに理解することができ,彼は喜んでいる.😊ははは