【ホームページ】HTMLとCSSはこの本で勉強しました その2 (Webデザイン篇)

ホームページ
この記事は約5分で読めます。

現在、事務所のホームページは、自分で作っています。
いろいろな本を参考にして、すこしずつ改良を加えています。

スポンサーリンク

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ページを育てていきました。

あとがき

この本は、かなりデザインのセンスがある方が作られた本だと思います。
この本に倣(なら)ってホームページを改造していくと、かなり洒落たデザインになります。

ただし本の後半は、一つ前の章で作られたものに手を加えて、現在の章のものを作るというスタイルになっています。

ということで、順番に読み進めていくことをおすすめします。

コメント

タイトルとURLをコピーしました