前回のブログで『HTML&CSSとWebデザインが1冊できちんと身につく本』を紹介しました。
HTMLとかCSSとか単体で勉強するんじゃなくて、デザインも含めて勉強したい、という人向けにご紹介しました。
実際に作ってみると、
・フルスクリーン
・シングルカラム
・2カラム
・グリッド
といったレイアウトのパターンが学べてかつ
・レスポンシブデザイン
・問い合わせフォーム
・表や地図の埋め込み
といったことまで学べる本になっていました。
お得感のある本でした。
今回ご紹介する本も、同じような本です。
以下の3つのレイアウトを学ぶことができる本です。
・スタンダード
・グリッド
・シングル
本のタイトルは『HTML5/CSS3モダンコーディング』です。
本記事の内容
・本の紹介
・実際にどのような知識とスキルが得られるのか
・どうしたらよいか?
■本の紹介
一言でどのような本かと言うと、
・HTML5とCSS3を学びたい方を対象
・実際のWebページを作成
・3つのレイアウトを作成
・各機能のわかりやすい解説
といった特徴があります。
PART1 スタンダードレイアウト
いわゆるWebサイトに一番多く見られるベーシックなレイアウト、つまりスタンダードなレイアウトについて学ぶパートです。
ここで学ぶことができるのは・・・
・HTML5の新要素
・アウトライン
です。
PART2 グリッドレイアウト
ブラウザの横幅に合わせて表示されている内容の箇所が自動で移動するという可変のグリッドレイアウトについて学ぶパートです。
グリッドレイアウトと言われても、きっとピンとこないですよね。
見てもらった方が言葉で説明するよりも視覚的に一瞬で理解できると思いますので、後ほど掲載するURLで確認してみてください。
ここで学ぶことができるのは・・・
・可変グリッドレイアウトライブラリ
・CSSアニメーション
です。
PARET3 シングルページレイアウト
段組みがされていない一つのページで構成されているページで、スマートフォンにも対応したシングルレイアウトについて学ぶパートです。
いわゆるレスポンシブデザインといわれるレイアウトですね。
PCで見る時とスマートフォンで見る時でレイアウトが変わるページですね。
ここで学ぶことができるのは・・・
・レスポンシブWebデザイン
・Webフォント
です。
これら3つのレイアウトをそれぞれのレイアウトで用いられている技術の解説とともに、実際にコーディングをして作ってみて学ぶ、という構成になっています。
実際に手を動かしてコーデイングをすることによって、理解が深まりスキルとしても身につくという訳です。
前回もお伝えしましたが、この本に載っている3つのレイアウトのファイルをダウンロードすることができますが、コピペしてできた!としないことです。
間違ってもよいので、一から一文字ずつ自分でキーボードをたたいてプログラムを作っていきましょう。
本の構成は以下のようになっています。
Part0 イントロダクション
Part1 スタンダードライアウト
Part2 グリッドレイアウト
Part3 シングルページレイアウト
APPENDIX
■実際にどのような知識とスキルが得られるのか
この本を通して得られる知識とスキルは以下のようなものです。
1.Google Chrome のデベロッパーツールの使い方
2.HTML(HyperText Markup Language)の構成の理解
3.CSS(Cascading Style Sheets)の様々な機能
4.各レイアウト内での凝ったデザインの使い方
5.レスポンシブデザインの対応
前回の本もとてもわかりやすかったのですが、今回のこの本もとてもわかりやすいです。
特にわかりやすいのは、各レイアウトについての特徴やどのように構成されているのかといった部分を各レイアウトの最初に解説していることです。
よくあるのは、機能の説明ばかりになってしまう本です。
なんでもそうですが、全体を理解・把握せずに細部にだけフォーカスしてしまうと、なんだかよくわからないという結果になってしまいます。
この本は最初に全体像を解説し、順番に少しずつ詳細の説明・解説になっているのでスッと頭に入ってきます。
コーディングに関してもいきなり全部の内容を見せて説明せず、まずはベースとなる部分を記載して解説し、その次に各部分の解説を一つ一つしていくので、とてもわかりやすい構成になっています。
一度にすべてを理解することは難しいとは思いますが、じっくり時間をかけて読み込んでコーデイングしていけば、ちゃんと理解しちゃんとスキルが身につくと思います。
■どうしたらよいか?
まず、この本に関するフォルダを作成しましょう。
そのフォルダの中に自分で打ち込む用(コーディング用)のフォルダとダウンロードしてくるフォルダを分けて作成しましょう。
作成したら、この本に記載されているダウンロードページからデータをダウンロードしましょう。
本に記載されているペースとなるHTMLとCSSを一文字ずつ打ち込んで作っていきましょう。
画像やreset.cssはダウンロードしたフォルダから打ち込み用フォルダにコピペします。
本に記載されている通りに打ち込んでもきっと上手くいかない時が何度もあるでしょう。
その時は、ダウンロードしたファイルと自分が打ち込んだファイルを1行1行、見比べて何が違うのかを探し、違う箇所が見つかったら自分の打ち込んだファイルを修正して実行してみましょう。
上記のように進めていけば、必ず最後にはサイトができあがるでしょう。
時間はかかるかもしれませんが、あきらめずに頑張ってください。
必ずできるはずです。
ちなみにですが、私自身がコーディングした結果です。
このようなページが作成できます。
あきらめずに頑張っていきましょう!