【プログラミング・Web制作勉強ログ#77】5/22の積み上げ成果

2022年5月23日

今日の積み上げ 163日目成果

#今日の積み上げ 163日目成果

①5/21日報執筆⇒◎
②デザインカンプ中級編(Sass)
　・レスポンシブデザイン⇒mainエリアまで
(その他)
・鍼治療⇒◎
・隙間時間のインプット⇒読書
・断スイーツ(26日目)⇒◎
背中の激痛が鍼のお陰で大改善。やはり首が前に出てるのがいけないみたい。姿勢を意識！
— おかつ🌱開業準備中 (@o_89965328_k) May 22, 2022

＼宣言した内容はこちらです／

本日の学び

レスポンシブデザインは、それぞれの画面で「同じクラスタ名」を指定する

　例えば、ヘッダーのナビゲーションリストがこういうコーディングだったとします。

                <nav class="header-nav">
                    <ul class="nav-list">  //ここの部分
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#service">SERVICE</a></li>
                        <li><a href="#works">WORKS</a></li>
                        <li><a href="#info">NEWS</a></li>
                        <li><a href="#company">COMPANY</a></li>
                        <li><a href="#contact">CONTACT</a></li>
                    </ul>
                </nav>

　ナビゲーションリスト全体を指定する場合、
　①【.header-nav ul 】という「要素を指定するパターン」
　②【.nav-list】という「クラス名（属性）を指定するパターン」
　で効くことが分かりました。
　（みんな知ってるYO！という突っ込みは悪しからず。）

        .header-nav ul {
            display: flex;
            gap: 30px;
            }

        .nav-list {
            display: flex;
            gap: 30px;
            }

　しかし、このクラスタでレスポンシブデザインをしたい場合、PC（パソコン）画面で①【.header-nav ul 】と指定した場合は、SP画面でも同じように、①【.header-nav ul 】と指定しないと効かず。（実質同じものを指す②【.nav-list】と指定しても、PC画面で指定したクラスタ名とリンクしないから…？私のクラス名の書き方が悪いから…？かわからないがこういう結果になった）

　とはいえ、Sassの場合、クラスタ名の中にメディアクエリを記述することができるので（下記参照）、上記の問題は直面することなくコーディングすることができます。

        .header-nav ul {
            display: flex;
            gap: 30px;
            @include media(md) {　　 　　　　//ここの部分
                gap: 10px;
                margin-right: 20px;
            }
            @include media(sp) {
                flex-direction: column;　　 //ここの部分
                gap: 0;
                margin-right: 0;
            }

Sassでのメディアクエリの（私なりの）書き方は、下記記事をご参照。