デイトラweb制作中級編 DAY30~32①

実在するサイトをゼロから作成する

見本のサイト ↓

引用元:Web制作コース中級編 DAY 30~32

今回進めた範囲(PC) ↓

今回進めた範囲(レスポンシブ) ↓

※明朝体のWebフォントの指定が必要な場合はGoogle Fontsで”Noto Serif JP”を利用

苦戦したところ

①ブラウザ幅に合わせて画像のアスペクト比を維持したまま拡大縮小

高さ ÷ 幅 × 100 」を対象の要素にpadding-topで指定する

トップ画像の場合

660px ÷ 1200px × 100 = 55

→ 「padding-top: 55%;」を指定する

②SCSSで画像を暗くする

元の画像

テキストは明るいままでback-groundだけ暗くする場合、疑似要素を使う

HTML

<section class="about section">
        <div class="about__image">
            <div class="about__content">
                <div class="about__title">消費者である・・・</div>
                <div class="about__lead">そんな視点から・・・</div>
            </div>
        </div>
    </section>

SCSS

.about__image {
    background: url(../img/bg.png) no-repeat center center / 100%;
    padding-top: 37%;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.12);
    }
}

.about__image の疑似要素で不透明度を指定することで画像が暗くなる

まとめ

今回から実在するサイトの作成を始めました。

今のところはまだHTMLとSCSSしか使っていないので、そこまで詰まらずに済みました。

しかし、ドロワーやスクロール時のアニメーションなどを作成するときには、さらに難しいjQueryをたくさん使うと思うのでこれからが大変そうですね!

コメントを残す

メールアドレスが公開されることはありません。