文字や画像の動的変更 (HTML,CSS,JavaScript)

1行または数行単位で、「指定した数秒間は静止」→「縦方向にスクロールするアニメーションで次の1行を表示」……を繰り返す「ティッカー」を掲載する方法をご紹介。jQueryを活用したスクリプト「vTicker」を使うことで、ブロックレベル要素をまるごと垂直方向に流せます。

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

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

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

ページを更新しても修正を忘れがちなのが、著作権表記に含まれる「年」の表示です。未だに「Copyright 2005」などと書いてしまっていませんか？この年表記を自動で更新されるようにしてみましょう！簡単に作れます。

朝は「おはよう」、昼は「こんにちは」、夜は「こんばんは」…のように、ホームページ上の挨拶文を、時刻に合わせて変化させてみましょう。JavaScriptを数行書くだけで簡単に実現できます。

各ページの最終更新日を表示しておくと、いつ更新された情報なのかが分かって便利ですね。しかし、手動で書き換えるのは面倒です。そこで、ページの最終更新日を、JavaScriptを使って自動で更新させてみましょう！

CSSを使えば文章の行間サイズ(行の高さ)を簡単に調節できます。行間を詰めることも広げることもできます。広めの行間を指定すれば長文が読みやすくなるでしょう。行間を狭めれば占有空間量が減らせます。CSSのline-heightプロパティを使ってウェブ上に掲載した文章の行間を自由自在に調整する方法を解説。

指定の日まで、あと何日あるのかをカウントダウン表示する方法をご紹介。新年までカウントダウンして、年が明けたらお祝いメッセージを表示するなど、様々に活用できます。