Chapter4：画像を表示してみましょう
■表示する画像を準備します
リンクの作り方の部分ではリンクするファイルが必要でしたね。当然画像の場合も同じように表示する画像が必要です。
今回はひとまずこちらで小さい画像を準備しましたので練習に使って下さい。あ。気に入らなかったら自分で準備するように。また自分で既に準備した画像がある場合はそちらを使って頂いてもかまいません。ただし自分で用意した画像を使用する場合はファイル名の記述部をご自分の用意したファイル名に置き換えてくださいね。
では隣にある絵をコンピューターに保存してください。D&Dでも良いし絵の上でマウスの右ボタンをクリックして出てきたメニューから画像を保存してもよいし。MACもD&Dで保存おっけい。
保存できたら次は保存したデータを今まで作ったデータが保存してある場所と同じ所に移動してください。こちらに書いたとおり順番に進んできた方でしたら "www" というディレクトリの中に既に2つ程ファイルがあると思います。この中に画像ファイルも移動してください。
これで他のファイルがあるディレクトリの中にsample001.jpegというファイルが入ったと思います。 さ。準備はOK？
■画像を表示させてみよう
FC2WEBでは通常の画像を直接参照させる事は禁止されています。バナー以外の画像を表示する場合は原則としてHTMLの中に表示させなければなりませんのでここではその方法の基本を紹介します。
では画像を表示する為のデータを作りましょう。手間かもしれませんが練習だと思って新しく作って下さいね。ファイル名は"artworks.html"として保存しましょう。htmlファイルの作り方はもう解りますね。わからない人は以前の内容を参照してください。ソースは以下の通りです。ゆっくりのんびりで大丈夫ですから内容を間違わないように慎重に書いて下さいね。
|
きちんと入力してファイルを保存したら早速内容を確認してみましょう。下のような感じで表示されていたら大成功です。
|
さて。この中で画像表示を指定しているタグはどれでしょうか？はい。順番に進んでこられた人ならもう解りますね。下の1行がその部分です。
<img src="sample001.jpeg">
これをリンクのときと同じような感じに仕組みを解説すれば下のようになります。
<img src="ファイル指定">
どお？簡単でしょ？
「あれ？でも終了タグが無いじゃんよ？」って思われた方もいるかもしれません。そうです。この場合は終了タグは書かれていませんね。でも無くてくても大丈夫なのです。細かい事を詳細に書けばそうではないのですがとりあえずこの場合は「無くても大丈夫」と覚えておいてくださいね。
＊メモ：終了タグが省略可能なエンプティエレメントについて
今回の場合省略せずに書くと
<img src="sample001.jpeg"></img>
となります。以前説明したように多くのタグは2つ1組で中身をサンドイッチにするのですがこれは中間が空っぽですね。こういったエンプティエレメントは一般的に「空要素」とか「空タグ」とよばれる事が多いようです。後にも出てきますがこういった「終了タグの無いタグ」は他にもいろいろあります。興味のある方はご自分で調べてみてくださいね。
■余裕のある人は応用に挑戦してみよう
インターネットでいろいろご覧になっている人なら「画像をクリックするとリンク先へ移動する」という仕掛けを見かけた事があるのではと思います。これは今回まで説明してきたhtmlファイルの中の「画像とリンクとの組み合わせ」なんですね。
と言う事は。。。今まで覚えた事を組み合わせれば出来るはずですよね。そこで今度は応用編と言うことで前回のリンクと今回の画像表示を組み合わせてうまくリンクが動くようにしてみましょう。さて。あなたはうまくいくでしょうか。
では先程画像を表示するのに製作したファイルがありますよね。ここに表示されている画像をクリックしたら以前製作した"contents.html"というファイルに移動するようにしてみてください。「リンクの仕方がわかんない」とか「もお忘れちゃったよう」ってゆう人は以前のリンクの説明部分を参照しながらでも結構です。間違ってもノープロブレムです。だって大切なのは少しでもいいから自分の力で考えてみる事なのですもの。がんばって！
■応用編の答えの一例
うまく出来ましたか？できなくっても大丈夫。あなたの挑戦はまだはじまったばかり。今から徐々に覚えていけば良い事なのです。では先程の答えの一例を書いてみますので参考にして下さいね。
|
もうそれ程説明は必要ないですよね。見ての通りでリンクを指示するタグの間に文字の代わりに画像を表示するタグを入れただけです。逆にいえば画像をリンクのタグでサンドイッチした事になります。「絵をクリックすると戻ります」ってゆうのは今回は無くても平気です。でも実際に公開する時は一言書いておいてあげると解りやすいのでよいかなーなんて思いますよ。上のソースを表示するとだいたい下のような感じになると思います。
あ。ちなみに下の画像はクリックしても移動しませんよ。単なるイメージです。
|
■ここまでで1段落です
全く知らない段階の人が順番にここまでこなしてきたとしたら結構いろいろと大変だったかもしれません。でも同時になんとなくだけど全体の雰囲気のようなものがおぼろげながらつかめてきたのではないかと思います。実はこの講座はそれが目的です。
HTMLは難しい・わからない・自分で調べる気なんて起きないよ。。。
そんな人がここを見て「ちょっと頑張ってみようかな」って思ってくれたら嬉しいなと思います。実際こういった先入観をとりはらうというのはなかなか難しい事なのかもしれませんけれどね。
細かい事を言えばきりが無いでしょうしそれぞれを詳細に覚えてもらおうとは思っていません。ただ漠然とでもいいから「なんとなくだけど自分にも出来そうかな。」と思ってもらえたなら。それだけでこの講座は大成功なのです。
