現在、事務所のホームページは、自分で作っています。
いろいろな本を参考にして、すこしずつ改良を加えています。
Webデザインの向上
前回、紹介した本のお蔭で、ホームページの体裁を整えられました。
ただその後、フラットなデザインにこだわり過ぎたので、無骨でとっつきにくい感じのホームページになっていました。
もうすこし、おしゃれな感じのホームページにしたくなって選んだのが「HTML&CSSとWebデザインが 1冊できちんと身につく本」です。
本の表紙から中身までおしゃれ
まず、この本を手にとって驚いたのは、本の表紙のデザインが洒落（しゃれ）ているということです。
さらに本を開いてみると、中身も色使いが洒落ています。
本の題名の中に、デザインと入っているからには、やっぱりこれぐらいお洒落じゃないと、信用できません。
この本の構成
この本は、Chapter1 から Chapter4 までの間に、Webサイトに関する基本的な知識とWebサイトを構築するための環境について説明しています。
また、Chapter5 以降は、いろいろなタイプのページを実際に、HTML と CSS を手直ししながら制作するという構成になっています。
画像や動画などを用いた、きれいな Webサイトを作りたい人に向いていると思います。
Webサイトの開発環境
このとき構築した、エディタ「Brackets」とブラウザ「Google Chrome」の開発環境は、いまでも便利に使っています。
普通、HTMLファイル や CSSファイルは、エディタで修正を保存しないと、ブラウザで実際の表示を確認できません。
しかし、この開発環境の場合、エディタで記述に修正を加えると、リアルタイムでブラウザの表示が変わります。
しかも、この素晴らしい機能は、無料で提供されています。
Webサイト開発に欠かせない環境
さらに、エディタで修正した記述を、取り消し（アンドゥー）さえすれば、すっかり元の状態に戻ります。
ファイルの保存をしていないので、更新日付も変わりません。
また、ブラウザの検証機能を使えば、margin や padding をはじめとして、様々なプロパティの値を確認したり、プロパティの使用を止めたとき、表示がどうなるか検証したりできます。
この本を読まなければ、今でも Webサイトの構築で四苦八苦していたことでしょう。
この本で初めて知ったこと
この本では、特につぎのようなことを新しく勉強できました。
- clearfixクラスを使った、floatプロパティの使用による回り込みの解除
- グリッドレイアウト（画面を等分割し、それに合わせてレイアウトする手法）
- YouTube動画をホームページへ埋め込む方法
- viewport に応じて、サイズが変わる単位「vw」
clearfixクラスはとても便利ですので、float を解除するのに頻繁に使っています。
また、単位「vw」は、モバイルで文字サイズを指定するときに頻繁に使います。
レスポンシブ対応も
なおこの本にも、レスポンシブ対応の仕方が説明してあります。
もうそろそろ、レスポンシブ対応を考える時期でしたので、この本に倣（なら）って、レスポンシブ対応にしてみました。
ただ、本を読んだからといって、すぐさまレスポンシブに対応した Webページは、できあがりません。
このあと、何度も何度も手直しを加えながら、Webページを育てていきました。
あとがき
この本は、かなりデザインのセンスがある方が作られた本だと思います。
この本に倣（なら）ってホームページを改造していくと、かなり洒落たデザインになります。
ただし本の後半は、一つ前の章で作られたものに手を加えて、現在の章のものを作るというスタイルになっています。
ということで、順番に読み進めていくことをおすすめします。
コメント