デイトラweb制作中級編 DAY30~32①
nakano
実在するサイトをゼロから作成する
見本のサイト ↓
今回進めた範囲（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をたくさん使うと思うのでこれからが大変そうですね！
