星座をテーマとしたかわいい系3DMMORPG
画像を表示させるには？
画像を表示させよう
前ページで文章だけのページの作り方はなんとなくわかったかと思います。 次は画像を表示させて見ましょう。
まず準備です。
ページに表示させたい画像を準備します。
↓の画像を右クリックして、保存します。
保存場所は、作業フォルダ内にimageという新しいフォルダを作り、その中にsample1.pngという名前で保存します。
これで画像の準備はできました。
次はソースを書いていきます。
以下の背景が灰色の部分をエディタにコピー＆ペーストして、作業用フォルダにimage.htmlという名前で保存してください。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>サイトのタイトルを書く部分です。</title>
</head>
<body>
<p>
このしたのimg〜という部分が、画像を表示させる為のものなのです。<br/>
<img src="image/sample1.png" alt="画像が表示されないときに代わりに表示される文字"/>
</p>
</body>
</html>
保存したファイルをブラウザ(InternetExplorerやFireFox等)で開いてみましょう。
開くと以下のように表示されると思います。
次からは、どこに何を書けばいいのかを順番に説明していきます。
imgタグ＝画像表示
上のサンプルを見れば分かるように、画像を表示させるにはimgタグを使います。 ただ、今までのtitleやbodyと違って<と>の間になんかごちゃごちゃ書いてありますよね？ その辺を詳しく見ていきましょう。
タグの中にimg以外に「src」や「alt」と書いてありますよね。 これらのことを「属性」といいます。 srcはsrc属性、altはalt属性です。 では、それぞれの意味を説明していきます。
src属性
srcとは、画像のある場所を指定する属性です。
=の後に"と"でくくられたのが、画像のありかを指定した「パス」と呼ばれるものです。
「src="image/sample1.png"」の場合、「image.htmlのあるフォルダの中にあるimageフォルダの中にあるsample1.pngというファイル」という意味です。
じゃあ、1つ上のフォルダにあるファイルはどうやって指定するの？という疑問が出てくるでしょう。
それは「src="../sample1.png"」と書けばいいんです。
「../」が1つ上のフォルダという意味です。
ちなみに、「src="../../sample1.png"」と書けば2つ上のフォルダにあるsample1.pngというファイルという意味になるんですね＾＾
alt属性
altとは、画像が表示されない場合に、その画像の場所に代わりとして表示される文字を指定する属性です。
=の後に"と"でくくられたのが、代わりに表示される文字です。
これは、画像が壊れていて表示されない場合に代わりに文字を表示したり、画像を表示しない設定にしてあるブラウザでページを見た場合に表示されたり、音声読み上げ式のブラウザで画像部分に来たときに読まれる文字といった役割をします。
タグの種類
ちょっと気になっている人がいるかもしれないので補足説明。
bodyタグ等は、<body>と</body>が1セットになっていました。
でもimgタグは</img>というものがありません。
その代わり、<img 〜/>となっているかと思います。
これは現段階ではタグには「<〜>と</〜>で1セット」のものと、「<〜/>のみ」の2種類があるものだと思っていてください。
ちょっと思い出してみると、前のページで説明した改行<br/>も<〜/>のタイプなのですよ。
沢山XHTMLを書いているうちにだんだん分かるようになってくると思います。
次は「リンク」です
画像を表示させる方法が分かったところで、次はクリックすると別のページが表示される「リンク」について説明していきます。
↓の文字の色が変わっている部分のことですね＾＾
こんな風に、クリックすると別のページを表示させる方法は次のページで説明します。