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

2022年5月14日

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

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

①5/12日報執筆⇒すでに了
②デザインカンプ中級編(Sass)
　・お問い合わせフォーム終わらせる！⇒90%（ラジオボタンのカスタマイズ以外完了）
(その他)
・隙間時間のインプット⇒読書
・断スイーツ(18日目)⇒◎

息子預けられなかったけど、執念でやりました。
— おかつ🌱開業準備中 (@o_89965328_k) May 13, 2022

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

本日の学び

「アウトライン」を書いたら作業が爆速した件

　　色々初めて実装することが多そうだったので、いったん自分でアウトラインを書き、「どういうコーディングが必要なのか？」ということを自分なりに仮説を立てながらコーディングしていきました。

　結果、（自分指標ｗ）爆速でほとんど終わりました。あとはラジオボタンの調整だけです。

　なぜ早くできたかというと、アウトラインが分かっていると、まずはアウトラインにおいてコーディングすべきことが明確になり、ググる作業は詳細のコーディングに集中できるからだと思います。

アウトライン

フォーム自体の幅が、共通のコンテナ幅より少し狭い

フォーム欄の左右はひとくくりでパディングを設定していいな、等

詳細

項目名やインプット欄はある程度共通化して実装できそうだな

「お問い合わせフォーム　label input　CSS」　でググる

詳細

チェックボックスの箱の部分をうまく整列させるには？

「チェックボックス　整列　CSS」　でググる

詳細

引き続き詳細の項目の実装法をググる・・・

　たぶんみなさんが当たり前にやっていることだと思いますが、「全体を見渡してから作業を進める」ということがいかに仕事を早くするか、すごく実感できる日でしたのでシェア。

チェックボックスの「チェック」の実装法が面白い

　なかなかトリッキーな発想でおもろいな～！！と思ったので記録。

　理屈は以下のとおり。
①　疑似要素を作成（::beforeはチェック欄の白箱で使用してるので、::afterにする）
②　チェックの大きさが「小さい長方形」になるようにwidthとheightを設定
③　ラベル（ここでは「看板」の緑全体）を親要素にして（position: relative;）、親要素のに対して適切な位置を設定（position: absolute;の後にtopプロパティとrightプロパティで調整）
④　「小さい長方形」のbottomとrightの線だけボーダーを引く＆太さ設定
⑤　45度傾ける
⑥　デフォルトを非表示の状態（opacity:0;）にして、ラベルがチェックされた状態のとき、チェックを表示させるようにする(opacity: 1;)

　コーディングは以下のとおり（&::after以下で書いているのがチェックのコーディングです）。

.checkbox {
            margin-top: 50px;
            p {
                font-size: 2rem;
            }
            .checkbox_list {
                display: flex;
                flex-wrap: wrap;
                input {
                    display: none;
                }
                label {
                    font-size: 1.8rem;
                    position: relative;
                    display: inline-block;
                    width: 200px;
                    padding: 5px 25px 5px 45px;
                    cursor: pointer;
                    &::before, &::after {
                        position: absolute;
                        content: '';
                        top: 25%;
                    }
                    &::before {
                        left: 0;
                        width: 20px;
                        height: 20px;
                        background: #fff;
                    }
                    &::after {
                        position: absolute;
                        width: 8px;
                        height: 12px;
                        top: 50%;
                        left: 6px;
                        border-right: 2px solid #000; 
                        border-bottom: 3px solid  #000; 
                        content: '';
                        margin-top: -7px;
                        opacity: 0;
                        transform: rotate(45deg);
                    }
                }
                input:checked + label::after {
                    opacity: 1;
                }
            }
        }

　コーディングは普通に生活してるだけじゃ得られない「アハ！体験（古い？）」が得られるので面白いですね～。