※この記事にはプロモーション（Amazonアソシエイト）が含まれています。
Wordpress版サイトができるまでに参考にしたHTMLとCSSの参考書です。数学教員免許取得時代に少しだけHTMLとCSSをいじっていますが、その後ほとんど知識を忘れていたので、初心者とほぼ変わらない状況だった私がこのサイトを作るまでに参考にした本の数々です。 本に入るその前に…私は「Progate」でHTMLとCSSの実践コースを終了しています。（実践コースを学習するには月額980円の有料会員になる必要があります）。詳しくはこちらのリンク集から見てみてください。プログラム関連のリンクの中にあります。
kotatu.wp.xdomain.jp
ProgateのHTML＆CSS学習は書いたプログラムがすぐにブラウザに反映されるので、やっていて楽しいです。会員登録すればすぐに学習には入れ、とくに環境設定が必要ないという強みがあるのですがその分どれだけ進んでも一からどのようにサイトを組み立てていけばよいのか、曖昧になるのでさらなるステップアップには別の学習が必要になりました。スライドショーによる学習も、ぱっと見分かりやすいですが復習しづらいので、やはり参考書による学習は欠かせないのではないか…ということで以下の本を購入したという次第です。
その1「いちばんやさしいHTML５＆CSS３の教本」
↑クリックするとアマゾンのサイトに飛べます。 全編カラーページで見やすく、ホームページ作りで必要な一通りの知識をぎゅっと詰め込んだ本。HTMLやCSSの基礎理論にもざっくり触れたうえで、パンくずリスト、グローバルナビゲーション、お問い合わせフォームの作り方、ソーシャルサイト連携やFTP設定（無料ソフトFILEZILLAの設定方法）にまで触れてくれているので、通読することでホームページ作りの何たるかがわかるような作りになっています。超便利なコードエディタ「Brackets」を知ることができたのもこの本のおかげ。ただこの本はサンプルファイルがかちっとしていて、１からページを作る醍醐味、いろいろいじってオリジナリティを味わいたいと考えていた私にとっては少し物足りず。そのため、本格的なサイトを作るときに必要な部分を参照するという辞書的な使い方をさせてもらいました。
その２「HTML５＆CSS3レッスンブック」
↑クリックするとアマゾンのサイトに飛べます。 かなり分厚い本ですが、内容は読みやすく1週間ぐらい集中すれば読み終わることができます。この本はサイトを本当に1から作ることに特化しているので、オリジナルのサイトを作るときでもどういう風に始めればよいのか、どう進めていけばよいのかという流れを理解することができます。基礎的なデザインを一つ一つ丁寧に解説してくれており、コードを書いた後の流れを理解しやすいです。例えば子要素にfloatを設定する→親要素から浮いてしまう→だからoverflow: hiddenを設定するという過程もちゃんと「浮いてしまった」写真を掲載してくれているので、「浮いてしまうのが自然なんだ。」と理解できるって感じです。流れを理解しながら学習できるということは、今後同じ状況に出くわしたとき、「あ、そういえばあそこに書いてあったな」と思いだしやすいということでもあります。お問い合わせフォームを手軽に作れるCGI RESCUE®の存在を知ることができたのも嬉しかったです（お問い合わせページにも使わせてもらっています）。作成例のサイトデザインは自分でリメイクしやすく、いろいろオリジナル要素を入れて楽しむこともできました。
→この本の作例をいじって作ったのがこちら。趣味の切り紙作品をアップしてます。
papermate.wpblog.jp
その3「HTML５＆CSS3デザインブック」
↑クリックするとアマゾンのサイトに飛べます。 その2で紹介したレッスンブックのレベルアップ版。HTML＆CSSでのサイト段組みを詳細に解説している本です。クリアフィックスの手法をここまで細かく解説している本は珍しいのではないでしょうか。ここを読めば普通のヘッダー、2段組み、フッターデザインがすぐに作れるようになります。後半はレスポンシブWEBデザインに対応したサイトを作る実践編です。ただ、この実践サイトのデザインをつくるのはかなり手間がかかりそう。可変要素も少ないので、あまり作りたいという気にならず、結局最初の段組みデザイン部分のみ参照させてもらいました。
その4「HTML５＆CSS３モダンコーディング」
↑クリックするとアマゾンのサイトに飛べます。 この本は神本です。 実はいくらHTMLとCSS学習しても自分でデザインしているという実感がなかなかわかなかったんですよね。ネットサーフィンで出会う素敵なデザインのサイト、どうやって作っているのか全くぴんと来ない。基礎的なタグのつけ方は理解しましたが、今一歩自分で自由にサイトデザインを操れないもどかしさ。用意されたサンプルファイルどおりのサイトを作るだけでなく、もっと一歩踏み込んだコーディングスキルが欲しいと思っていましたがどんな学習本を使っていいのかわかりませんでした。そんな時であったのがこの「モダンコーディング」の本。アマゾンレビューを見ると初心者が取り組むにはちょっと難しいのかも…しかし、思い切って購入したらこれが分かりやすい！なんだかんだで、最初の段組みのところからちゃんと解説してくれており、今まで勉強した知識の総まとめもできます。またmargin要素の相殺など、初心者がつまずきやすいCSSの何で？にもちゃんと言及してくれている！ そして何より作っていくサイトのデザインが凄く素敵！この一冊（さほど厚くないのに）だけで3つのサイトが作れちゃうんですが、どのサイトもデザインがモダンで、「こういうの作りたい！」って気持ちにさせてくれるんです。サンプルサイトを作っていてこんなに楽しいなんてびっくりです。後半になるとかなり高度なテクニックも出てきますが、難しくても挑戦したいと思わせてくれます。 この本で特に身に就くのが、目を引くホバーエフェクトと疑似要素での表現。疑似要素って今までほとんど使ったことがなかったのですが（クリアフィックスの機能でちょっと触れた程度ですか）、使いこなすことでほんとうにいろいろな表現が可能になります。これとtransitionを交えることで、おもしろいホバーエフェクトが次々に思いつきました。このサイトでも、わくわくしながら疑似要素を挿入させてもらっていますよ。 初心者から一歩進んだHTMLとCSSの学習がしたいと言う人には真っ先に勧めたい本です。これを一冊終えたときの自信の付き方が凄い！です。
