こんにちは！もりおです。
今回は「HTML5 / CSS3 モダンコーディング」という書籍の紹介です。
この書籍で一通り学習してみましたので、私が感じたことをお話ししていきたいと思います。
サブタイトルに「フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」とあるように、サンプルのサイトを作りながら、フロントエンドの技術（HTML / CSS）を学べる書籍になっています。
- ある程度、HTML/CSSを組める人
- サンプルを作りながら楽しく勉強したい人
- かっこいいサイトの実装方法が知りたい人
HTML / CSSは組めるけど、世間のかっこいいサイトはどうやったら作れるのかわからない！
こんな人におすすめです。
もりお
JavaScriptを学びたい人には向いていません。
目次
HTML5 / CSS3 モダンコーディングの特徴6選
HTML5 / CSS3 モダンコーディングで実際に学習をして感じた特徴を6つ、紹介していきます。
3種類のサンプルを作って学ぶことができる
以下、3種類のサンプルを作りながら学習していきます。
それぞれサイトプレビューが公開されています。リンク先参照。
- スタンダードレイアウト → ブログっぽい
- グリッドレイアウト → おしゃれな企業のサイトとか?
- シングルページレイアウト → ポートフォリオっぽい
これらの世間で良く見るようなデザインを、実装しながら学習していくことができます。
実際に世間でよく見るようなデザイン、というのが大きなポイントです。
いかにもサンプルな実装例や、一部分だけの実装例の書籍はいくらでもあります。
逆に、かっこいいデザインのサイト集のようなものも良くありますが、そちらはコードの説明が少ないことが多いです。
この書籍はそのあたりのバランスがいいな、と感じます。
かっこいいデザインのコードと実装のポイントをしっかり解説してくれます。
素材はすべて用意されている
背景に使う画像やアイコンなどはすべてネット上に公開されています。
PCとこの書籍とネット環境とエディタがあれば最初から最後まで学習していけます。
もりお
レスポンシブ対応の実践もできる
最後の「シングルページレイアウト」のみですが、レスポンシブ対応の実践もあります。
横に並んでいるボックスを縦に並べるようにしたり、フォントサイズを変更したり。
どういう技術を使うのか（メディアクエリとか）を学べたのももちろん良かったのですが、「どういったことをすれば良いのか、気をつければ良いのか」を学べたのが良かったです。
モバイル表示だとここの間隔空きすぎるからパディング調整、とか。メディアクエリなどの話は何にでも書いているけど、こういったことが書いてある書籍ってあまりないと思ってます。
…できればもっと載せてほしかった！
もりお
簡単な演習がある
それぞれのサンプルを作成した後、最後に簡単な演習問題があります。
主に作成したサンプルのCSSを修正して、デザインを多少変えるというものです。
簡単すぎずも難しすぎずもなく。少し悩んでなんとかできるくらいで、ちょうどいい難易度です。
ただ本当に少しなので、そういった演習問題を期待して購入してはいけません。
あくまでおまけといったくらいです。
基本的なことはあまり書いていない
HTMLやCSSの基本的な説明はあまりありません。例えばpタグは何か、marginは何か、など。
補足で説明が入ることもありますが、すべてのコードに説明なんてしてくれません。
本当のHTML / CSS 初心者がいきなりこの本で勉強したら、高確率で挫折するんじゃないかと思います。
本の通りにやって、「なんかかっこいいページができてきた！」という楽しみはあるかもしれません。
でもきっと何も理解なんかできていなくて、とてもじゃないが応用なんかできません。
もりお
FlexboxやGridの記述は（ほとんど）ない
display: flex や display: grid の話です。
Flexboxの記述はコラムとして1ページほど。Gridに関してはまったく説明がありません。
2つ目のサンプルとして作成する「グリッドレイアウト」は、複数の情報をグリッドに沿って並べたレイアウト、という意味であり、決して display: grid の話ではありません。
もりお
まとめ：モチベーションを保ちながら楽しく学習できる
キレイなWebサイトを作り上げていきながら学習できるので、とても楽しく、モチベーションを保ちながら進めることができます。
ただし、それはある程度 HTML / CSS が分かっていれば、です。
上でも書きましたが、本当に基本的なことはあまり解説されません。
まずは、別の書籍やオンライン教材でHTML / CSS の基礎を身につけてから、この書籍に取り組むことをおすすめします。
もりお
コメントを残す