【プログラミング・Web制作勉強ログ#102】6/23の積み上げ成果

2022年6月24日

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

#今日の積み上げ 195日成果

①6/22日報(30m以内)⇨◎
②Macbook設定⇨ほぼ完了
③ターミナル学習⇨70％
④インプット(YouTube・読書)⇨◎

明日外付けキーボードが届いたら、コーディング準備完了。今日はインプットしまくりました。お疲れ様でした！！
— おかつ🌱開業準備×子育て中 (@o_89965328_k) June 23, 2022

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

本日の学び

デザインカンプ答え合わせ

自分のコーディングと、メンターさんのコーディングをつけ合わせてみました。

相変わらず、コーディングしすぎですね私。

Sassのコーディング行数みてみたら、

メンターさんは984行、私は1363行。。（唖然）

メディアクエリは、メンターさんコーディングではCSSと同じように画面毎にまとめて書いていたけど、

私はメディアクエリの定義づけ＋効かせたいプロパティの直下に＠includeを記述する形にしていたので、

結局どっちがいいんだろうな〜と迷った次第。

@media(min-width: 768px) {
    .pc-none {
        display: none;
    }
}
@media(min-width: 1024px) {
    .header-nav-list li a:hover {
        border-bottom: 1px solid #fff;
        padding-bottom: 10px;
        opacity: .7;
    }
}
@media(max-width: 1023px) {
.header {
    padding: 16px 20px;
    #nav-open {
        background: $c-white;
        width: 71px;
        height: 50px;
        box-sizing: border-box;
        position: fixed;
        right: 0;
        top: 0;
        padding: 13px 19px;
        cursor: pointer;
        z-index: 9998;
    }

/* ------------
media queries definition
-------------- */
$breakpoints: (
    'sp': 'screen and (max-width: 768px)',
    'md': 'screen and (max-width: 970px)',
    'pc': 'screen and (min-width: 769px)',
) !default;
@mixin mq($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
      @content;
    }
  }
〜中略〜
.title {
    font-size: 3rem;
    color: $mainColor;
    letter-spacing: 1rem;
    padding-top: 73px;
    text-align: center;
    @include mq(sp) {
        padding-top: 42px;
        letter-spacing: 0.8rem;
    }
}

クライアントサイドでは、結論ちゃんと映れば問題ないのだろうけど、

技術的な側面ではどうなんだろう。メンターさんに聞いてみようかな。

あと、複数行ではみ出したところに「…」と省略させる機能を見て

コーディングしているときは思いつかなかったけど、実際にページを閲覧すると

めっちゃ必要な実装だな〜と思い、さすがだと思います。

実装方法はこんな感じ。

                        p:last-child {
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                        }

参考になった記事はこちら。

みどりのさるのエンジニア