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

2022年3月30日

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

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

・ #Web制作 (デザインカンプコーディング)
⏩レスポンシブデザイン作成中(2h05m)
・ #ドットインストール(ECサイトページ)
⏩8本(24m)
・ #YouTube (マインド作り＆情報収集)
⏩6本(1h47m)
合計勉強時間：3時間16分
— おかつ🌱鬼修行中 (@o_89965328_k) March 29, 2022

累計勉強時間：107時間56分(「Web制作一点集中」宣言後2022/3/7から記録)

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

本日の学び

①brタグの無効化（PC画面で改行をしたいが、SP画面では改行したくない場合）
　⇒　こちらのサイトを参考にした。
　⇒　brタグにクラス名を付与し、CSSにて、SP画面でbrタグを非表示にする設定にした。

②ボタンの位置を真ん中にする方法
　⇒　こちらのサイトを参考にした。
　⇒　カンプに基づき、ボタンの幅をコンテナ幅の100％にすることにした。

SP画面とPC画面はこちら↓

書き込んだコード（抜粋）はこちら↓

 <section class="about">
        <h2>ABOUT</h2>
        <div class="container">
            <div class="text_area">
                <div class="text_area_title">
                    <h3>老舗の味をテイクアウトで楽しめる<br class="sp_none">
                        新しいカフェスタイル</h3>
                </div>
                <div class="text_area_discription">
                    <p>知る人ぞ知る東京銀座の老舗カフェが提供する、移動販売のテイクアウトコーヒーです。<br>
                    「いつもの」がお家でオフィスでお気軽に楽しめます。</p>
                </div>
                <div class="submit_button">
                   <button type="submit">MORE</button>
                </div>
            </div>
            <div class="image_area_pc">
                <img src="images/About/about.png" alt="the_little_cafe_truck">
            </div>
            <div class="image_area_sp">
                <img src="images/About/about-sp.png" alt="the_little_cafe_truck">
            </div>
        </div>
    </section>

（PC画面のボタン部分）
・・・・（略）・・・・
.submit_button {
    width: 250px;
    height: 55px;
    background-color: #505050;
    position: relative;
}

button {
    color: white;
    font-size: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 300;
}
・・・・（略）・・・・

（SP画面のボタン部分）
@media screen and (max-width:900px) {
・・・・（略）・・・・
    .sp_none {
        display: none;
    }

    .submit_button {
        width: 100%;
        margin-top: 30px;
    }
・・・・（略）・・・・
 }