エンジニアステップ

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

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

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

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

www.engineer-step.com

 

DAY15.『Bootstrapを使ってビジネスLP制作③』

DAY15. 『Bootstrapを使ってビジネスLP制作③』ということで、Youtubeを見ながらの勉強は続きます。 

 

Bootstrapを使ってビジネスLP制作(Youtube動画を見つつ)

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

Youtube動画を見ながら書きます。

DAY13&DAY14でやった内容の復習という感じでして、前回よりかなり早くできました。

 

Bootstrapのクラス(学習メモ)

今日も今日とて、Bootstrapのクラス(学習メモ)です。

私が調べたところをまとめています。

m-autoシリーズ

m-autoは「margin auto」です。

余白の設定を「auto(自動=他の要素に合わせて動的に決まる?)」にします。

書き方は以下の通り。

  • m-auto : (all)
  • ml-auto : left
  • mr-auto : right
  • mt-auto : top
  • mb-auto : bottom
  • mx-auto : left + right
  • my-auto : top + bottom

 

overflow-x:hidden

overflow-x:hiddenについて調べました。

ボックスの範囲内に内容が収まらない収まらない場合の指定方法です。

hiddenだと収まらない部分は非表示になります。

※非表示部分は全く見えません。スクロールバーでスクロールしても表示されません

 

Google Fontsとは

Google Fontsとはその名の通りGoogleが提供しているWebフォントを使えるサービスのことです。

fonts.google.com

 

ページを表示する時に、WEB上のフォント置き場から、フォントを持ってきます(PCに入っているフォントに依存しないのが特徴です)

 

fasとfabの使い分けについて(Font Awesome)

iタグのfasとfabの使い分けについて解説します(Font Awesome)。

fasもfabもどちらもclassですね。

アイコンの分類によって使い分けるようです

  1. fas → Solid
  2. fab → Brands
  3. far → Regular (多分有料)
  4. fal → Light (多分有料)

企業に関係してそうなアイコンが「fab」で、一般的・汎用的なアイコンは「fas」っぽいですね。

 

ちょっと便利な方法共有

ちょっと便利な方法共有です。

 

スペルミスに悩む人向けの拡張機能

スペルミスに悩む人向けの良い拡張機能がありました(教えていただき感謝!)

 

こちらの拡張機能を入れると、間違えの可能性がある箇所に緑色の下線が引かれます。

超便利なので、試してみると良いと思います~

qiita.com

 

読むのが面倒な人は、ココからインストールすればOKですw

Code Spell Checker - Visual Studio Marketplace

 

マルチカーソルは便利機能です

マルチカーソルという便利機能があります。

簡単に言うと、テキストエディタ上で使えるカーソルの数を増やせます。

 

これを使うと似たような処理をする時に、複数箇所を選択して処理できるので便利です。

こちらのサイトがわかりやすかったです↓

mugi1.hateblo.jp

 

今回の課題だと、似たようなDIVクラスを作る時に、一部の文言だけを変えましたよね。

その際に、「Ctrl+Dで複数選択して修正」で、簡単にできます。

※特定範囲を選んで置換処理をするより早いです

 

以上、DAY15.『Bootstrapを使ってビジネス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