デイトラweb制作中級編 DAY33~37②
nakano
最終課題：実践コーディング 2日目
今回進めた範囲（PC） ↓
※「Results」は後で
苦戦したところ
①背景画像の固定（スクロールなし）
背景をスクロールしても動かないように固定したい場合 ↓
background-attachment: fixed;
使用する場合は
1.「background-attachment: fixed」だけではなく、backgroundプロパティも忘れずに使う
2. スマホだけには効かない
→ background-attachment: fixed;とbackground-size: cover;を同時に指定していると効かない
ことに注意する
参考記事
②Q&Aの「Q」アイコン
基本的には中級編 DAY28の時と同じ
青色の背景と「Q」の部分が重なるように配置する
HTML
<div class="qa-box__q">
質問質問質問？
</div>SCSS
.qa-box__q {
padding: 20px 56px;
font-weight: 700;
letter-spacing: 0.4px;
position: relative;
&::before {
content: "Q";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 24px;
padding: 2px 6px 3px 5px;
background: #4973FF;
border-radius: 50%;
line-height: (19 / 16);
// フォント「Montserrat」
font-family: $font-en;
font-weight: 600;
color: #FFFFFF;
}
}まとめ
今回も最終課題の続きを進めました。
やはり今までのデザインとは全然違ってなかなか思うようには進みませんね。
Resultのスライダーも本当は作りたかったのですが、失敗しているうちに時間がたってしまったのであきらめて次に進みました。
一度あきらめた部分も、残りの部分も頑張って仕上げたいと思います！
