エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

DAY17.『HTML5/CSS3/Bootstrap4の復習』 #30DAYSトライアル

DAY17.『HTML5/CSS3/Bootstrap4の復習』 #30DAYSトライアルです。 

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

www.engineer-step.com

 サイト制作未経験者によるHTML, CSS, BOOTSTRAPの簡単なまとめです。

2週間ちょっと「サイト制作」について学んだ内容をまとめました。

 

DAY17.『HTML5/CSS3/Bootstrap4の復習』

DAY17. 『HTML5/CSS3/Bootstrap4の復習』ということで、まとめてみました。

自分の記事を元にして、私がつまずいた所、覚えられなかった所を中心にまとめていきました。

 

HTMLとCSSのまとめ(初級)

HTMLとCSSのまとめです(初級)

この2つが超大事ですね。

  1. HTMLの要素はボックスと呼ばれる四角形の領域の集まりでできている
  2. CSSはこの書き方が基本 → セレクタ{ プロパティ:バリュー }

 

あとは(私が)忘れそうなのがこの辺り

  • URLリンクを貼る時は、<a href="...">で、画像を貼る時は、<img src="..">
  • 色を指定する方法は4種類(#~, 色名, rgb, rgba)
  • 「span」はインライン要素
  • CSSを書く時、クラスはドットが必要、タグはドットが不要(タグはheader, footerなど)
  • 「position:absolute」と指定することで、親要素の左上の場所が基点になる

  • border-bottomプロパティは、下ボーダー(下線)のスタイル・太さ・色を指定する際に使用する(例:1px solid #eee)
  • z-index(ボックスの重なりの順序指定)は値が大きいほど上になる画面の手前側(人間側)
  • CSSのフォントサイズには絶対値と相対値がある。remはroot + emの略。root要素に対して何倍か指定できるのでよく使う
  • レスポンシブデザインを実現するためによく使うのがメディアクエリ(@media (条件) { .... }と書く)
  • メディアクエリのmax-width指定は「以下」を意味する(未満ではない)

 

英語まとめ【おまけ】

覚えておいたほうが良い英語

  • 「opacity」は「不透明度」
  • 「absolute」は「絶対」
  • 「FLOAT」は「浮かせる」
  • リストの「UL」は「unorderedlist(順序がないリスト)」の略
  • 「hr」は横線。Horizontal Rule(水平線)の略

 

WEBデザイン関係の知識

WEBデザイン関係の知識です。

  • ツールチップとは「カーソルをなにかの項目に合わせたときに、ポップアップする枠のこと」
  • ハンバーガーメニューは、三本線のメニューアイコンのこと
  •  collapseとは「開閉するコンテンツを簡単に作れるパーツ」※Bootstrap

  •  WEB画面の閉じるボタン「×」を書くときには特殊文字「&times」が使える 

 

理解がちょっと面倒な所まとめ

理解がちょっと面倒な所まとめです。

 

インライン要素とブロック要素について

インライン要素とブロック要素についてはこの記事が分かりやすいです↓

» 参考:【CSS】displayの使い方を総まとめ!inlineやblockの違いは?

» 参考:divとspanの違いは?使い分け方を初心者向けに解説

 

paddingとmarginについて

paddingはボックスの内側、marginはボックスの外側です。

paddingは詰め物なので内側、marginは余白なので外側と覚えると良いです。

» 参考:margin?padding?ボックスモデルを理解しよう!

 

擬似クラスについて

active、hover、beforeなどの疑似クラスを使うと、より細かい状態が指定できます。

» 参考:DAY3.『Progate HTML & CSS 中級編(3章まで)』 #30DAYSトライアル - エンジニアステップ

 

グリッドデザインについて

グリッドデザインについては以下の記事がわかりやすいです

» 参考:Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

 

FontAwesomeとSVGについて

FontAwesome5ではSVGを使えます。デザインを指定する時に注意が必要です

DAY16.『Bootstrapを使ってビジネスLP制作④』 #30DAYSトライアル - エンジニアステップ

 

Bootstrapとは

Bootstrapとはなにか?

 Bootstrap(ブートストラップ)とは何か?簡単に解説です。

  • フロントエンドWebアプリケーションフレームワーク(CSSフレームワークとも言う)
  • HTML,CSS,JavaScriptで構成される
  • 元々はTwitter社内で開発されて使われていた
  • ライセンスはMIT License(商用利用可能)
  • HTML5,CSS3ではサポートは不完全だが、主要なWebブラウザと互換性あり
  • とにかく有名!よく使われている!

Bootstrapのメリットは以下の3点です(多分)

  • フレームワークなので「CSSを自分で書く手間が省ける」=既にあるものを使えば大体OK!
  • レスポンシブWebデザイン対応(自動でやってくれる)
  • Gridレイアウトが超便利

DAY11.『Bootstrapの基本を学ぼう』 #30DAYSトライアル - エンジニアステップ 

 

Bootstrapを使うにはCSSを読み込みます。

こんなやつ↓

<link rel="stylesheet"

 

他にもjQueryとかBootstrapのJS(JavaScript)を読み込んだりもします。

 

Bootstrapでよく使うクラス

Bootstrapでよく使うクラスです(個人的に忘れやすいもの)

  • 「container-fluid」は画面サイズに合わせてなめらかにリサイズされる
  • 「my-数字」はmargin + Y方向の略。縦方向のマージンを簡単に指定できる
  • data-toggleとdata-targetはカスタムデータ属性です。「data-toggle」側の指定が「何をするか」を決めます。「data-target」は「どの要素(#~~)を開くか」を決めます。

…と、ありすぎたので割愛w

www.engineer-step.com

 

VisualStudioCodeに入れるべきプラグイン

VisualStudioCodeに入れるべきプラグインまとめです。

ショーヘーさんから指定されたのは以下の通り

 

ちなみに、便利なEmmetはVSCODEにはデフォルトで入っています。

» 参考:「はじめて」でも簡単!Emmetの使い方とよく使うパターン集 | HPcode

 

この他にもタイプミス(タイポとも言います)を減らすために、以下のプラグインもオススメ。

緑色の下線が出てきて、タイプミスの場所が分かります

» 参考:Code Spell Checker - Visual Studio Marketplace

 

VSCodeでよく使うショートカットキー

VSCodeでよく使うショートカットキーは以下の通り。

DAY9.『基本のショートカットを覚えよう+ファイルパスを理解しよう』 #30DAYSトライアル - エンジニアステップ

 

頻繁に使ったのはこれ

動画の中でさり気なくやられていた操作気づきましたか?

ショートカットキーの「カーソル行の複製(コピー)」です。

VSCODEのショートカットキーを参考に載せました(覚えておくと良いです)

  • Windows→ Alt + Shift + ↑/↓ カーソル行をまるっとコピー(複数行対応)
  • MacOS→ ⇧⌥↓ カーソル行を下にコピー

DAY11.『Bootstrapの基本を学ぼう』 #30DAYSトライアル - エンジニアステップ

 

他にもこれとか

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

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

mugi1.hateblo.jp

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

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

DAY15.『Bootstrapを使ってビジネスLP制作③』 #30DAYSトライアル - エンジニアステップ

 

以上、DAY17.『HTML5/CSS3/Bootstrap4の復習』というお話でした。

めちゃくちゃ大量に学んでますね!!\(^o^)/

 

【関連記事】

  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