【告知】ノマドエンジニア養成ブートキャンプ

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

パソコンでコーディングする女性

 

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

 

さて今回は、「Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①」の解説です。

 

 

✔︎本記事の内容

  • DAY13.『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』の解説

 

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

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

 

YouTubeで、Bootstrapのチュートリアルを見ながら、アウトプット作業をしていきます。

 

とはいえ、この動画は英語。

 

聞き取ることが苦手な人は字幕か、もう諦めて写経オンリーに専念しましょう。

 

いや、諦める必要はないです。

 

そもそもコードも英語ですが、中学、高校、大学で学んできた英語力で十分なので、心配は不要です。

 

わからなければ、ググって解決できます。

Bootstrapを使って実践していこう

 

今までの知識をフル活用する時が来ました。

 

DAY12.で学んだことを備忘録的にまとめた下記の記事も参考にしてみて下さい。

 

完成形はこんな感じです。

 

 

とはいえ、実務では不要かも

下記のとおりです。

 

 

Bootstrapが不要な理由

 

  • Bootstrap臭でテンプレ感が出る
  • Bootstrap独自のCSSが適用される
  • class名が長くまどろっこしくなる

 

こんな理由から、実務ではBootstrapを採用していない会社もあります。

 

イメージスライダーの作成方法

イメージスライダーを使う場合は、carouselクラスを用います。

 

カルーセルといい、回転木馬とかメリーゴーランドの意味です。

 

画像をスライドさせて表示させることができます。

 

<div id="slides" class="carousel slide" data-ride="carousel" w-100>
 <ul class="carousel-indicators">
  <li data-target="#slides" data-slide-to="0" class="active"></li>
  <li data-target="#slides" data-slide-to="1"></li>
  <li data-target="#slides" data-slide-to="2"></li>
 </ul>
 <div class="carousel-inner">
  <div class="carousel-item active">
   <img src="img/x.png">
    <div class="carousel-caption">
     <h1 class="display-2">Bootstrap</h1>
     <h3>Complete Website Layout</h3>
     <button type="button" class="btn btn-outline-light btn-lg">ボタン1</button>
     <button type="button" class="btn btn-primary btn-lg">ボタン2</button>
    </div>
   </div>
   <div class="carousel-item">
    <img src="img/y.png">
   </div>
   <div class="carousel-item">
    <img src="img/z.png">
   </div>
 </div>
</div>

 

ナビゲーションメニューの作り方と似ていますね。

 

jumbotronとは

ジャンボトロンとは、大型ディスプレイを意味します。

 

クラス名にjumbotronで、背景色のついたリード文が作れます。

 

さらに、ジャンボトロンに画像を挿入したい場合はこんな感じ。

 

.jumbotron {

background-image: url("xxx.jpg");

background-size: cover;

}

 

その他のクラス

container-fluid

container-fluidは、画面サイズに合わせて流動的にリサイズされるイメージです。

 

ブレイクポイントに合わせて、滑らかに変化します。

 

一方、containerは、画面サイズに合わせてリサイズされるイメージです。

 

ブレイクポイントを超えると、カクカクと変化します。

 

なので、container-fluidの方が自由度が高いので、一択で良いです。

 

sticky-top

ヘッダーを固定化できます。

 

cssなら、

 

header {

 position: fixed;

 top: 0;

 z-index: 10;

}

 

どちらの使い方も覚えておきましょう。

 

というわけで、今回はここまで。

 

次回も、YouTubeのチュートリアルでBootstrap学習を進めていきましょう。

 

コンパスで地面をくり抜く男女 【DAY14.】30DAYSトライアル14日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】