私のホームページ

［ＨＰを作ろう！］　☆第１１回☆ こんばんは、ＴＨ６９です。先日、試作ページを募集した所、多くの方に送って頂いて、ありがとうございました。皆さん"タグ"を自在に使われて、楽しそうなページに仕上がっていました (^o^) これからも頑張ってくださいね。それから、自分のページを更新したり、作り変えたりした時には、新しいページを送っていただければこちらで更新してアップしておきますので、よろしくお願いします。では、今日の本題に入りましょう。今日は『背景』のつけ方について勉強します。今回からしばらくの間は、『画像』についてやりますので、まず画像を用意しないといけませんね (^ ^; 『画像』なんて持っていないよ、という方も心配は無用です。ちゃんと［ＨＰを作ろう！］にアップしてありますので、それを利用して下さいね。まず［ＨＰを作ろう！］のタイトルの左にある［素材集］をクリックして下さい。すると新しいウインドウが開いて［素材集］のページが表示されますので、開いておいて下さい。開いたら、ダイヤルアップを切断して、オフラインにしても大丈夫です。では、最初に画像をパソコンに取り込んで『保存』する事から始めましょう。先ほど開いておいた［素材集］のページに〈背景〉という欄がありますので、そこにある黄色いチェックのような画像にマウスカーソルを合わせます。カーソルを合わせたら、そこで（画像の上で）右クリックします。するとポップアップメニューが出ますので、その中の［名前をつけて画像を保存］をクリックします。すると［画像の保存］というダイアログボックスが出るはずです。［保存する場所］が［マイドキュメント］になっていない場合は、［保存する場所］を入力する窓の横にある『▼』をクリックして、［マイドキュメント］をクリックして開きます。［マイドキュメント］の中には以前作った［homepage］フォルダがあると思いますので、それを選択して開きます。［homepage］フォルダにそのまま保存してもいいのですが、勉強のため新しいフォルダを作ってみましょう。［保存する場所］の『▼』の三つ横にフォルダが光っているようなボタンがあります（笑）。それをクリックすると『新しいフォルダ』が、名前の反転した状態で作られます。では、その『新しいフォルダ』に名前を付けましょう。名前は分かりやすく［gazou］にしておきましょう（私もそうしています）。『新しいフォルダ』の名前が反転しているので、そのまま半角英数で『gazou』と入力します。入力したらキーボードの［Enter］ボタンを押して確定します。ここまでの作業で、［マイドキュメント］の中にある［homepage］フォルダの中に新しく［gazou］というフォルダを作った事になります。できたでしょうか？できたら、［gazou］フォルダを選択して開いて下さい。開いたら…、何もないですよね（笑）。それでは、画像に名前を付けましょう。これも分かりやすく［haikei.gif］にしておきます。『haikei』の後ろの『.gif』というのは以前チラッとお話した〈拡張子〉なんです。拡張子が分からない場合は、保存する画像の種類をパソコンが判断して［ファイルの種類］という所、［ファイル名］の下に表示されていると思いますので、それを入力します。（この場合、拡張子は自分で記入する必要はありませんが、なるべく自分で記入したほうがいいと思います。　拡張子の事が分かってきたら、そちらの（自分で記入する）方が確実で分かりやすいからです。）入力できたら、［保存］ボタンを押して保存します。では、実際に保存できたかどうか試してみましょう。［マイドキュメント］の中の［homepage］フォルダの中にある、新しく作った［gazou］というフォルダを開きます。すると、その中に［haikei.gif］という画像ファイルがあると思います。あったでしょうか？なかったらどこか間違っていますので、もう一度よく読んでトライして下さいね (^ ^; あったら、それをクリックして開きます。保存した画像の元の画像と同じ物が表示されれば成功です＼(^o^)／これで、画像の保存は終了です。では、実際にページに背景を付けてみましょう。いつものように［homepage］フォルダにある［index.html］ファイルを開いて、そのソースを表示させて下さい。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～私のホームページ

ようこそ！私のホームページへ

このページはただいま製作中です。

またのお越しをお待ちしております。

２００１年６月１７日　製作開始
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～のようになっていますね。（なっていない方は、この通りに直してくださいね）それで『背景』というのは、どこに入れるかというと、これもタグの中なんです。『body』の後ろに半角開けて『background="gazou/haikei.gif"』と入力してみてください。『』のようになりますね。この中で『background』は、文字通り背景ですよね。画像を背景に使う場合は、必ず『background="***"』で、画像の場所を指定します。背景に使いたい画像がどこにあるのかを、パソコン（ブラウザ）に教えてやるんですよ。それから『"gazou/haikei.gif"』の『/』は「スラッシュ」といって、まあ区切りみたいなもんです。意味は『［gazou］フォルダの中の［haikei.gif］という名前のファイル』になります。この部分を翻訳すると「ブラウザさん、このページの背景の画像は［gazou］フォルダの中の［haikei.gif］という名前のファイル　ですので、よろしくお願いしますね」とでもなるでしょうか（笑）。では、上書き保存して更新してみてください。どうでしょうか？ページ全体が黄色いチェックの背景に変わったでしょうか？変わったら成功です！＼(^o^)／変わらなかった方は、どこか間違っていますので、もう一度チェックしてやってみて下さい。ページに背景がつくと、さらにＨＰらしくなってきますよね。私が勉強していた時も、初めてページに色が付いた時以上に感激しました。皆さんはどうだったでしょうか？この背景というのは、もちろんいろんな画像を使うことができます。［素材集］のページに、『おまけ』として２つ載せておきましたので、自分で試してみて下さい。また、背景の画像は、フリーで提供して下さっているサイトがいくつもありますので、そういう所から、今回のやり方で自分のパソコンに保存して、使用してもかまいません。その時、それぞれのサイトで『利用規約』のようなものがありますので、ご注意下さいね。完全にフリーの物もありますが、そうでない物（リンク・メールなどが必要）もあります。自分のパソコンの中だけで使う場合は関係ありませんが、ＨＰとして公開する場合は気を付けて下さい。そういうサイトは、またこれから紹介していこうと思いますので、お待ち下さいね。もちろん自分で捜してもいいですよ。「フリー」、「素材」、「背景」などで検索を掛けると、かなりのサイトがヒットすると思います。それから、画像を保存する時に、すべて［homepage］フォルダの［gazou］フォルダに保存するとややこしくなるので、別に［マイドキュメント］の中にフォルダ（画像集など）を作ることをお勧めします。そして使いたいものだけ［gazou］フォルダに移すようにします。では、第１２回でお会いしましょう。