エンジニアステップ

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

DAY12.『Bootstrapでレイアウトを作ろう 前編』 #30DAYSトライアル

DAY12.『Bootstrapでレイアウトを作ろう 前編』 #30DAYSトライアルです。 

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

www.engineer-step.com

 

DAY12.『Bootstrapでレイアウトを作ろう 前編』

DAY12. 『Bootstrapでレイアウトを作ろう 前編』ということで、サイトづくりです。

 

ドットインストールでBootstrap4を学習(レッスン#10~#15)

ドットインストールでBootstrap4を学習しました。 

範囲は「レッスン#10~#15」です。

  • レスポンシブレイアウト作成
  • 要素をサイズによって変化させる(見た目変えたり、消したり表示したり)
  • テーブルづくり

 

何故Gridデザインとかレスポンシブレイアウトをやっているのか(復習)

 

何故Gridデザインとかレスポンシブレイアウトをやっているのか?

復習ですが、2007年にiPhone発売されて以来、スマホでウェブサイトを見るのは当たり前になりました。

今はPC利用よりスマホ利用者のほうが数が多いとGoogleは統計も出しています。

 

ということで、どんな画面サイズにも対応できるようにする必要が出てきました。

(言い方を変えると、どんなデバイスでウェブサイトが見られても平気なようにする)

 

Progateの中級~上級辺りでやったように、レスポンシブデザインを手で書くのは超大変です。

なので、CSSフレームワークという便利な道具を使って、簡単にレスポンシブレイアウトに対応しよう~という流れです。

※一応モチベーション保つための確認でしたw

 

HTMLのテーブルとはなにか?

HTMLのテーブルとは何か?

突然出てきましたが、これは、HTMLのかなり初期の頃からある表現方法です。

テーブル(行列)で表現すると、整理された情報を見せやすいのでよく使われています。

 

テーブルの基本要素は以下の通り

  • table → テーブルの1番外側
  • thead → 見出し部分
  • tbody → データがある部分(要素部分)
  • tr → TableRowの略 ※Row=行(横方向)
  • th → TableHeaderの略。trの中に入れる ※Header=見出し
  • td → TableDataの略。trの中に入れる ※Data=データ

 

VSCodeのEmmetが超便利

VSCodeのEmmetが超便利です。

 

Emmetとは

EmmetとはHTML,CSSを省略して書けるプラグインです。

オープンソースで、色々なエディタに入れられます(VSCODEは最初から入っています)。

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow:

Emmet — the essential toolkit for web-developers

 

VSCODEのショートカットキー同様に、こちらのチートシートもすぐに見られるようにしておいたほうがいいですね↓

» 参考:Cheat Sheet

 

Emmetで特に覚えておくべきもの

Emmetで特に覚えておくべきものは以下の2つです(とりあえず今回分)

  • 入れ子要素を複数作る(例:tr>th*3)
  • ドットを付けることでクラス名が勝手に付く(例:div.container)

 

後者のドットを使うことで、クラス名を付けるのが「超ラク」なので是非使ってください~

 

他にも覚えておくと良い操作方法【おまけ】

他にも覚えておくと良い操作方法を2つほど紹介です(Windowsキー)

 

「ctrl enter」で下の行を改行&カーソル移動

→行の端に行ってからエンターを押して改行しなくていいので超便利

 

「shift alt f」で文章フォーマット(整形)

→ソースコードのインデントが崩れてきたらやってみると、勝手に整形してくれるので超便利

 

以上、DAY12.『Bootstrapでレイアウトを作ろう 前編』というお話でした。

自分の手でウェブサイト作っている感が出てきましたね!

 

【関連記事】

  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