［ＨＰを作ろう！］ ☆第１４回☆
こんばんは、ＴＨ６９です。
先程 pink さんからメールがあり、近々自分のＨＰを公開するそうです (^o^)／
自分でかなり勉強されたのでしょうが、すごい事だと思います。
私の［ＨＰを作ろう！］が役に立てて、こんなにうれしい事はありません。
皆さんも、自分でどんどん勉強して下さってもかまいませんよ。
そんなに急がずにゆっくりと勉強したいという方は、［ＨＰを作ろう！］を気長にお待ち下さいね (^ ^;
では、第１４回を始めましょう。
画像についてはしっかりとやっておいた方がいいので、今回も画像の練習をします。
今まで勉強した事だけで出来る、簡単なページレイアウトをやって見ましょう。
それでは［test2.html］のページを開いて、そのソースを表示させて下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
画像の練習
ようこそ！ 私のホームページへ
今、画像を表示する練習をしています。
画像が表示されると、グッとページらしくなりますね。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のようになっていますね。
最初に「マウント・クック」の画像に説明文を付けてみましょう。
『alt="Mt.Cock">』と『
』の間に、で
『Kea Point からのＭｔ．クック』と記入して下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
Kea Point からのＭｔ．クック
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のようになりますね。
上では、見やすいように２行になっていますが、
タグは最後にあるだけなので、
実際には１行になっています。
では、上書き保存して、更新してみましょう。
どうなりましたか？
マウント・クックの右横の下に説明文が入りませんでしたか？
また、説明文を画像の前に持ってくると、画像の左横の下に表示されます。
次に、画像の下に説明文を持ってきましょう。
これはとても簡単です (^ ^;
マウント・クックを表示している ![]()
タグの後ろで改行して下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
Kea Point からのＭｔ．クック
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
ソースはこんな感じになりますね。
ただ
を１つ加えただけですが…（笑）。
では、上書き保存して、更新してみましょう。
説明文が画像の下に表示されたと思います。
私はこの表示方法が好きなので、よく使っています。
さらに、画像を横に並べて表示するには、どうしたらいいのでしょうか？
これも簡単ですね。
今回は練習なので、同じ画像を並べてみましょう。（もちろん実際には別の画像ですよ）
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
Kea Point からのＭｔ．クック
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のようになります。
これで上書き保存して更新すると…、
マウント・クックの画像が横に２つ並びましたね。
でも、画像の間がほとんど開いていないので、何だか窮屈そうですね (^ ^;
では、画像の間を広げてみましょう。
２つ目のマウント・クックの前に『全角スペース』を６個くらい挿入して下さい。
『全角スペース』というのは、分かるでしょうか？
これは、日本語入力でのスペースの事なのです。
ＨＴＭＬ文書では、『半角スペース』は無視されますが『全角スペース』は認識されるので、
画像の間に『全角スペース』を挿入してやると、その分のスペースを開ける事が出来ます。
レイアウトとして『全角スペース』を使うのは、あまりよくないやり方ですが、
簡単なので、ちょっとしたページに使うと便利です。
本格的なレイアウトは、また今後勉強しますので、お待ち下さいね。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
Kea Point からのＭｔ．クック
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
このようになりますね。
ちゃんと画像の間は開いたでしょうか？
ついでに説明文も、それぞれの画像の下に表示させて見ましょう。
まず『Kea Point からのＭｔ．クック』を横に２つ並べます。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
Kea Point からのＭｔ．クックKea Point からのＭｔ．クック
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
そして、画像の時と同じように、全角スペースを挿入します。
場所は分かりますか？
そうですね。『Ｍｔ．クック』と『Kea Point』の間ですね。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
Kea Point からのＭｔ．クック
Kea Point からのＭｔ．クック
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のようになります。
ここでも２行になっていますが、改行していないので実際は１行になります。
スペースは、かなり沢山開けないといけないと思います。
だいたい２６個くらいでしょうか。
文字が大きかったら、もう少し少なくてすむんですけど…。
では、上書き保存して更新して下さい。
それぞれの画像の下に、説明文が表示されたでしょうか？
位置がずれている、という方は、スペースの数で調整して下さいね。
最後に、今日のソースを書いておきますので、参考にして下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
画像の練習
ようこそ！ 私のホームページへ
今、画像を表示する練習をしています。
Kea Point からのＭｔ．クック
Kea Point からのＭｔ．クック
画像が表示されると、グッとページらしくなりますね。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
どうでしたでしょうか？
画像はうまく表示できたでしょうか？
画像を自由に扱えるようになると、ＨＰ作りがさらに楽しく、
またページもそれらしくなってきます。
画像については、しっかりと勉強しておいても損はしないと思います。
今回のような『全角スペース』を使ったレイアウトでは、
画像の大きさや、説明文の長さをそろえるというのが、ちょっとしたコツです。
タグによって中央に表示されているので、もし画像の大きさや説明文の長さが違うと、
うまくそれぞれの下に表示する事ができません。
そのあたりは、ちょっと工夫すれば何とかなると思います。
皆さんも自分で撮ったデジカメの写真などで、いろいろ試して下さいね。
では、第１５回でお会いしましょう。