HTMLで画像にクリック可能な領域（イメージマップ）を作成する方法
画像にクリック可能な領域を作成するには、「イメージマップ」を使用します。イメージマップを活用すると、1枚の画像の中に複数のリンク領域を設定できます。例えば、同じ画像内にある四角形をクリックするとあるWebサイトが開き、三角形をクリックすると別のWebサイトが開く、といった動作を実現できます。
クリック可能な領域は <area> タグで定義し、このタグは <map> タグの中にネストして記述します。また、画像側では usemap 属性を使ってマップと関連付けます。<area> タグで使用できる主な属性は以下の通りです。
| No. | 属性と説明 |
|---|---|
| 1 | alt 領域の代替テキストを指定します。画像が表示されない場合やスクリーンリーダー利用時に役立ちます。 |
| 2 | coords クリック可能な領域の座標を指定します。形状によって指定方法が異なります。 |
| 3 | download ハイパーリンクがクリックされたときに、リンク先のファイルをダウンロードさせます。 |
| 4 | shape 領域の形状を指定します。「rect」（長方形）、「circle」（円形）、「poly」（多角形）などが利用できます。 |
| 5 | target リンク先のURLをどこに表示するかを指定します（_blank で新しいタブ表示など）。 |
サンプルコード
以下のコードを実行すると、HTMLで画像にクリック可能な領域を作成できます。
<!DOCTYPE html> <html> <head> <title>HTML area Tag</title> </head> <body> <img src = /images/usemap.gif alt = "usemap" usemap = "#lessons"/> <map name = "lessons"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map> </body> </html>
実行結果
上記のコードでは、画像内の五角形（poly）の部分をクリックするとPerlのチュートリアルページ、長方形（rect）の部分をクリックするとHTMLのチュートリアルページ、円形（circle）の部分をクリックするとPHPのチュートリアルページが、それぞれ新しいタブで開きます。このように shape 属性と coords 属性を組み合わせることで、画像の任意の場所に自由にリンク領域を配置できます。
-
HTMLで参考文献（Bibliography）を作成する方法
参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト
-
【HTML】textareaタグで複数行のテキスト入力エリアを作成する方法
HTMLで複数行のテキスト入力欄を作成するには、<textarea>タグを使用します。cols属性とrows属性を指定することで、テキストエリアのサイズを自由に調整できます。このタグは主に<form>タグの中で使われ、お問い合わせフォームのコメント欄など、ユーザーが複数行にわたる文章を入力できるようにしたい場合に活用されます。 それでは、<textarea>タグで利用できる主な属性を一覧で確認していきましょう。 属性値説明 autofocusautofocusページ読み込み時に、テキストエリアへ自動的にフォーカスを当てることを指定します。 cols