30DAYSトライアル

【30DAYSトライアル】に挑戦 DAY12 Bootstrap入門続き

こんにちは、ポンコツエンジニアのはやです。今回は、30DAYSトライアルのDAY12を進めていきました。今回の内容は、前回DAY11で進めたBootstrap4の続きです。

下のツイートのDAYが11になってますが、内容はDAY12のものです。

->詳細はコチラ

今回やることは以下の二つです。

・Bootstrap4入門コース レッスン#10〜14

・Emmet復習

Bootstrapはよく使うので、復習がてら進めていきましたが、Emmetはその存在自体知らなかったので、その便利さに驚きました。ただ、実際にどれだけ使っていけるのかわかりません。結構覚えるのが大変そうだ、というのが第一印象です。WEB制作をやりまくるなら覚えておいて損がないこと間違いなしですが、そうじゃなく、プログラムを書きたいんだという人にとっては、悩みどころです。

 

今回のポイント

今回やったのは、ドットインストールのBootstrap4入門と、そのコードの記述にできる限りEmmetを用いることです。

レスポンシブデザインを考えてみよう

レスポンシブデザインとは、スマホでも、PCでも、余裕があればタブレットでも違和感なくWEBデザインがみれるように、サイズによって、表示形式が変化するデザインのことです。

デザイナーの方が作成したデザインを見ると、実現するのは簡単そうに見えるのですが、1つのHTMLで複数のデバイスに対応したものを作るのは慣れるまで結構大変です。というか僕自身未だに悩むことが多々あります。(それぞれ別ページを用意することもあるようですが、それはそれで少し面倒なので、はじめに、スマホ(あるいはPC)ではどのような表示をするのかを考え、要素の配置をイメージしておくことがレスポンシブデザインになれるコツです!

 

Emmetはちょー便利!

初めて使ってみたのですが、Emmetが便利すぎました。

class名、id名を指定してEnterキーを押すだけで、そのクラス(id)名を持つdivクラスができる。(div以外の要素なら,「 span.class名 」のように要素に.でクラス名をつければできます!)

ul>li*4>a このように記述し、Enterキーを押すだけで、リンクを含む4つのリストが作成できてしまいます。

div+a とすると、divタグとaタグが並列にならびます。構造を深く追加していくだけがEmmetではないのです!

結論: Emmet超便利!!

まとめ

今回は、Bootstrapの続きとEmmetというツールについて学びました。僕が今回、Emmetを初めてさわるようにプログラミングの世界では、数え切れないほどの初めてのでありがあると思います。素晴らしい出会いもあれば、微妙だな、と思うものもあるでしょう。とにかくどんどん出会って、素敵な技術に出会ったときには徹底的に身につけたいですね!