フレキシブルボックスでつくるHTML5&CSSレッスンブック 感想

[PR] 記事内には広告が含まれています。

すごくよかったです。

エビスコム『フレキシブルボックスでつくる HTML5&CSS』レッスンブック

↓こちらの書籍です、図書館で借りました。

借りたのは先月なのですが、図書館が臨時休館になっているのもありゆっくり手をつけました。

私は8年前まではサイト制作の仕事をしていましたが、病気でいったんリタイヤし、闘病後はマイペースでインストラクターをやってきました。

WordPressという便利なものにどっぷりハマって、HTML&CSSは、強引に昔の知恵だけでいけちゃうところもあり、新しい知識を入れるのをサボっていました。

ここ数年のWEB界隈の進化はすさまじいものがあります。どうやって動いているのかわからないWEBサイトが続々登場しています。

かなり危機感を感じ、真面目に勉強を再開しました・・・。

で、前置きが長くなりましたが、この本は、フレキシブルボックスという技術を使って簡単にレスポンシブを実装するやり方を、段階的に教えてくれる本です。

フレキシブルボックスのことだけでなく、HTML5&CSS3の基本のことも触れていますので初心者でも総合的に学習できます。

フレキシブルボックスとは?

親要素に

.container{
display: flex;
justify-content: space-between;
}

って入れるだけで、子要素が均等に並んでくれるというものすごい簡単な記述法です。

お恥ずかしながら私は知らなくて(うっすらとウワサには聞いていたけど真剣にやってこなかった)いそいそと float:left; とかってやってました!

レスポンシブ化するのがめちゃめちゃ面倒くさかったのが、このflexの指定で崩れることなく簡単に実装できます!

この説明だけではわからないと思いますので、興味のある方はぜひ本書をお読みください。

ネットでググルだけだと断片的でわかりづらいですが、本でまとまってると本当にわかりやすいです。

構成が秀逸

この本を最初から順を追ってやっていくとわかっていただけると思いますが、進んでいくステップが絶妙。かゆいところに手が届く構成です。

モバイルファーストでつくっていくやりかたもわかりやすく、今まで自己流でレスポンシブ化していた苦労はなんだったのというくらい明快です。

そして完成するサンプルページも、シンプルでありながらデザインが洗練されていてとても良き。練習本の中には、サンプルページがダサすぎてこんなの作りたくない!と思うものもあるので、、、この本はそんなことがありません。

さらっとオマケ情報もよかった

噂に聞いていたNetlifyなるものを、今回はじめて体験しました。

Gitのことはまだよくわかんないんですが、HTMLサイト上げるだけなら、めちゃくちゃ簡単でした。

世の中こんな風に進んでいるんですねぇ。。

ちなみに今回作ったサイトは↓こちらに公開しています。

フルーツデザートを求めて街歩き - FITTED

デザインはいまいちですが、、半日あればできます。

また、オンライン画像編集ツールも寡聞にしてはじめて知りました。

フォトショップ風(ラスター)画像編集サイト

Photopea | Online Photo Editor
Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online ...

イラストレーター風(ベクター)画像編集サイト

Vectr - Free Online Vector Graphics Editor
Free vector graphics editor. A simple yet powerful web and desktop cross-platform tool for everyone.

読んでトクしました!興味のある方、おすすめです。

エビスコムの本、いいかも・・・

IT系の本って、たいてい誤植とか説明不足とかがいくつもあってイライラすることも多いのですが、この本は本当にノンストレスで楽しく完走することができました。

同じシリーズのCSSグリッドレイアウトの本もやってみたくなります。

同じエビスコムから出版されている電子書籍のこちらも気になってます。

表紙が若干地味で目につきづらいので、図書館で借りるのでないと出会わなかったかもしれませんが、いい勉強になる大変良い本でした!

信頼できる著者さんなので他の本も期待できそうです。今後買ってみます。