小さな画像

画像は文字と同じ扱い

そもそも画像は文字と同じ扱いですから、単に行の中に<img src="URL" alt="代替文字列">と書き込むことにより、文章の中に並べることができます。

←このように段落の最初に画像を置くのもいいですし、途中にも入れることができます。

途中<img src="images/nasu.png" alt="なすび">にも
入れることができます。

画像の大きさ

このような画像は文字の大きさに合わせて作りますが、文字の大きさは見る人の側のブラウザで変えることができますから、厳密に大きさを合わせようと考えない方がいいでしょう。作る側で大きさとレイアウトをガチガチに固めて崩せないようにするやりかたもないわけではありませんが、その場合はきちんと考えないと相手に不便をかけることになります。

htmlの元々の思想は、ウインドウの大きさは見る人の都合で変えられるようにするということです。ワープロとは違います。でも企業の広告ページや買い物をさせるようなページの場合は幅を固定して、小さなウィンドウの場合はスクロールしてもらうという考え方のサイトもあります。

にんじんは27×27ピクセル，なすは18×18ピクセル，ピンは16×24ピクセル程度の大きさです。小さいので作るときも、ブラシの太さは１で、拡大して１点１点を考えながら塗りつぶすような作業になります。

		32×32			27×27
		18×18			16×15
		16×24			16×15

例えばなすと鉛筆を拡大すると次のようになります。

一応、影がついて立体になっていますが、小さいのでかなりいい加減でもそれなりに見えるはずです。

課題 sakuhin.html の中に小さな画像を入れる

小さい画像を作ってimagesフォルダに置き，行の中に書き込むだけです。sakuhin.html の中に小さな画像を入れてページを飾ってください。

imgに指定された画像は文字と同じ扱いです。必ずpやh1などブロックを作るタグの中に入れてください。