naichi's lab

3日後の自分(他人)への書き置き

【読んだ】HTML+CSS ワークショップ 手を動かして学ぶWebデザイン【★★★★☆】

読んだ本の感想メモ。

読んだ本

HTML+CSSワークショップ 手を動かして学ぶWebデザイン

HTML+CSSワークショップ 手を動かして学ぶWebデザイン

なぜ読んだ?

unityroomとか作ってて、
フロントエンドの知識が足りないなーと思ってた。

本屋でチラ見してわかりやすそうだったので買いました。

どんな本?

タイトルにもある通り、 手を動かして学ぶ 本。

HTMLの超基礎的な説明から入り、
静的なサイト(パン屋さんのサイト)を作り上げるとこまで経験できる。

かなり細分化されたサンプル(編集前後のコード)が付いてて、 編集->動作確認をほぼすべてのセクションで実践できる。

この本を通しでやったらサイトをゼロから作れるか?といったら難しいと思うけど、 HTML5とCSSの全体像をつかむにはうってつけな気がする。

誤植が3か所ぐらいあったけど、それ以外はおおむね読みやすく、十分満足できる一冊だった。

目次

  • Introduction
    • Webサイトを製作する前に
  • Lesson1
    • Webサイトを製作する準備
  • Lesson2
    • HTMLとCSSの役割を理解する
  • Lesson3
    • HTMLでマークアップを行う
  • Lesson4
    • CSSで見た目を制御する
  • Lesson5
    • HTMLでWebページの構造を作る
  • Lesson6
    • CSSでレイアウトを制御する
  • Lesson7
    • Webサイトを作る
  • Lesson8
    • 問い合わせフォームを作る
  • Lesson9
    • 現場の技術を取り入れる
  • Lesson10
    • JavaScriptで動きを表現する
  • Lesson11
    • SNSや他サービスとの連携

収穫

  • Lesson2
    • CSSのinheritの意味を知った。
  • Lesson4
    • display: table; がちょっと分かった。
    • リストスタイルの変更方法が知れてよかった。
    • 疑似クラスと疑似要素は同じものだと思ってた。
    • テーブルの行ごとに塗り分ける方法を知った。
  • Lesson6
    • float についてやっと理解できた。(気がする)
    • clear:both; したとき margin が効かない理由が分かった。(気がする)
    • clearfix の意味を知った
    • position の使い方がなんとなくわかった
  • Lesson7
    • display: block,inline,inline-block がまだよく理解できてないことが分かった。
    • :last-child 疑似クラスが便利だと思った
  • Lesson8
    • formlabellegend 等が標準HTMLの要素だと知らなかった。

そういうことか!ってのがところどころにあってためになった。

おすすめできる?

こんな人におすすめ

  • HTML5とCSSを覚えたい初心者の人
  • HTML5とCSSの全体像をつかみたい人
  • CSSでレイアウトする基本が知りたい人
  • 読むだけより手を動かした方が覚えられる人

こんな人にはオススメできない

  • 中級者以上(初心者向けなので)
  • HTML4までとHTML5の違いを知りたい人
    • HTML5のことしか書かれていないので、今までとの違いは網羅されてません。

まとめ

ある程度の知識はあったけど断片的だったし結構収穫はあった。

特にCSSによるレイアウトのところなんかは繰り返し練習してマスターしたいと思う。

結構オススメ。

HTML+CSSワークショップ 手を動かして学ぶWebデザイン

HTML+CSSワークショップ 手を動かして学ぶWebデザイン