●大きめの画像を真ん中に入れるのが一番簡単。
●次のようにしました。まず、スタイルシートに、
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 src="images/yama.jpg" alt="空と山と木を描いた絵">
●src は source のことで、どの画像を入れるかをこの後に " " で囲って書きます。ここでは images/yama.jpg となっています。これは images というフォルダが現在のフォルダである public_html の中にあり、そのなかの yama.jpg という名前のファイルを表示するということです。
●alt は alternative の略でこの画像が何かの原因で表示できないときに代わりに表示する文字列(代替文字列)を示します。画像を表示できないブラウザもありますし、接続回線が貧弱なためにわざと画像を表示しないでブラウズする人もいます。また、視覚障害者のために文字を音声で読み上げる装置がありますが、画像は表現できないので代わりにこの文字列を読みます。ですから、この文字列は必ず入れましょう。そして、画像の内容を適切に表現したものにしましょう。
●src には a タグの href と同様に、URL を書くことで他のサーバーにおかれた画像も指定することができます。これを使えば他人の画像をあたかも自分のものであるかのように表示できますが、著作権の侵害ということも起こり得ますので注意してください。
●すでに述べたことをまとめると img タグの一般的な形は次のようなものです。
<img src="URL" alt="代替文字列">
●リンクで使用したa
タグも<p></p>の中に入れました。img
タグも同様にする必要があります。
ウェブページはh1
やp
などがブロックを作り、それを積み重ねる形でできあがっています。ところがa
やimg
はそれだけではブロックを作りません。あくまでブロック内である範囲に特定の機能をもたせるために使います。ここでも、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 でなくてもよいのですが、習慣で多くの人がそうしています。
●public_html の中に、images フォルダを作ってください。public_html フォルダを表示しておいて、ファイルメニューから[新規作成]−[フォルダ]と選んで、すぐに images と名前をいれます。
●花の画像ファイル akai.jpg を images の中に移動します。
● images フォルダをあらかじめ開いておき、新しくマイドキュメントをもう一度開いて、akai.jpg を images フォルダにドラッグします。( images フォルダを開かずに、images フォルダの黄色いアイコンにドラッグしてもOKです)
●画像の入ったページのファイル名を hana.html にしましょう。新たに作成してもいいのですが、前に作ったものをコピーした方が楽です。iroiro.html を作ったときにもやりました。「span を駆使したページ」に新しいファイルを作る方法がありますから、参考にして hana.html という名前のファイルをつくります。index.html joho.html iroiro.html に続いて4つめの html ファイルになります。もちろん public_html 内につくります。
●htmlファイルですから、もちろんhtmlタグやhead,bodyタグがなければいけません。スタイル部もとりあえずiroiro.htmlやjoho.htmlと同じにしておきましょう。index.htmlに戻るためのリンクや、署名も必要です。
●他のファイルからコピーした人は上記の部分を残して、いらないところは消します。
●スタイルシートに、
p.gazou { text-align: center; }
●body の中に、
<p class="gazou"> <img src="images/akai.jpg" alt="赤い花の写真"> </p>
●これで次のように写真が表示されます。
●これだけでは寂しいので、見出しや、説明など適当に加えて、仕上げてください。
●「もどる」リンクも入れて、index.html にいけるようにし、index.html にも hana.html にいけるリンクを加えて完成です。