無題ドキュメント


●イラストや写真があるともっと楽しい！　●イラストや写真の作り方・決まりごと　 ●貼りつけてみよう！

	ねえ、このページ文字だけで何だか寂しくないかな？もっとにぎやかな感じにできないかなぁ？
	そうだね。じゃあノリコちゃんお得意のイラストで、自分の似顔絵描いて載せてみようか。
	うん！そうしよう！
	他にも写真やイラストは口で説明出来ないもの説明するのにも便利だよ。百聞は一見にしかずっていうしね。
	にぎやかにするだけじゃないんだね。

今までは文字だけでページを作ってきましたが、もっと楽しいホームページにするために、イラストや写真などの「画像」を貼り込んでみましょう。「画像」を使えば、物事の説明も簡単になり、飾り・ボタン・背景などにしても、とてもわかりやすく、楽しいページになります。

	ねえパソくん、イラストを描くとき、普通に紙に書いちゃっていいの？
	ペイントソフトを使って、パソコンで描くとすごく楽だよ。でも、紙に描いたイラストや、プリントした写真などを見て欲しい場合は、「スキャナー」をパソコンに接続してパソコンの中に取り込むことはが出来るよ。

画像ファイルを作る際にはお絵描きソフト（ドローイングソフト）と、フォトレタッチソフトが必要です。adobe社のイラストレーターや、フォトショップなどが有名ですが、高価です。最初は、インターネット上や雑誌の付録CD-ROMなどでオンラインソフトを探すことをおすすめします。

●Windows98をお使いの方は
「ペイント」というソフトが既に（スタートメニュー→プログラム→アクセサリ→ペイント）入っています。（使用方法はソフトのヘルプをご覧ください）

●Windows95をお使いの方は
「ペイント」というソフトが既に（スタートメニュー→プログラム→アクセサリ→ペイント）入っています。（使用方法はソフトのヘルプをご覧ください）しかし、Windows95の中に入っている「ペイント」で描いたものは「bmp」というWindowsでしか見れないファイル形式で保存されてしまうので、他のソフトでファイル形式の変換をしてください。「GIX Pro」と言うソフトを使います。ここからダウンロードして下さい。（シェアウエア（有料）ですので、気に入ったら、お金を払う必要があります。詳しくは上記ホームページをご覧ください。）ダウンロードしたらインストール（ダイアログに従えば簡単にできます）をして、起動します。「ファイル」から「開く」で変換させたい画像を開き、保存形式を「GIF」か「JPEG」にして保存し直せばOKです。このソフトはただGIFや、JPEGに変換するだけでなく、後述の透過GIF、画像のインターレース化といった機能も備えています。

●Macをお使いの方は
「Graphic Converter」などが一般的です。ここからダウンロードしましょう。簡単なドローイングから、ファイル形式の変換までいろいろできるソフトです。（使用方法は、ソフトの解説ホームページなどを探して調べてください。）

写真などはデジタルカメラをパソコンに繋いで取り込むか、普通のカメラで取った物や、紙に描いたものをスキャナーという周辺機器を使用して取り込みます。スキャナーは安い買い物ではないので、必要がでてきたら購入して下さい。その他に、インターネット上には「素材集」が沢山あり、さまざまな素材が自分で作らなくても無料で使用できたりします。（素材によっては有料の場合もありますので、ご注意ください）是非利用しましょう。

	描けたよ！
	じゃ、この描いた絵を保存しよう。ファイル名は半角の英数だったら好きなのをつけていいけど、ここで注意して欲しいのは、「保存形式」を指定すること。
	保存形式？？
	さっき、htmlファイルの話をしたでしょ。保存形式の指定っていうのは、「拡張子」（htmlファイルで言えば、「.html」だったよね）を指定するのと同じこと。画像ファイルは「JPEG」（.jpg）か「GIF」（.gif）っていうファイル形式で保存してね。
	保存する場所はどうするの？
	さっき作った「homepage」フォルダの中に保存しよう。これから作るHTMLファイルや画像のファイルもそこに保存するよ。

画像のファイル形式は沢山ありますが、インターネットの世界では、「JPEG」と「GIF」というファイル形式が一般的です。インターネットは世界中の人がいろいろなパソコンやブラウザを使って見るものなので、どの環境でも見れる保存形式を使うのがよいでしょう。通常の画像は「GIF」で十分です。特に繊細な部分までキレイに見せたい場合は「JPEG」を使用します。「GIF」はイラスト向き、「JPEG」は写真向きです。

扱える画像ファイルの種類が多くのペイントソフトでは限られている場合があります。その際は、ファイル形式の変換の出来るソフト（先ほど挙げた、「GIX Pro」や、「Graphic Converter」など）を手に入れて下さい。ファイルの保存の仕方はそれぞれのソフトによってことなるので、ソフトの説明を参考にして下さい。

●Windows98に入っている「ペイント」を使う場合は、画像を描いたら「名前を付けて保存」をクリックし、表示されたウインドウの「ファイルの形式」という箇所をビットマップファイルから、GIF、もしくはJPEGに指定しなおしてください。

★注意★
拡張子はGIFは「.gif」JPEGは「.jpg」です。ピリオドを含めて拡張子ですので、忘れずに！大文字は基本的に使用しません。自動的に拡張子をつけるソフトが多いですが、大文字を割り当てるソフトもあります。大文字と小文字の区別に注意しましょう。

	保存できたよ！
	よくできました。じゃ、いよいよ貼り付けよう。画像を貼りつけるタグはこれだよ。

画像を貼り込む際は<img src="表示したいファイル名">というタグを用います。

	これは「</>」こういうのいらないの？
	ノリコちゃん、ちゃんとHTMLの基本を覚えてるね。エライエライ。でも、このタグは挟む必要は無いよ。
	じゃあ、さっき書いた絵は「noriko.gif」って名前にしたから・・・・。

<img src="noriko.gif"> 
はじめまして！ノリコです。

　
（上のタグを表示させると・・・）

はじめまして！ノリコです。
　

	できたっ！でも大きすぎるかな？もうちょっと小さくしたいな。
	自由自在だよ。

<img src="noriko.gif">通常サイズ 
<img src="noriko.gif" width=100 height=56>タテ56ピクセル、ヨコ100ピクセル 
<img src="noriko.gif" width=100 height=100>タテ100ピクセル、ヨコ100ピクセル 
<img src="noriko.gif" width=56 height=100>タテ100ピクセル、ヨコ56ピクセル

　
（上のタグを表示させると・・・）

通常サイズ

タテ56ピクセル、ヨコ100ピクセル

タテ100ピクセル、ヨコ100ピクセル

タテ100ピクセル、ヨコ56ピクセル

大きさを変える時は、<img src>のタグの中に「width（幅）」「 height（長さ）」を指定しましょう。「=」のあとに数字で大きさを指定します。その際の単位は「ピクセル」というものになります。詳しく理解する必要はありませんが、インターネットの世界では「ピクセル」と言う単位を使用すると覚えておきましょう。

これで小さくなったかな？
　
　

<img src="noriko.gif" width=100 height=100> 
はじめまして！ノリコです

　
（上のタグを表示させると・・・）

はじめまして！ノリコです。
　

じゃあさっき作ったページに貼り込んでみよう！
　
　

<html>
<head>
<title>ノリコのホームページ</title>
</head>
<body>
<center>
 
 
ノリコのホームページへようこそ！！ 
 
<img src="noriko.gif" width=100 height=100> 
はじめまして！ノリコです。 
 
名前：ノリコ 
年齢：ヒ・ミ・ツ！ 
性別：女の子で～す 
住んでいる所：東京 
趣味：音楽を聴くこと。ショッピング。寝ること。絵をかくこと。 
 
みなさんはじめまして、ノリコです！遊びに来てくれてありがとう！ 
何もわからなかったけど、頑張って作りました。ごゆっくりどうぞ！ 
 
 
★もくじ★ 
トップページ 
ノリコの日記 
ペットの紹介 
メール待ってます 
 
 
★日記★ 
○月○日（月曜日） 
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。 
とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっぱい生まれるんだろうな。 
 
○月○日（火曜日） 
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。 
でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。 
 
○月○日（水曜日） 
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ？ 
病院に行って注射した。痛かった～！でもおかげで今は熱も下がって、ご飯もいっぱい食べれたよ。 
 
 
★ペットの紹介★ 
これがうちのゴン太です。 
太りぎみだけど、かわいいやつです。 
今年で6才。 
彼女募集中。 
兄弟は親戚のうちにいます。 
これでも長男だぞ！
</center>
</body>
</html>

※よくわからない人は「5.いよいよ作ってみよう」の時と同じ要領で、上のノリコの書いたHTMLをコピーして「ワープロソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。

これを保存して、ブラウザで確認・・・・。できた！自己紹介らしくなったね！
　
　

（上のタグを表示させると・・・↓クリックしてみよう）