ホームページ作成

【ホームページ作成】文字や画像の動的変更 (HTML,CSS,JavaScript)

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

HTMLやスタイルシート（CSS）、JavaScriptを使った文字、画像の動的な方法について解説しました。

その場で表示が変化する「おみくじ」を作る

ブログのサイドバーやページの端などにでも掲載しておける、小さな「おみくじ」を作ってみましょう。ページの移動や別ウインドウの表示はせず、その場の表示を変化させて結果を見せるため、気軽に掲載できます。

ガイド：西村文宏
任意のページの更新日時をまとめて自動表示

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

ガイド：西村文宏
複数の画像リンクからランダムに1つを表示

たくさんある「お勧め」の中からランダムに1つを選んで表示する機能を作ってみましょう。ページが表示されるたびに、ランダムに選ばれた画像が1つ表示されます。クリックすると画像に対応するページに移動できます。

ガイド：西村文宏
毎日自動更新。「今日のおすすめ」欄を作る

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

ガイド：西村文宏
著作権表記の「年」表示を自動更新する！

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

ガイド：西村文宏
時刻によって挨拶文を変化させる

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

ガイド：西村文宏
JavaScriptでページ最終更新日を自動表示

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

ガイド：西村文宏
スタイルシートで文章の行間を調節する方法

長い文章は適切な行間隔があれば読みやすくなります。HTMLタグとCSSを使ってホームページの文章の行間を自由自在に指定する方法をご紹介。スタイルシートのline-heightプロパティで簡単調節！

ガイド：西村文宏
新年や記念日まで毎日カウントダウン

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

ガイド：西村文宏

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！