ホームページ作成
文字や画像の動的変更 (HTML,CSS,JavaScript)
HTMLやスタイルシート(CSS)、JavaScriptを使った文字、画像の動的な方法について解説しました。
記事一覧
-
数秒ごとに1行ずつ縦スクロールするティッカーを作る
横方向のスクロールだと一気には読めないよく見かける「流れる文字列」文字が流れる電光掲示板のことを「ティッカー」と呼びます。文字が左右に流れたり、上下に流れたりします。鉄道や空港などで使われているほか、街中でも見かけます。ウェブ上では、IEの独自拡張として「marquee」(マーキー)という要素...続きを読む
-
任意のページの更新日時をまとめて自動表示
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace; } div.samplearea { ...続きを読む
-
複数の画像リンクからランダムに1つを表示する方法
お勧め情報(画像)の中からランダムに1つを選んで掲載する目的などに複数の画像リンクからランダムに1つを選んで表示するウェブページが表示されるたびに、ランダムに選ばれた画像が1つ表示され、クリックするとその画像に対応するページに移動できるような機能を作ってみましょう。たくさんある「お勧めコーナー...続きを読む
-
毎日自動更新。「今日のおすすめ」欄を作る
※この記事は、前回の記事「複数の画像リンクからランダムに1つを表示」がベースになっています。 まだお読みになっていない場合は先にそちらをどうぞ。自動更新する「今日のおすすめ」欄を作るたくさんある「お勧め」の中から、毎日1つを自動的に選んで表示する「今日のおすすめ」欄を作ってみてはいかがでしょう...続きを読む
-
著作権表記の「年」表示を自動更新する!
著作権表示の「年」の修正は忘れがちページの末尾に著作権表示(Copyright表示)を記載している方々も多いと思います。 たとえば、All Aboutの各ページには、末尾に次のような記載があります。Copyright © 2001-2006 All About, Inc. All rights...続きを読む
-
時刻によって挨拶文を変化させる
時刻に応じて表示メッセージを変化させたい夜にアクセスすると「夜遅くに来てくれてありがとう」、朝にアクセスすると「朝早いですね」などと、時刻に応じた挨拶文が表示されるホームページを見たことはありませんか?このような、アクセス時刻によって変化するメッセージは、JavaScriptを使えば簡単に作る...続きを読む
-
JavaScriptでページ最終更新日を自動表示
p.samplearea { background-color: #f0f0f0; border: 2px #eeeeee solid; padding: 0.5em; } b.code { font-family: monospace; } strong.line { font-weight...続きを読む
-
スタイルシートで文章の行間を調節する方法
スタイルシートを使えば、文章の行間を詰めたり広げたりできる行と行の空間量を調節したい長い文章は、行間が狭く詰まっていると読みにくく感じられてしまいます。しかし、1行ごとに空行を挟むほど行間を広げてしまっても、やはり読みにくくなるでしょう。文章量や1行の幅などを考慮した適切な行間を設定することで...続きを読む
-
新年や記念日まで毎日カウントダウン
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace; } div.samplearea { ...続きを読む