［ＨＰを作ろう！］ ☆第１３回☆
こんばんは、ＴＨ６９です。
皆さんのＨＰ製作は、順調に進んでいるでしょうか？
私の方は、暑さの疲れのためか、はたまた乗鞍にサイクリングに行った疲れのせいか、
夕食を食べるとすぐに眠くなり、１１時頃には寝てしまう、という日が続いています (^ ^;
そのために［ＨＰを作ろう！］の製作も、なかなか進みません。
待ってくれている方もいると思いますが、こればかりはねぇ…（苦笑）。
今日のように、あまり眠くない時に作っていこうと思っていますので、気長にお待ち下さいね。
では、第１３回を始めましょう。
前回、初めて画像をページに表示させたんですが、いかがだったでしょうか？
画像を表示させるのが、こんなに簡単だなんて、と思われた事と思います。
画像を表示させるだけなら、本当に簡単なんです。
また、レイアウトとなると話は別ですけど…。
そのあたりの事は、またいつかお話しましょう。
それでは、もう少し練習を続けましょう。
今回は、前回製作した［test2.html］のページを開いて、そのソースを表示させて下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
画像の練習
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のようになっていますね。
まず、このページに、次の文を挿入して下さい。
１）上から２行開けて、文字の大きさ"６"で『ようこそ！ 私のホームページへ』
２）ウエルカムの画像の下に１行開けて、太字で『今、画像を表示する練習をしています。』
３）マウントクックの画像の下に１行開けて、大きさ"４"で『画像が表示されると、グッとページらしくなりますね。』
以上の文を挿入して、上書き保存して更新して下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
画像の練習
ようこそ！ 私のホームページへ
今、画像を表示する練習をしています。
画像が表示されると、グッとページらしくなりますね。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
このようになりますね。（例ですので、他のやり方もあります）
次に、練習ページをもう一つ作ってみましょう。
［test2.html］のソースを、メニューバーの［編集］から［すべて選択］して［コピー］し、
同じくメニューバーの［ファイル］から［新規］をクリックして、新しく開いたメモ帳に［貼り付け］て下さい。
そしてメニューバーの［ファイル］から［名前と付けて保存］をクリック、
開いたダイアログボックスで［名前と付けて保存］します。
名前は［test3.html］でいいでしょう。
保存できたら［マイドキュメント］から［test3.html］を開いてみましょう。
開きましたか？
多分［test2.html］と同じだと思います（笑）。
では、そのソースにちょっと細工をして、画像が表示されないようにしてみましょう。
［ウエルカム］と［マウントククック］の画像の拡張子を削除して下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のようになりますね。
そして上書き保存して更新してみて下さい。
どうですか？
画像が表示されずに『×』が表示されたでしょうか。
そのページと［test2.html］のページを見比べて下さい。
画像がなくなったので、ページレイアウトがメチャクチャになっていますね。
インターネットで画像が表示できない、というトラブルは日常茶飯事ですし、
画像を表示しない設定にしている人も存在します。
せっかく苦労してレイアウトしたページなのに、これでは台無しですね。
そうならないように、画像の大きさをあらかじめ指定してやると、
もし画像が表示できなくても、ページのレイアウトが崩れる事はありません。
これは ![]()
タグの属性で指定します。
では、やってみましょう。
『』の『src="gazou/welcome."』の後ろに半角開けて
『width="170" height="133"』と記入して下さい。
また同様に、『』の『src="gazou/mt_cook."』の後ろにも半角開けて
『width="300" height="225"』と記入して下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のようになります。
width は幅、height は高さになります。
もし、画像の大きさがわからない時は、画像閲覧ソフトなどで開いてやると、
大抵のソフトでは表示されるはずです。
Windows の付属ソフト［Photo Editor］でも表示されていました（笑）。
では、上書き保存して更新して下さい。
どうですか？
やはり画像は表示されませんが、画像のサイズの枠が表示されていますね。
これならページのレイアウトも崩れる事はありません。
でも、画像がないと、どんな画像なのか気になりますよね。
それを表示する方法もあるんですよ。
『』の『height="133"』の後ろに半角開けて
『alt="Welcome to My Homepage"』と記入してみてください。
また同様に『』の『height="225"』の後ろにも半角開けて
『alt="Mt.Cock"』と記入して下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のようになりますね。
そして、上書き保存して更新すると…。
画像の枠の上に、それぞれ画像の名前が入りませんでしたか？
これは『alt="***"』中で『***』に記入したものが表示されているのです。
だから、ここには日本語でもなんでも記入する事が出来ます。
半角英数字にこだわる必要はありません。
そして、今開いた［test3.html］のページの画像の枠の中に、マウスカーソルを持って行って下さい。
何かポップアップで表示されませんか？
『alt="***"』には、こういう働きもあるのです。
これは画像のあるなしにかかわらず表示されますので、ここに画像の説明などを記入してやれば、
ポップアップで見る事ができます。
では、最後に［test2.html］の方にも、"width","height","alt" の属性を付け加えてみましょう。
参考までに、タグの例を下に書いておきます。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
画像の練習
ようこそ！ 私のホームページへ
今、画像を表示する練習をしています。
画像が表示されると、グッとページらしくなりますね。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
どうでしたでしょうか？
うまく行っていたらいいのですが… (^ ^;
うまく行かない場合は、遠慮せずにご質問下さいね。
今回勉強した事は、ちょっとした技なのですが、結構使い道はありますので活用して下さいね。
それから、画像のサイズを指定した場合、若干表示されるスピードが速いそうです。
私は面倒臭がりなので、ほとんど指定していませんけど…（笑）。
では、また第１４回でお会いしましょう。