【レビュー】HTML&CSSモダンコーディングをやってみた感想

Amazonにて新型コロナの影響で「在宅応援セール」があり、1,000円ほど安くなっていたのでkindle版を購入し実際に勉強してみました。

プログラミングの書籍は決して安くないので購入を迷うと思いますが、今回はそんな人の参考になればと思い感想を書いていきます!

HTML&CSSモダンコーディングをはじめた時のレベル感

ProgateのHTML&CSSコースを2週、ドットインストールのHTML&CSS基礎編1週である程度知識がついてきてはいましたが、0からのサイト作成をしたことがないので自信がない、いまいち作り方や流れがわからないといった感じの初心者でした。

HTML&CSSモダンコーディングの内容

  • スタンダードレイアウト
  • グリッドレイアウト
  • シングルページレイアウト

この3つのレイアウトを実際に手を動かしながら学べる教本になっています。

本が発売されたのは2015年と古いようにも感じられますが、この本で作成するデザインは今でも十分使われているものなので全然気にする必要はないです。

タイトルの通りモダンでかっこいいサイトをマークアップすることができるのでやっている時もかなりやりがいが感じられます。

HTML&CSSモダンコーディングで学べたこと

スタンダードレイアウト編

floatとclearfloatによるレイアウト崩れになる理由とその対策について図解も含めて非常にわかりやすく解説してくれています。
カードデザインよく見る記事カードのようなデザインを実際に作りながら学ぶことができます。
transformtransformプロパティでできることがそれぞれ図を用いて詳しく説明されていてとてもわかりやすい。
ランキングのスタイル変更セルフコーディング課題としてランキングの見た目を変えるものがあり自分で考え実践することでしっかり理解できる。

グリッドレイアウト編

Masonryの導入可変グリッドレイアウトとして自動的に並べてくれるJavascriptライブラリの使い方を学べます。
transitionメニューリンクにホバーした時にリッチな動きを付けながらアニメーションについて学べます。

シングルページレイアウト編

Webフォントの使い方Google Web Fontsを導入することで使い方や、気をつけるべきことなどについて詳しく学習できます。
CSSクラス命名ポイントクラス名をつける際の注意点やシングルクラス設計やマルチクラス設計についても解説してあります。
display:table作品紹介部分を横並びレイアウトにします。要素の間隔調整まで詳しく記述してあります。
レスポンシブ化実際に作成したページをレスポンシブに対応させるために必要なことが具体的に解説してありとてもためになります。

まとめ

学べることは今回紹介したこと以外にもたくさんあります。
この本はいろんなところで中級者向けという風に書かれていますが、実際には初心者の方でもCSSでこんな風に表現できるのかといったような気付きをたくさん得られると思うのでかなりオススメです!

HTML&CSSモダンコーディングはこんな人にオススメ

こんな人にオススメ!

・0からサイトをマークアップしてみたい!

・制作実績が欲しい

・かっこいいサイトデザインを学びたい

この本で制作したサイトは画像さえ自分で用意したものを使用すれば制作実績にもすることができますので脱・初心者を目指す駆け出しエンジニアは是非トライしてみましょう!