HTMLとCSSで作るウェブサイト作成入門

インライン要素（２）改行、画像、リンク

　HTMLタグには、文字を装飾するインライン要素に加えて、改行や画像表示、リンク設定のためのタグがあります。

●改行タグ<br>

　HTML文書内で入力された改行は、ブラウザでは反映されません。文字や画像などを改行して表示するには、<br>タグを使う必要があります(バージョンによっては<br />と書くこともありますが<br>で構いません)。逆に言えば、HTML文書内で改行されていなくても、<br>タグがあれば、ブラウザ上では改行されることになります。<br>はインライン要素ですので、一つの文を改行して表示したい場合や、住所のようなひとかたまりの情報を複数行で書きたい場合に利用します。また、<br>は、次の例で示すように、通常<br>単体で使います(終了タグ</br>が不要)。

[HTMLサンプル]
マズローの説によると、人間の欲求には、<br>自己実現欲求<br>尊厳欲求<br>社会的欲求<br>安全欲求<br>生理的欲求<br>という階層があるという。

●画像を表示する<img>タグ

　HTML文書のコンテンツとして画像を表示させたい場合は<img>タグを用います。<img>タグは、通常単独で用い、閉じるタグ</img>は書きません。基本的な書き方は以下の通りですが、下表のように複数の属性を持ちます。画像ファイルや画像のURLを指定するsrc属性や、画像の代替テキスト(画像がブラウザの設定などで表示されない場合に代わりに表示される説明)を指定するalt属性、画像の周囲の枠線の太さを指定するborder属性、画像の表示サイズ(幅と高さ)を指定するwidth属性とheight属性などがあります。

　例えば、test.jpgというテスト用の画像ファイルを表示させたい場合、以下のような指定が可能です。なお、test.jpgという画像ファイルはこちらからダウンロードできます。

• 単に表示させる場合
  　<img src="test.jpg">
• 幅300高さ200、周囲の枠線なしで表示させ代替テキストを入れる場合
  　<img src="test.jpg" width="300" height="200" border="0" alt="テスト用画像">

●リンクを張る<a>タグ

　　リンクを張るためには<a>タグを使います。ウェブページから別のページへ移動できるようにしたり、ウェブページ内のある場所から別の場所にジャンプできるようにすることができます。画像ファイルをクリックすると別ページにジャンプするようにするのも<a>タグです。基本的には、以下のように記述しますが、下表のようなさまざまな属性があります。

　例えば、次のような指定が可能です。

• 現HTMLファイルから同じフォルダー内のメニューページmenu.htmlにリンクする
  　<a href="menu.html">メニューページ</a>
• 別サイト(Google検索ページ)にリンクする
  　<a href="https://www.google.co.jp/">Google検索ページ</a>
• 画像ファイルtest.jpgをクリックすると別サイト(Google検索ページ)にジャンプする
  　<a href="https://www.google.co.jp/"><img src="test.jpg"></a>
• 別サイト(Google検索ページ)を別ウインドウで開く
  　<a href="https://www.google.co.jp/" target="_blank">Google検索ページ</a>
• ページの先頭にジャンプするリンクを作る
  　<a name="sentou"></a>
  　　　　　：
  　<a href="#sentou">ページの先頭へジャンプ</a>