【DAY16.】30DAYSトライアル16日目をわかりやすく解説

各人物の紹介

 

おはこんばにちは、ミヤビです。

 

さて今回は、DAY15.に引き続き、 「Bootstrapを使ってビジネスLP制作④」になります。

 

今回で、YouTubeのチュートリアルを使った学習は終了です。

 

 

✔︎本記事の内容

  • DAY16.『Bootstrapを使ってビジネスLP制作④』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指す

 

Bootstrapを使ってビジネスLP制作④

59分から最後までを終わりにしましょう。

はい、完成しました

 

 

スクロール時に、画像背景が固定されてるのがカッコイイですね。

 

<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のグリッドを６対６に分割したあと、さらにこれを分割することができます。

 

下記のとおり。
<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編は終了です、お疲れ様でした〜。

 

前の記事

サイトマップと座る男性
【SEO対策】サイトマップの正しい送り方【作り方も解説】

次の記事

【DAY17.】30DAYSトライアル17日目をわかりやすく解…
チェックリストと男性