2020年1月22日30DAYSトライアルでBootstrapの基礎からLPまでやってきました。Bootstrapをしっかりと学べたのはめちゃくちゃ勉強になったし、「やっぱりBootstrap便利!」ってなりました。いえ、HTML、CSSの基本ができていないと、やはりBootstrapは扱えるものではなく、レイアウトが崩れたり、見本通りにコーディングできないこともあって苦戦しました。トライアルDAY13-17までで気づいたことをまとめておきたいと思います。YouTubeでLPを作るfixedを使った、背景画像の固定は衝撃。CSSが設定されていたので、少しずつ実装する方法を調べてみる。mainやsectionを使わなかったり、divではなくjumbotronを使っていたりしたので、bootstrapの動画だからわざとなのかな?と思った。僕がつまづいたポイントは以下の通り。一つずつ解説していきます。タグの囲み方とクラスの付け方LPをコーディングし始めた時、ナビバーは順調に進みます。トップ画像を入れ終えたところで、それぞれのブロックをどのタグでマークアップすればいいのか、イメージが湧かないと全然進まないなーと言う印象。イメージを持ってコーディングをするのが大事だなーと痛感。2019年1月21日このツイートを参考にしつつ、実践してみよう。今回のLPの場合、大きく6つに別れていました。homecoursefeaturesresourcesclientscontactこれらを<div>でidをつけて大きなセクションを作ります。COURSE</a></div>基本的には、col-12で見出し部分を作って、text-centerにする。左右の幅は、narrowというクラスをつけて他のセクションと調整する方法でした。jumbotronが結構出てきましたが、これは、横幅いっぱいに画像や背景色を入れたいときに使うみたいです。問題のクラス付けですが、HTMLでマークアップしている時は、どのようにクラスを付けていいかわからず、とにかくBootstrapのクラスを少しずつ付けていました。後から、まとめてCSSをあてたいときにクラスを付与しています。コーディングしながら、クラス名もパパッと決めれたらいいのですが、そもそもクラス名を何にしたらいいかもわからなかった。こちらのサイトが参考になりました。CSSのクラス名を決めるときに使うリストをつくりましたナビバーの右寄せ、左寄せナビバーのリストを右寄せにしたいときに便利なのが、Bootstrapのautomarginです。クラス名を付与するだけで、右寄せ、左寄せができるので、かなり便利。2019年6月20日pxじゃなくてrem指定これまでは、font-sizeなどを指定する場合「px」を使っていたのですが、今回のYouTube動画では、「rem」を使っていました。要素)に対して相対的にフォントサイズを指定できる。{font-size:62.5%;}htmlに62.5%(10px)を指定すると、他の要素にサイズ指定する場合、18px→1.8remと簡単にかける。2019年6月20日そもそも1remって何pxなの?ってところからでした。基本的には、html要素に対しての相対値らしく、htmlタグに対してサイズを指定してあげればいいみたいです。CodePen.なので、62.5%を指定しておけば、1rem=10pxとなって計算も簡単に!これはめちゃくちゃ助かります。CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分FontAwesomeの使い方LPを作っていると、FontAwesomeが必ずって言うほど出てきます。Progateでもやっていたはずなのに、やっぱり触らないと忘れてしまうものですね・・。背景画像の固定は、よくWebサイトで使われる手法で、なんだかこれだけでもカッコいいイメージ。YouTubeでLPを作るfixedを使った、背景画像の固定は衝撃。CSSが設定されていたので、少しずつ実装する方法を調べてみる。mainやsectionを使わなかったり、divではなくjumbotronを使っていたりしたので、bootstrapの動画だからわざとなのかな?と思った。2019年6月20日CSSで、背景画像の固定を簡単にできる方法を発見。これなら自分にでも実装できそうなので、試してみよう。[CSS]背景を固定させ、カーテンをあげるようにコンテンツを次々にスクロールで表示させるテクニックまとめ:とにかくコード書けとにかく書けってことです。毎日書かないと忘るっていうのを痛感しました。HTMLとCSSの基礎がしっかりしていないと、BootstrapでもjQueryでも使いこなせませんね。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。