「HTMLとCSSで基礎から学ぶWebデザイン」

2012-05-04 / スキルアップ / 0 Comments

「もう、勘でデザインするのは終わりにしよう。」

この帯に惹かれてこの本を手に取りました。

「HTMLとCSSで基礎から学ぶWebデザイン」
「HTMLとCSSで基礎から学ぶWebデザイン」(アマゾンで見る)

少しでもHTMLやCSSに心得があると、知っているテクニックでWebページを作ってしまうことが多いものです。レイアウトの仕方、色の使い方とともにHTMLとCSSを体系的に勉強したいと思っていましたが、本屋で探すと

  • HTMLとCSSの専門書(コテコテの技術書)
  • CSSをバリバリに使ったデザイン書

のどちらかが多いのです。

この本は、私にとっては”いい感じ”に「技術専門書」と「デザイン指南書」の要素が入っていました。帯には「リファレンスを使う前に読んで欲しい、Webデザインの心得」と書いてありますが、そのとおりの内容です。

残念なのは、本書にいいことがたくさん書いてありますが、後でなかなか探しづらいところでしょうか。索引もありますが、思ったことを後で探せるかどうか…。

HTMLとCSSの進化とスマホの登場

ここ数年でHTMLはバージョン5になり、CSSはバージョン3へと大きく進化しています。でも、必ずしもブラウザの対応が足並みが揃っているわけではないので、これまでの常識で考えると、「古いブラウザを使っている人でもちゃんと読めるように、互換性のあるHTMLとCSSを使って書きましょう!」と対応するのが正しい道だと思います。

ところが、iPhoneを代表とするスマホの登場で大きく変わりました。iPhoneやAndroidに搭載されているブラウザは、最先端の技術が入っていますから、PC上で古いブラウザを使うと見劣りするのです。

でも、大丈夫です。同機能を持ったブラウザをPCにインストールすれば、遜色なく使えるようになります。有名なところで下記の3つがあります。

 アップル Safari(サファリ)
 グーグル Chrome(クローム)
 モジラ  Firefox(ファイアーフォックス)

もしどれを使えば良いか迷うなら、iPhoneを使っている人ならSafariを、Androidを使っている人ならChromeを使うのが良いのではないかと思います。同じブラウザを使う最大のメリットは、PCとスマホでブックマークを共通にできることです。PCとスマホのように機械が違っても、登録したブックマークが共有できるのです。これは意外と重宝します。

※Safariでは、iCloudを有効にし、「ブックマーク」を共有する設定にします(iCloudを設定する方法」を参照)。Chromeでは、メニューから「Chromeにログイン」をします(Chrome へのログインを参照)。

HTML5とCSS3ならこんな表現も

本書で学んだことですが、HTML5とCSS3を使うと、段組を使って読みやすさを向上させることができます。ヘッダーの円い角を作るのも簡単です。

文字の装飾も簡単で、影つきの文字もできるんですね。

最新のブラウザの性能に頼りすぎたWebページを作ると、古いブラウザで見るととんでもないことになりますので要注意でしょうが、新しい要素もところどころ取り入れていきたいものです。

Read More