おはこんばにちは、ミヤビです。
さて今回は、DAY15.に引き続き、 「Bootstrapを使ってビジネスLP制作④」になります。
今回で、YouTubeのチュートリアルを使った学習は終了です。
DAY16. 『Bootstrapを使ってビジネスLP制作④』
DAY15から引き続き、HTML5/CSS3/Bootstrap4でのサイト制作です💻
勉強時間を長めに取れるかた向けの勉強法も書いてるので、余裕があればぜひトライを☺️‼️課題詳細👉https://t.co/ubW21Iozpt#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/Vt5YGpica2
— ショーヘー@東京フリーランスCMO (@showheyohtaki) January 22, 2019
✔︎本記事の内容
- DAY16.『Bootstrapを使ってビジネスLP制作④』の解説
✔︎30DAYSトライアル1stの最終目標
- 月5万を稼ぐスキルを目指す
- 未経験からWEB系エンジニアの転職を目指す
- 未経験からWEB系ノマドエンジニアを目指す
Bootstrapを使ってビジネスLP制作④
59分から最後までを終わりにしましょう。
はい、完成しました
Bootstrap4をYoutubeのチュートリアル動画で学習。
2.5時間くらいで完成😌コード暗記は不要で、雛形の一部を使いまわせばコピペで完了です。
バグに困った時は、
☑単語のスペルミス
☑divタグのミス
☑CSSの{ }の閉じ忘れ上記を見直そう。#駆け出しエンジニアと繋がりたい pic.twitter.com/WYsMNuAhAA
— ミヤビ@saitama (@Kiyomasa0181064) March 7, 2020
スクロール時に、画像背景が固定されてるのがカッコイイですね。
<div class="fixed-background dark">
//背景画像を固定するクラスを入れる
<div class="fixed-wrap">
<div class="fixed"></div>
</div>
</div>
CSSは、、、
.fixed {
background-image: url(#.png);
z-index: -10; //奥に表示させる
}
//背景を透明な黒色にして、イイ感じになるよ
.dark {
background-color:rgba(0, 0, 0, 0.75);
color: white;
padding: 7rem 2rem;
}
これは、イケイケなWEBサイトに役立てそうな予感です。
スクロール時に画像背景を固定したい時にどうぞ。
グリッドの分割って便利
今回の学習で知ったのですが、
12のグリッドを6対6に分割したあと、さらにこれを分割することができます。
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-4">
<img src="">
</div>
<div class="col-md-8">
<p></p>
</div>
</div>
</div>
</div>
半分にしたモノをさらに4対8に分割することもできます。
擬似要素とは :: beforeとafterの使い方
ザックリというと、HTMLには書かれていない要素のもどきをCSSで表現できる機能です。
- ::before 要素の前に内容を追加
- ::after 要素の後ろに内容を追加
タグやクラス名、id名の後ろに上記を加えてCSSを書いていきます。
今回の場合だと、、、
.offset::before {
display: block;
content: ""; //コンテンツに何も表示させない時は空タグ
padding-top: headerの高さ ;
margin-top: headerの高さ;
}
offsetクラスの前に、余白を挿入しています。
ナビゲーションメニューをクリックすると各セクションにジャンプしますが、ナビゲーションメニューは固定されているので、headerの高さ分のズレが生じます。
ズレを回避する方法は、
【HTML5】ページ内リンクの実装方法を解説【ヘッダー固定時のズレも解決】を参考にしてください。
›› 参考 CSSの疑似要素とは?beforeとafterの使い方まとめ
というわけで、今回はここまで。
次回でBootstrap編は終了です、お疲れ様でした〜。