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

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

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

あわせて読みたい

【プログラミング・Web制作勉強ログ#0】宣言します（９月６日更新：開業しましたので、立ち上げた想いを… こんにちは！こちらのページに、プログラミングを勉強した経緯や、立ち上げた仕事の概要や想いを綴っています。ぜひご覧ください。

本日の学び

Sassでのメディアクエリの書き方：変数＋＠mixin方式

　以前の記事で、Sassのコーディングのアウトラインを書いたときに、「メディアクエリを＠mixin方式で書く」としていたので、その書き方をリサーチ。

参考記事はこちら

macoblog

【コピペOK】Sassで簡単にメディアクエリを使用する方法｜macoblog この記事では「Sassを使ったメディアクエリの書き方」について解説しています、Sass特有の「変数」「ミックスイン(@mixin)」「インクルード(@include)」の３つを組み合わせ…

Zenn

Sass / Scss Media Queries

リサーチの結果、このようなコーディングで進めることにしました。

//メディアクエリの定義です
/* ------------
media queries definition
-------------- */
$breakpoints: (
    'sp': 'screen and (max-width: 768px)',
    'md': 'screen and (max-width: 950px)',
    'pc': 'screen and (min-width: 769px)',
) !default;
@mixin media($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}

//以下使用例です(@include～部分)

/* ------------
sp-none
-------------- */
@include media(sp) {
    .sp-none {
        display: none;
    }    
}

//中略//
header {
//中略//
    .container {
//中略//
        .header_title {
            color: $white;
            font-size: 2rem;
            @include media(md) {
                margin-left: 20px;
            }
            @include media(sp) {
                position: absolute;
                top: 0;
                padding-top: 13px;
            }
        }
    }
}

　理由は、①簡単そう、②書いててしっくりくる（これは感覚の問題ですｗ私の場合は、よくわからない呪文が少ない気がしました）くらいです。

　参考までに。ミディアムサイズを950pxまでにしているのは、ヘッダーのナビゲーションの感覚を変更する際のブレークポイントとして使用しているからです。

ブレークポイント：スマホサイズ（～767px）、パソコンサイズ（768px～）だとなぜかバグる

　今までの課題にて、ブレークポイントをタイトルのように設定しており、今までうまくいっていたのに、なぜか今回はこの設定でバグる現象が起きました。

　その代わり、ブレークポイントをスマホサイズ（～768px）、パソコンサイズ（769px～）1px変更したら、問題なく動作したんですよね～。

　〇　max-width: 767px, min-width: 768pxに設定した場合の現象（767px画面でチェック）：表示される画像/されない画像がまばら

　〇　max-width: 768px, min-width: 769pxに設定した場合の現象（768px画面でチェック）：問題なく表示（767px画面でも問題なし）

　当現象については、原因はよくわからなかったので、とりあえず問題なく動作したブレークポイントで進めることにします。しかしモヤモヤが残る。Why…

本日の反省

「やる気の伝染」について

　勉強時間を確保できるように、と夫を残して実家に帰っていたら、なぜか夫は飲みに行ってしまい。そして次の日二日酔い！！笑

　ということで、介抱したり、日中寝ている夫を横目に息子の世話しながらカタカタコーディングをやっていたのですが・・私もやる気が大幅DOWN！笑

　「やる気は伝染する」とかいうけど、そう考えている時点でアカンのかもしれない。しかしそういう中自分は頑張った。と誉めよう。

Be patient（忍耐強くいこう）. Active listening（相手の話をよく聞こう）.

　勝間和代さんの動画で、「７つの習慣」の解説について見ていたら、勝間さんが著者のスティーブン・コヴィーさんにお会いする機会があり、「７つの習慣を行っていない人が身近にいる場合、どうしたらいいのか」というご質問をされたそう。

　それに対するコヴィーさんの回答が、①Be patient.　②Active Listening.　が大事だとのこと。

　たしかに、自分の人生・考え方を他人に押し付けることはできないし、世の中にいる人の数の生活・考え方・意見がある。それに対して、「耳を傾ける」ことができることは大切だよなぁ。みつを。

　ということで、今晩は少し夫と色々会話してみました。彼なりの意見がやっぱりあって、私の気づきもありました。なんとなく抱えていたモヤモヤがすっきりしたような気がします。また引き続き頑張るぞ！

今日も諦めなかった自分、お疲れ様でした！

Twitterでも勉強ログを呟いています。よかったら覗いてみてください♪