Bootstrap

【DAY13-17】BootstrapでLPを制作した情報まとめ

30DAYSトライアルでBootstrapの基礎からLPまでやってきました。 Bootstrapをしっかりと学べたのはめちゃくちゃ勉強になったし、「やっぱりBootstrap便利!」ってなりました。
とはいえ、HTML、CSSの基本ができていないと、やはりBootstrapは扱えるものではなく、レイアウトが崩れたり、見本通りにコーディングできないこともあって苦戦しました。
トライアルDAY13-17までで気づいたことをまとめておきたいと思います。

 

BootstrapでLP制作

 


僕がつまづいたポイントは以下の通り。

  • タグの囲み方とクラスの付け方
  • ナビバーの右寄せ、左寄せ
  • pxじゃなくてrem指定
  • FontAwesomeの使い方
  • 背景画像の固定

 
一つずつ解説していきます。
 

タグの囲み方とクラスの付け方

LPをコーディングし始めた時、ナビバーは順調に進みます。
しかし、トップ画像を入れ終えたところで、それぞれのブロックをどのタグでマークアップすればいいのか、イメージが湧かないと全然進まないなーと言う印象。
 
イメージを持ってコーディングをするのが大事だなーと痛感。
 


このツイートを参考にしつつ、実践してみよう。
 
 
 
今回のLPの場合、大きく6つに別れていました。

  • home
  • course
  • features
  • resources
  • clients
  • contact

これらを<div>でidをつけて大きなセクションを作ります。

<div class="col-12 narrow text-center">
<h1>Nuno theme Advanced Bootstrap Course</h1>
<p class="lead">learn Bootstrap by creating an advanced Bootstrap 4 Responsive Website Template from scratch with no steps skipped!</p>
<a href="#" class="btn btn-mf btn-secondary">BOOTSTRAP COURSE</a>
</div>

基本的には、col-12で見出し部分を作って、text-centerにする。左右の幅は、narrowというクラスをつけて他のセクションと調整する方法でした。
 
jumbotronが結構出てきましたが、これは、横幅いっぱいに画像や背景色を入れたいときに使うみたいです。
 
問題のクラス付けですが、HTMLでマークアップしている時は、どのようにクラスを付けていいかわからず、とにかくBootstrapのクラスを少しずつ付けていました。
後から、まとめてCSSをあてたいときにクラスを付与しています。
コーディングしながら、クラス名もパパッと決めれたらいいのですが、そもそもクラス名を何にしたらいいかもわからなかった。。。
 
こちらのサイトが参考になりました。

 

ナビバーの右寄せ、左寄せ

ナビバーのリストを右寄せにしたいときに便利なのが、Bootstrapのautomarginです。クラス名を付与するだけで、右寄せ、左寄せができるので、かなり便利。

pxじゃなくてrem指定

これまでは、font-sizeなどを指定する場合「px」を使っていたのですが、今回のYouTube動画では、「rem」を使っていました。


そもそも1remって何pxなの?ってところからでした。
基本的には、html要素に対しての相対値らしく、htmlタグに対してサイズを指定してあげればいいみたいです。

See the Pen
EBZZzP
by kei (@kei_01011)
on CodePen.


なので、62.5%を指定しておけば、1rem=10pxとなって計算も簡単に!
これはめちゃくちゃ助かります。
 
参考にさせてもらった記事はこちら

 

FontAwesomeの使い方

LPを作っていると、FontAwesomeが必ずって言うほど出てきます。
Progateでもやっていたはずなのに、やっぱり触らないと忘れてしまうものですね・・。
http://kaylife.wp.xdomain.jp/fontawesome-webicon/
 

背景画像の固定

背景画像の固定は、よくWebサイトで使われる手法で、なんだかこれだけでもカッコいいイメージ。


 
参考にさせていただいた記事はこちら

 

まとめ:とにかくコード書け

とにかく書けってことです。
毎日書かないと忘るっていうのを痛感しました。
 
HTMLとCSSの基礎がしっかりしていないと、BootstrapでもjQueryでも使いこなせませんね。