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

リンクの上にマウスを載せると、リンク先ページのサムネイル画像やブックマーク数が「吹き出し」に表示される面白いサービスがあります。実際にアクセスすることなくリンク先ページの外観が見えるリンクが作れます。

画像リンクの上にマウスを載せたときに、リンク画像が別の画像に変化するようなリンクを作ってみましょう。今回は、JavaScriptなどのスクリプトを使わずに、スタイルシートを使って実現する方法をご紹介致します。

サイト内のすべてのページを検索エンジンに漏れなく巡回してもらう方法として、検索エンジンに読ませる専用の「サイトマップファイル」を用意する方法があります。そのサイトマップファイルの作成方法をご紹介！

ある単語が検索サイトで月間にどれくらい検索されているのかが分かれば、その単語の人気度も分かります。複数の単語の検索回数をグラフで比較して、人気のある単語がどれなのかを調べられる面白いツールがあります。

トップページなどで、各コーナーの更新日時が案内されていると便利です。しかし、手動で更新日時を修正するのは面倒です。そこで、SSIを使って自動的に各コーナーの更新日時が表示されるようにしてみましょう！

ニュースサイトなどでたまに見かける箱形のページ移動リンクを作ってみましょう。ただ数字を並べるよりも幅が広くて見やすく、クリックしやすいメリットがあります。画像ではなく文字なので、サイズ変更も可能です。

たくさんある「お勧め」の中から、毎日1つを自動的に選んで表示する「今日のお勧め」機能を作ってみましょう。1日の間、誰が何度見ても同じ内容が表示されます。翌朝9時に自動的に次の項目に変化します。

特定のブラウザに限定してスタイルを適用する方法として、ブラウザのバグを利用した「CSS Hack(ハック)」がよく使われています。IEでのみ表示がおかしくなる場合の対策なども紹介。

リンクの上にマウスを乗せると装飾が変化するデザインはよく使われていますね。では、リンクの上にマウスを乗せたときに、リンクの横や下に矢印を表示させる装飾はいかがでしょうか。選択中の場所が際立つ装飾です。

雑誌などでよく使われる「先頭の1文字を大きくして下の数行に食い込ませる」装飾(ドロップキャップ)を作ってみましょう。スタイルシートを使えば簡単です。first-letter疑似要素・first-child疑似クラスを使います。