ホームページ作成

【ホームページ作成】画像の表示・活用 (HTML,CSS,JavaScript)

画像の表示・活用 (HTML,CSS,JavaScript)

HTMLやスタイルシート（CSS）、JavaScriptを使った画像の表示・活用方法について解説しています。

画像1つで様々な星レベル(ランク)を表示

複数の画像を使わなくても、たった1つの画像を用意するだけで「3:★★★☆☆」・「4:★★★★☆」のような星レベル（星ランク）を表示させる方法があります。スタイルシートを工夫して簡単に実現する方法をご紹介。

ガイド：西村文宏
画像にツールチップを表示させない方法

IEで画像を表示させると、画像の上にマウスを載せただけで「代替文字」がツールチップとして表示されます。これは画像によっては煩く感じられることがあります。代替文字をツールチップに表示させない方法をご紹介。

ガイド：西村文宏
円グラフをウェブ上で簡単に表示させる方法

ウェブ上で「円グラフ」を表示させたいと思ったことはありませんか？作成したい円グラフのデータをHTML中に1行記述するだけで、簡単に2次元・3次元円グラフを作成・表示できるサービスを使ってみましょう！

ガイド：西村文宏
画像を加工せず、複数の画像に「影」を付加

たくさんの画像に「影」を付けたい場合、画像1つ1つを加工していくのは面倒ですね。「影画像」を1つ用意するだけで、すべての画像に影を合成する方法を使うと楽です。スタイルシートで簡単に合成する方法をご紹介。

ガイド：西村文宏
HTMLファイルそのものの中に画像を埋め込む

HTMLファイルはテキストファイルですから、HTMLファイルそのものに（バイナリデータである）画像を埋め込むことはできない……と思いがちですが、ある方法を使うとHTML内に画像を埋め込むことができます。

ガイド：西村文宏
別窓を開かずに、その場で拡大画像を表示！

サムネイル画像のクリックで拡大画像を表示するページを作る際、ポップアップウインドウを使ったり拡大ページへ移動させたりするのでは操作が面倒です。その場で上から重ねるように拡大画像を表示させてみましょう！

ガイド：西村文宏
角の丸い「タブ」を作る

左上と右上を丸くした「タブ」を作ってみましょう。長方形よりも角が丸い方が「タブ」らしく見え、視覚的に分かりやすいメニューを作ることができます。文字はテキスト・色はCSSで指定する方法なので修正も楽です。

ガイド：西村文宏
リボン部分だけをクリック可能にする

ウェブページの左上端や右上端に表示させた「リボン」を、クリックできるように作り替えてみましょう。透過色部分は除いて、リボンのある部分だけをクリック可能にする方法をご紹介いたします。

ガイド：西村文宏
ページの左上や右上に「リボン」を掛ける

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

ガイド：西村文宏
マウスが載ると画像が変化するリンクを作る

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

ガイド：西村文宏

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

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