ホームページ作成ガイド西村 文宏

背景色を付けたボックス内に画像を配置した際などに、画像の下に余計な空白が見えてしまうことがあります。この余白は、「画像の下端」が「文字のベースライン」に揃えて表示されることが原因です。CSSを使って「画像の下端」を「行の下端」に揃えるよう装飾すれば、謎の余計な隙間を消すことができます。

モバイルファースト設計でCSSを記述すると、古いブラウザ(特にIE8以下)では常にモバイル版デザインが表示されてしまいます。そう割り切っても良いのですが、モバイル版でもCSS3の新しい記述方法を使っているなら、古いブラウザでは表示が崩れてしまうこともあります。その対処方法として(モバイル版の記述よりも前に)「古いブラウザ用のデザイン」を先に記述する「レガシーファースト」なCSSの記述方法をご紹介。

ウェブ上に掲載したサムネイル画像をクリックしたときに、拡大画像を全画面で(ブラウザの描画領域全面に広げて)表示する方法をご紹介。ページ移動することなく拡大画像を全画面で表示できるスクリプト「Intense Images」の使い方を解説。スマートフォンでの操作にも対応。画面と画像との縦横比が異なる場合には、隠れた部分をマウスの動き(またはスワイプ操作)で見ることができる便利な仕様もあってお勧めです。

マンガの「吹き出し」のようなデザインで、ウェブ上のリンクやボタンなどに説明文を表示できるスクリプト「PowerTip」の使い方をご紹介。任意の要素に対して、簡単に吹き出し型のツールチップ(バルーンヘルプ)を表示できます。吹き出しのデザインは9種類、配置は12方向、文字列の装飾は自由自在。望みの吹き出しが作れます。

ウェブページが表示されるたびに、ランダムに選ばれた画像が1つ表示され、クリックするとその画像に対応するページに移動できるような機能を作ってみましょう。たくさんある「お勧めページ」の中からランダムに1つを選んで表示したい場合などに活用できます。短いJavaScriptを使って、複数のリンク画像群から1つをランダムに選んで表示する方法を解説。

Retinaディスプレイなどの高精細な画面で閲覧された場合にだけ高解像度の画像を表示させたり、複数の掲載候補からディスプレイの面積に適したサイズの画像を自動選択して表示させる方法を解説。HTML5で追加されたsrcset属性を使うと、解像度の異なる複数の画像を表示候補として指定でき、表示環境に応じてブラウザ自身が適切な画像を選んで表示に使ってくれます。

CSSで指定した「1px」は、必ずしも液晶画面の「1ドット」とイコールではありません。スマートデバイスなどで使われる高精細ディスプレイでは、「太さ1px」の線が、液晶画面の2ドット以上の幅で表示されることもあります。CSS3には「1pxを何ドットで描画するか」を表すdppx(dots per 'px' unit)という単位もあります。ウェブページを高精細ディスプレイに対応させるための基礎を解説。

指定日・指定時刻になったときに、自動でウェブページの内容を更新する方法を解説。(1)ウェブサーバのcron機能を使って、指定日時に「既存ページ」のHTMLファイルを「更新ページ」のHTMLファイルで上書きする方法と、(2)CGIを使って、現在日時に応じて新旧どちらかのページデータを返すよう切り替える方法などをご紹介。

CSSで装飾対象を指定する「セレクタ」は、「その条件に合致する場合」にだけ装飾を適用するものです。しかし、CSS3で追加された「:not()」を使うと、「指定した条件から外れている場合」に装飾を適用できます。否定の条件を指定できると、複雑な条件をシンプルに記述できることもあり、込み入ったデザインを作る際に便利です。否定疑似クラス「:not()」の使い方をご紹介。

ボックスの背景画像は、実は「枠線(border)の真下」にも描かれています。ところが「描画開始位置」の仕様のため、半透明や点線の枠線を引くと、背景画像がずれているように見えることがあります。CSS3のプロパティ「background-clip」や「background-origin」を使えば、背景画像の表示範囲や開始位置を調節でき、ずれに対処できます。