前回のブログで『HTML5/CSS3モダンコーディング』を紹介しました。
HTML5とCSS3を同時に勉強したい、という人向けにご紹介しました。
以下の３つのレイアウトを実際に作ってみるという内容です。
・スタンダードレイアウト
・グリッドレイアウト
・シングルページレイアウト
もちろん、スマートフォン対応についても学ぶことができます。
スタンダードレイアウトとシングルページレイアウトは、通常どの本でも掲載されているレイアウトなので、今まで紹介してきた本と大きな差異はありません。
この本の珍しい点は、グリッドレイアウトというレイアウトを学ぶことが出来る点です。
様々な大きさのボックス（四角いエリア）をランダムなレイアウトで表示できるものです。
MasonryというJavaScriptライブラリを使います。
その手法について学ぶことができる点が他の本との大きな違いです。
どのようなレイアウトかは前回のブログに私がコーディングしたものを掲載していますので、ご確認ください。
さて、今回ご紹介する本も基本的にはHTML5とCSS3を学ぶことができる本です。
学ぶことができる内容は以下の４つです。
・ブログ・ニュース系サイトのコンテンツページ
・ブログ・ニュース系サイトのトップページ
・ビジネスサイト風のトップページ
・ビジネスサイト風のコンテンツページ
本のタイトルは『HTML5&CSS3デザインブック』です。
本記事の内容
・本の紹介
・実際にどのような知識とスキルが得られるのか
・どうしたらよいか？
■本の紹介
この本から学ぶことができる最大のメリットはCHAPTER1の「Webページにおける段組み」です。
このCHAPTER１だけで実に43ページものページ数を使って、Webページのレイアウト、デザインについて解説してくれているのです。
この章を読むだけでも、この本を購入する価値があります。
この章の内容を完全に理解すれば、今後どのようなレイアウトのWebページでも作ることができるようになるでしょう。
本の内容は以下の通りです。
CHAPTER1 Webページにおける段組み
Webページにおけるレイアウト、デザインを解説してくれている章になります。
必見の価値のある章です。
CHAPTER2 Webページを作成する準備
CHAPTER3以降で実際に作成していくWebページのひな型やパーツを準備する章です。
CHAPTER3 ブログ・ニュース系サイトのコンテンツページ
ブログやニュースなどの記事を掲載するページについて学ぶ章になります。
いわゆるスタンダードなレイアウトですが、記事の掲載するページに必要なパーツをどのように並べて表示するかを学ぶことができます。
CHAPTER4 ブログ・ニュース系サイトのトップページ
CHAPTER3の各記事のページに対して、それらをまとめるトップページについて学ぶ章になります。
各記事の概要などが並べられて表示するパーツをどのように並べて表示するかを学ぶことができます。
CHAPTER5 ビジネス風サイトのトップページ
ここからは内容が変わり、CHAPTER5 と CHAPTER6 はいわゆる会社のホームページについて学ぶ章になります。
そのうち、CHAPTER5 はトップページ、つまり会社のホームページの顔に当たる部分について学ぶ章になります。
どのようなパーツをどのように配置して表示するかを学ぶことができます。
CHAPTER6 ビジネス風サイトのコンテンツページ
ここでは、会社のホームぺージの中の各個別のページ、例えば会社紹介などの各ページについて学ぶことができる章になります。
本の構成は以下のようになっています。
CHAPTER1 Webページにおける段組み
1-1 Webページにおける段組み
1-2 ボックスを横に並べる
1-3 ボックスを分割する
1-4 ボックスの横幅を指定する
1-5 ボックスの並び順を指定する
1-6 レスポンシブWebデザインを設計する
CHAPTER2 Webページを作成する準備
2-1 パーツの準備
2-2 Webページの準備
CHAPTER3 ブログ・ニュース系サイトのコンテンツページ
3-1 レイアウトの基本構造を作る
3-2 ボックスの中にコンテンツを入れる
3-3 レイアウトの調整を行う
3-4 レスポンシブWebデザインの調整を行う
3-5 パーツの追加と修正
3-6 ナビゲーションバーとフッターの横幅をいっぱいに表示する
CHAPTER4 ブログ・ニュース系サイトのトップページ
4-1 トップページの作成
4-2 パーツの追加と修正
CHAPTER5 ビジネス風サイトのトップページ
5-1 レイアウトの基本構造を作る
5-2 ボックスの中にコンテンツを入れる
5-3 レイアウトの調整を行う
5-4 レスポンシブWebデザインの調整を行う
5-5 パーツの追加と修正
5-6 ナビゲーションメニューをトグル型にする
CHAPTER6 ビジネス風サイトのコンテンツページ
6-1 コンテンツページの作成
6-2 パーツの追加と修正
■実際にどのような知識とスキルが得られるのか
この本を通して得られる知識とスキルは、ズバリWebページのレイアウトの理解と作成スキルです。
Webページの作成で何が一番難しいのかというと、横の情報を並べることです。
縦に情報を並べることは、HTMLのコーディングが上から順に記述していくため視覚的に理解しやすいのであまり苦労はしません。
ところが、縦にコーディングしているものを横に並べて表現することは、視覚的に見ているものと表現しようとしているものが違っているので、とても理解しづらいのです。
その理解しづらい横に情報を並べる方法をCHAPTER1で詳細に解説してくれているのがこの本なのです。
CHAPTER3以降の実践部分ももちろんとても勉強になるし、とても良い内容なのですが、CHAPTER1がなにしろ秀逸なので、この章だけでも読む価値があります。
CHAPTER1 と CHAPTER2 でレイアウトの表現方法を理解し、実践に向けた準備をして、CHAPTER3 以降でその理解したことを実際に作ってみる、という流れです。
今まで紹介してきた本では、とにかく実践しながら理解していくことに重点が置かれていたと思いますが、ここらでなぜそう表現できるのかということをじっくり深く理解して、知識とスキルをちゃんと定着させることも良いと思います。
分厚くて、簡単には終わらないかもしれません。
実際私も1週間では終わらず2週間かかってしまいました。
そのため先週のブログの更新ができませんでした・・・（泣）。
■どうしたらよいか？
まず、この本に関するフォルダを作成しましょう。
sample 用のフォルダを作成し、本のHPから見本用としてダウンロードしましょう。
そして自分がコーディングする用のフォルダを別途作成します。
画像は見本用からコピぺします。
本に記載されている内容を１ページずつ一文字ずつ打ち込んでいきます。
本に記載されている通りに打ち込んで動かしてみると、ちゃんと動きます。
当たり前・・・なのですが、自分が間違えずにちゃんと打ち込むと動くのです。
これってスゴクないですか。
再現率１００％なんですよ。
つまり、誰でも同じプログラムを同じように打ち込めば、作ることができるのです。
誰にでもできるそのスキルは誰もが持っているのです。
ただ、理解しなければいけないことはたくさんあるので、途中でわからなくなって諦めてしまったり、好き嫌い、向き不向きはあるので、誰もがプログラマーやシステムエンジニアになれるかと言われるとなれるとは言い切れません。
でも、普通の人が普通にキーボードを打つことができれば、能力としては充分可能なのです。
プログラマーとしてのスキルを身に付ける可能性は誰もが十分持っているのです。
そこだけは理解しておいてください。
さて、ちなみに私自身がコーディングした結果です。
このようなページが作成できます。
あきらめずに頑張っていきましょう！
