今日は、WordPressなどの動的なサイトではなく、静的なホームページをHTMLタグを自分で書いて作るとはどういったことなのか。
一連の流れを丁寧に解説されている「WEBデザインとコーディングのきほんのきほん」という書籍を紹介する。
どんな人向けか
この本にはWordPressの事は一切書かれていない。
しかし例えばWordPressなどの動的なサイトを、ブログ形式ではなくホームページ形式で自分で作ることは、オリジナルのテーマを作成することと同じだ。
そしてテーマを作成するためには静的なサイトをHTMLを自分で書いて作成する知識は後々必ず必要となってくる。
本書では作業全体の流れが通して紹介されているのでHTMLのコーディングをざっくりと学ぶにはうってつけの本だ。
また前半ではデザインに必要となるベーシックな知識が紹介されていて、ついでというには十分すぎるほど参考になる。
もちろん、WEBデザイナーを今から目指す人にも大変参考になるだろう。
ここまで全体の工程を一連の流れで紹介・説明している書籍はなかなか他では見当たらない。まるでWEBデザイン会社に1週間体験入社したかのような内容だ。
一連の作業の流れが通してわかる内容
本書では、題材となっているのはとある企業サイトのトップページ１枚分だ。
フォトショップでグラフィックデザインを起こすところから始まり、デザインが完成したトップページをテキストエディタだけでHTMLを組み上げる。
そしてCSSでデザインをすべて再現させ、最後にはjavascriptまで追加して、トップページを完成させている。
前半では、デザイナーのためのベーシックな知識がどんなものかを具体的に紹介されている。
色の組み合わせ方やフォント、文字レイアウトの効果など、特にデザイナーを目指していない人でもここで紹介されている内容に目を通しておくだけでも、デザイナーがどんな観点でデザインしているのか大変に参考になるだろう。
また、WEBページ特有のデザインの観点も紹介されている。
よく見たことのあるボタン配置が分かりやすいという概念のシグニチャーデザインとか、最近のフラットデザインという平面的なデザイントレンドがあることなども説明されていて大変参考になる。
中盤ではフォトショップを操作しながらトップページをデザインしていく手順が紹介されている。
そのノウハウの中での注目ポイントは、ここで作ったデザインから後工程でwebページを作る際に利用するアイコン画像を取り出して使えるように、全てレイヤーを分けて作成しておくという部分だ。
本の中では淡々と作業の手順が書かれているが、実際にはこのアイコンは後で使うから別レイヤーにしておこう、などと想定しながらデザインを作成していく事になるだろう。
HTMLのコーディングはそれほど難しくない
後半では、記事のテキストを流し込みながら、具体的にhtmlコーディングしていく。
ここでは、コーディングとは要するに文章などの部分を単にマーキングしていくための作業だという事がよくわかる事例となっている。
デザイン上のレイアウトの指定はどうするかというと、マーキングされた部分に対して、後からCSSを使って行うのだ。
HTMLコーディングは意外とシンプルな考え方なのでそれほど難しいものではなかったのだ。
＜div＞とか＜section＞などそれだけではレイアウトの機能を持たないものばかりだが文章や画像をどんどんと区分けしていく。
CSSは具体例で解説されている
CSSついては、例えば一般的なCSSのリファレンス本を見ても、そこにはありとあらゆる機能が全て載っていて、どれをどう使ったらいいのか見当がつかないことが多い。
しかしこの本では、さきほどフォトショップで作成したデザイン画面をトップページを再現するためにはCSSのどの機能を使えばいいのかが、具体例に解説されていてかなり実践的だ。
例えば、円形の図形くらいであれば画像を配置しなくてもCSSで直接表示できたりする。
また、透明レイヤーを重ねたり、グローバルメニューのデザイン配置の具体例もある。メニューなどは、複数の同じアイテムを、横並びの配置するfloat:LeftというCSSの属性を使って自由にレイアウトすることが可能だ。
本書は、ページ作成の全体像とその膨大な量のテクニックが網羅されているので一度にすべて理解したり吸収したりしなくても、必要に応じて何度も見返したり調べたりすると何度でも発見や勉強になる良書なのだ。
マイナビBooksでは書籍版と電子書籍版が販売されていて、電子書籍はPDF形式となっているので自由度が高いかも・・・。
電子書籍PDF版はこちら