画像の表示・活用 (HTML,CSS,JavaScript)(3ページ目)

ウェブページの左上端や右上端に、好きな色・好きな文字を描いた「リボン」を掛けてみましょう。既存デザインの上から簡単にリボンを掛けることができます。何かの記念日などの一時的な装飾に良さそうです。

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

一定秒数ごとに自動的に画像とキャプションが切り替わるスライドショー機能の簡単な作り方を解説。HTMLで画像とキャプションの表示空間を用意し、CSSで装飾を加え、JavaScriptで指定時間ごとに表示内容を切り替えることでスライドショーを作成する方法を、動作サンプルと共にご紹介。一時停止ボタンも作成して、好きな画像をじっくり鑑賞できるスライドショーです。

スタイルシートを使えば、画像の周囲に枠線を引くことは簡単です。では、画像と枠線との間に少し余白を設けたい場合はどうでしょうか？ あなたが今思いついたソースでは、うまくいかない場合があるかも知れません。

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

画像だけを左右の端に寄せるのは簡単ですが、「キャプションを付けた画像」全体を左右の端に寄せたい場合は、どうすればよいでしょうか？ スタイルシートを活用すれば、とってもスマートに実現できます。

ウェブ上に表示した画像の上に文字を重ねる方法を解説。HTMLとCSSを使えば、表示位置(座標)を指定することで画像の上に任意の文字を重ねられます。画像そのものを加工する必要は一切ありません。HTMLで画像と文字を掲載し、スタイルシートで文字の配置を調整するだけの簡単な方法です。表示例に加えて、コピー＆ペーストで使えるサンプルソースと共に解説。

イメージマップの作り方をご紹介。1枚の画像内部に複数個のリンクを設定できるイメージマップ。画像1つを丸ごとリンクにするのではなく、画像内の一部分だけをリンクにしたり、画像の中の座標ごとに移動先の異なる複数のリンクを作ったりできます。HTMLのmap要素とarea要素を使って、画像内を円形や矩形など自由な形で区切るだけです。

棒グラフを作ってみましょう。数値で何かを表す際、グラフがあると見やすいですね。表計算ソフトで作成したグラフを画像にするのは面倒ですし、修正が大変です。HTMLで手軽にできる棒グラフの作成方法をご紹介。

棒グラフといえば、やはり横向きより縦向き。前回の横向き棒グラフに続いて、今回は、縦向き棒グラフの簡単な作成方法をご紹介致します。（棒グラフ用に使える画像素材も用意しました。ご自由にご活用下さい。）