デイトラ1期 DAY12『Bootstrapでレイアウトを作ろう 前編』【30DAYSトライアル1st】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

30DAYSトライアル1st DAY12.『Bootstrapでレイアウトを作ろう 前編』の解説です。

デイトラ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でレイアウトを作ろう 前編』というお話でした。

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