画像のあるページ

大きめの画像を真ん中に入れる

大きめの画像を真ん中に入れるのが一番簡単。

空と山と木を描いた絵

次のようにしました。まず、スタイルシートに、

p.gazou { text-align: center; }

BODY の中に、

<p class="gazou">
<img src="images/yama.jpg" alt="空と山と木を描いた絵">
</p>

では少しずつ説明します。

画像を用意する

Webに使える画像のフォーマット(形式)は、.jpg .gif .png の3つです。PaintShopPro の .psp 形式はそのままでは使えません。.psp のファイルは .jpg などに変換して使用します。その方法はあとで説明します。

とりあえず、yama.jpg という画像ファイルがあるとしましょう。

画像には img タグ

画像を入れるには<img>タグを使います。これは終了を表す</img>はなく、単独で使用されます。

<img>タグの中にスベースで区切っていろいろな属性を指定しています。

<img src="images/yama.jpg" alt="空と山と木を描いた絵">

src は source のことで、どの画像を入れるかをこの後に " " で囲って書きます。ここでは images/yama.jpg となっています。これは images というフォルダが現在のフォルダである public_html の中にあり、そのなかの yama.jpg という名前のファイルを表示するということです。

alt は alternative の略でこの画像が何かの原因で表示できないときに代わりに表示する文字列(代替文字列)を示します。画像を表示できないブラウザもありますし、接続回線が貧弱なためにわざと画像を表示しないでブラウズする人もいます。また、視覚障害者のために文字を音声で読み上げる装置がありますが、画像は表現できないので代わりにこの文字列を読みます。ですから、この文字列は必ず入れましょう。そして、画像の内容を適切に表現したものにしましょう。

src には a タグの href と同様に、URL を書くことで他のサーバーにおかれた画像も指定することができます。これを使えば他人の画像をあたかも自分のものであるかのように表示できますが、著作権の侵害ということも起こり得ますので注意してください。

img タグの一般的な形

すでに述べたことをまとめると img タグの一般的な形は次のようなものです。

<img  src="URL"  alt="代替文字列">

ブロックに入れる

リンクで使用したaタグも<p></p>の中に入れました。imgタグも同様にする必要があります。

ウェブページはh1pなどがブロックを作り、それを積み重ねる形でできあがっています。ところがaimgはそれだけではブロックを作りません。あくまでブロック内である範囲に特定の機能をもたせるために使います。ここでも、pタグで挟んでブロックとします。

<p>
<img src="images/yama.jpg" alt="空と山と木を描いた絵">
</p>

スタイルシートでセンタリングする

pタグで囲むだけでは他のpタグの部分と同様に左寄せになります。スタイルシートを使って画像のある部分だけセンタリングするために、class を使います。名前はなんでもいいのですが、ここでは gazou にしておきます。

<p class="gazou">
<img src="images/yama.jpg" alt="空と山と木を描いた絵">
</p>

さらに、スタイルシート(HEAD部のstyleタグのところ)に次のように書きます。

p.gazou { text-align: center; }

p.gazou は class= の後に書いた gazou と対応しています。p のなかでも gazou という class のものについての指定をするという意味です。{ }の中が指定の内容でtext-align:center; はセンタリングの指定です。

やってみましょう

画像の用意

とりあえず、.jpg の形式の画像を用意してやってみましょう。もしなければ、下の「赤い花の写真」の上で右クリックし、「名前を付けて画像を保存」を選んで、マイドキュメントに保存しておきます。

以下用意した画像が、akai.jpg であったとして説明します。

images フォルダを作る

画像ファイルは多くなると整理がつかないので、始めからフォルダをつくってそこに入れることにします。名前は必ずしも images でなくてもよいのですが、習慣で多くの人がそうしています。

public_html の中に、images フォルダを作ってください。public_html フォルダを表示しておいて、ファイルメニューから[新規作成]−[フォルダ]と選んで、すぐに images と名前をいれます。

花の画像ファイルを移動する

花の画像ファイル akai.jpg を images の中に移動します。

images フォルダをあらかじめ開いておき、新しくマイドキュメントをもう一度開いて、akai.jpg を images フォルダにドラッグします。( images フォルダを開かずに、images フォルダの黄色いアイコンにドラッグしてもOKです)

新しいファイル hana.html を作る

画像の入ったページのファイル名を hana.html にしましょう。新たに作成してもいいのですが、前に作ったものをコピーした方が楽です。iroiro.html を作ったときにもやりました。「span を駆使したページ」に新しいファイルを作る方法がありますから、参考にして hana.html という名前のファイルをつくります。index.html joho.html iroiro.html に続いて4つめの html ファイルになります。もちろん public_html 内につくります。

hana.html ファイルの基本的部分

htmlファイルですから、もちろんhtmlタグやhead,bodyタグがなければいけません。スタイル部もとりあえずiroiro.htmlやjoho.htmlと同じにしておきましょう。index.htmlに戻るためのリンクや、署名も必要です。

他のファイルからコピーした人は上記の部分を残して、いらないところは消します。

hana.html に画像を入れる

スタイルシートに、

p.gazou { text-align: center; }

body の中に、

<p class="gazou">
<img src="images/akai.jpg" alt="赤い花の写真">
</p>

これで次のように写真が表示されます。

赤い花の写真

これだけでは寂しいので、見出しや、説明など適当に加えて、仕上げてください。

「もどる」リンクも入れて、index.html にいけるようにし、index.html にも hana.html にいけるリンクを加えて完成です。


聖愛高等学校
http://www.seiai.ed.jp/