エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

DAY14.『Bootstrapを使ってビジネスLP制作②』 #30DAYSトライアル

DAY14.『Bootstrapを使ってビジネスLP制作②』 #30DAYSトライアルです。 

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY14.『Bootstrapを使ってビジネスLP制作②』

DAY14. 『Bootstrapを使ってビジネスLP制作②』ということで、Youtubeを見ながらコーディングです。大変ですががんばりましょう!

Progateと違って、正解判定を勝手にしてくれないので、間違いに気づくのがちょっと大変ですね。

 

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

 Bootstrapを使ってビジネスLP制作です。

DAY13.『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』でも書きましたが、英語の得意度に応じて、

  • Youtube再生時の設定で「字幕」をONにして、英語を見て理解しながら書く

  • とりあえず動画を見つつ、写経(丸写し)して、書かれている言葉の意味を調べる

のどちらかしかありません。

※Youtubeは再生速度が変えられるので、遅く再生するのもオススメです。

www.youtube.com

 

あと、うまく反映されないとしたら基本的にはコーディングミスの確率がかなり高いです。

この辺りのミスが初心者のうちは多いです↓

 

Bootstrapのクラス(学習メモ)

今回作ったLPですが、流石に情報量が多すぎるので、全部を紹介するのは無理でしたw

私が個人的に調べたものだけ、簡単に書きますね(灬╹ω╹灬)

 

よく使うBOOTSTRAPクラス名

よく使うBOOTSTRAPクラス名です

  • 「container-fluid」は画面サイズに合わせてなめらかにリサイズされる

  • 「hr」は横線。Horizontal Rule(水平線)の略
  • 「my-数字」はmargin + Y方向の略。縦方向のマージンを簡単に指定できる

 

BootStrapで分かりづらい所(data-toggle, data-target)

data-toggleとdata-targetはカスタムデータ属性です。

「data-toggle」側の指定が「何をするか」を決めます。

「data-target」は「どの要素(#~~)を開くか」を決めます。

 

data-targetで指定する要素は、関連するdivのID名として指定されていることが多いです。

 

ナビゲーションメニューを作りたいときは、navbarを使います。

  • 「navbar-expand-??」でブレイクポイントを決める (??にはsm,md,lg,xlが入る)
  • 最上部に達すると固定(Sticky top)

 

ImageSlider(イメージスライダー)

ImageSlider(イメージスライダー)を作りたいときは、「carousel(カルーセル)」を使う。

※メリーゴーランド、回転木馬という意味

 

「なぜ勝手にボタンが作られて、自動で動くのか?」というと、そんな動きが裏側で作られているだけですね。たぶんJavaScriptでつくられています。

カルーセル~Bootstrap4移行ガイド

 

Jumbotron(ジャンボトロン)

Jumbotron(ジャンボトロン)は、WEBサイトのトップの見出しデザインです。

元ネタはソニーのディスプレイだとか

「ジャンボトロン」という名称は、当時のソニーのテレビブランドであり、映像表示技術でもあった「トリニトロン」のテレビをそのまま巨大化した「ジャンボ版」の意を込めて命名された。英語圏ではjumbotronが、大型ディスプレイを指す一般名詞のように用いられることがある。

ジャンボトロン - Wikipedia

 

 サイトの主要メッセージを表示するのに使うようです。

ジャンボトロン~Bootstrap4移行ガイド

 

Card(カード)

Card(カード)クラスは、Bootstrapで用意してあるカードがタイプのデザインです。

card, card-img-top, card-body, card-title, card-textなどを使います。

 

画像とタイトルと本文テキストがある決まったデザインを表すのに便利です。

※アラサーのわたしとしては、遊戯王カードとかポケモンカードみたいだなと思いましたw

 

リンク先のカードの画像を見ると「こういう型なんだ」と理解しやすいです

Cards · Bootstrap

 

 

その他

その他気になったところをまとめました。

 

●「©」は特殊文字で、コピーライト表記をします。

※DAY13で見た「×」も特殊文字でしたね

 

●「transform:translate()」は要素の表示位置を移動させる方法です。

例えば、「transform:translateY(-50%)」だとY方向(縦方向)にマイナス50%なので、上方向に50%移動するということですね。

 

●「text-transform:uppercase」は英数字を大文字に変換する方法です。

※個人的には、これって平文(テキスト)ではなく、CSSでやるんだ…というのが衝撃的でした

 

●「@media(max-width:~~px)」はエディアクエリです。

指定したpxまでのCSS情報を指定したいときに使います(いままで学習してなかった気もしたので一応)

メディアクエリ - Wikipedia

 

 

以上、DAY14.『Bootstrapを使ってビジネスLP制作②』というお話でした。

 

今回は、いつもよりもしっかり「自分で理解しないといけない」内容でした。

ちょっと大変でしたね。

ただ、たった2週間でLPが作れて衝撃的です。残り半分がんばりましょう~(灬╹ω╹灬)

【関連記事】

  1. DAY11.『Bootstrapの基本を学ぼう』 #30DAYSトライアル
  2. DAY12.『Bootstrapでレイアウトを作ろう 前編』 #30DAYSトライアル
  3. DAY13.『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』 #30DAYSトライアル 
  4. DAY14.『Bootstrapを使ってビジネスLP制作②』 #30DAYSトライアル
  5. DAY15.『Bootstrapを使ってビジネスLP制作③』 #30DAYSトライアル
  6. DAY16.『Bootstrapを使ってビジネスLP制作④』 #30DAYSトライアル 
  7. DAY17.『HTML5/CSS3/Bootstrap4の復習』 #30DAYSトライアル

www.engineer-step.com