【プログラミング・Web制作勉強ログ#35】4/10の積み上げ成果

2022年4月11日

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

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

・ #Web制作 (デザインカンプコーディング)
⇒PC画面を簡単にパーフェクトピクセル(2h43m)
・ #ドットインストール(自分の作業と関係のあるところあったら)
⇒０本
・マインド作り＆情報収集(#YouTube 、ラジオ等)
⇒２本（1h25m）
合計勉強時間：4時間08分
— おかつ🌱鬼修行中 (@o_89965328_k) April 10, 2022

累計勉強時間(2022/3/7～)：163時間57分
３月：118時間13分
４月：45時間44分

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

本日の学び

・htmlの親要素と子要素の関係を、CSSを使って改めて勉強。
　⇒　positonの「relative（親要素）」＆「absolute(子要素)」や、「nth-child」の効き方等、ひたすらググって・書いて・チェックして…を繰り返し、「アハ～！」体験ができました。笑

・写真＆テキストが交互に入れ替わるflexboxにて、間の余白を統一させたい場合
　⇒　flexboxのgap機能は向かない（左のコンテンツの端っこを起点にgap（余白）を設定されるため、写真＆テキストのコンテンツ幅が違うと間の余白がずれてしまうから）
　⇒　解決方法：flexboxで逆にした写真要素にクラス名を付与し、そのクラスのみpaddingの位置を反対にする設定にした。

コーディング　↓

<section id="features" class="bg-green">
            <div class="feature">
                <div class="image">
                    <img srcset="images/about_01.png 1x, images/about_01@2x.png 2x" alt="about-01-pc" class="sp-none">
                    <img srcset="images/about_01_sp.png 1x, images/about_01_sp@2x.png 2x" alt="about-01-sp" class="pc-none">
                </div>
                <div class="text">
                    <h4>経験豊富なスタッフが24時間365日常駐</h4>
                    <p>当院は24時間365日いつでも対応できるよう、豊富な経験を持つ獣医師や看護師が約50名体制で常駐しております。</p>
                </div>
            </div>
            <div class="feature">
                <div class="image_right">
                    <img srcset="images/about_02.png 1x, images/about_02@2x.png 2x" alt="about-02-pc" class="sp-none">
                    <img srcset="images/about_02_sp.png 1x, images/about_02_sp@2x.png 2x" alt="about-02-sp" class="pc-none">
                </div>
                <div class="text">
                    <h4>エキゾチックアニマルも対応します</h4>
                    <p>犬・猫だけではなく、ウサギやハムスター、爬虫類や両生類、鳥類などエキゾチックアニマルも対応しております。</p>
                </div>
            </div>
            <div class="feature">
                <div class="image">
                    <img srcset="images/about_03.png 1x, images/about_03@2x.png 2x" alt="about-03-pc" class="sp-none">
                    <img srcset="images/about_03_sp.png 1x, images/about_03_sp@2x.png 2x" alt="about-03-sp" class="pc-none">
                </div>
                <div class="text">
                    <h4>ご自宅まで伺う往診も行っています</h4>
                    <p>外出が難しい動物たちや飼い主さまのために、獣医師や看護師がご自宅まで伺う往診サービスも行っております。</p>
                </div>
            </div>
        </section>

.feature .image,
.feature .image_right {
    width: 100%;
    height: 100%;
    min-width: 55%;
}
.feature .image img,
.feature .image_right img {
    width: 100%;
    height: 100%;
}
.feature .image img {
    padding-left: 45px;
}
.feature .image_right img {
    padding-right: 45px;
}
.feature + .feature {
    padding-top: 49px;
}
.feature:nth-child(odd) {
    flex-direction: row-reverse;
}

結果（パーフェクトピクセル使用中なので文字がブレて見えます💦）↓