高校生のためのホームページづくり（男の子用）

７．写真を載せてみよう！

写真の加工

写真をスキャナーで取り込んだり、デジカメで撮った写真をパソコンに取り込んだままの写真はファイルの容量がとても大きくてホームページには載せられません。ブロードバンドが急速に普及しているとは言ってもまだまだアナログの地域が少なくありません。アナログ回線で見た場合でもひとつのページが１０秒以内に表示されることがひとつの基準であり、「東京都公式ホームページ基準」でも１ページの容量は画像を入れても65KB以内に抑える事が推奨されています。ちなみに１ページの容量をチェックするためには「html体重計」というフリーソフトがあります。また写真のサイズとファイル容量を変えるためにはJTrimというフリーソフトが使い易いです。ホームページビルダーでは写真の大きさを簡単に変えることができますが実際のファイル容量を変えないと意味が無いのでくれぐれも注意が必要です。
※JTrimを使って写真の加工をしているところ　写真はデラバンな〜んちゃったりして^^;

JTrimのご紹介

JTrimのダウンロードページにアクセスしてダウンロードしてください。イメージ→JPEG品質を選び、ファイル容量を指定するにして40KB程度の指定をしてください。写真のサイズはイメージ→リサイズで変更できます。数字を適当に入れてみてください。上書きしない限り何回でもチェックできます。大きさはピクセルという単位で表しますが慣れるとどれくらいの大きさか解ってきます。

自己紹介のページに写真を挿入しよう！

写真をうまくレイアウトするためには前回、やった表を使います。

では実際にソースを書いてみましょう！

まず紹介したい写真を２枚用意してください。それを上のJTrimを使ってファイル容量を落とし、サイズを横幅280ピクセルに してください。画像用にimageフォルダを作ってそこへ２枚の画像ファイルを移動します。
では始めます。

<table border="1">
<tr>
<td><img src="image/ome_view.jpg" alt="デラバンの部屋から見た東青梅"></td>
<td>　</td>　　セルの中身が無い場合は全角のスペースを入れます。
<td><img src="image/clock_towe11.jpg" alt="時計台"></td>
</tr>
<tr>
<td>　</td>　　全角にするためには日本語変換プログラムをオンにしてから
<td>　</td>　　スペースキーを１回打ちます。
<td>　</td>　　半角が２回入っているか、全角が１回かはメモ帳では解りません。
</tr>　　　　　　QXエディタのような高機能なエディタだと明確に解ります。
<tr>
<td>デラバンの部屋から見た東青梅の街並みです。坂を昇るのは疲れますが神戸に居たときと比べると楽なものです。※ファイル容量13.5KB</td>
<td>　</td>
<td>解りますか？この時計台。そう！バック・トゥ・ザ・フューチャーで使われたセットです。ロサンゼルスのユニバーサル・スタジオにて※ファイル容量7KB</td>
</tr>
</table>

ソースの説明

画像を挿入するためのタグは<img>です。このタグには閉じるタグはありません。<img src="">の""の間にファイル名を書きます。ブラウザの中に画像の表示できないものや、例えできてもアクセススピードをアップさせるために画像を表示していない人もいますので画像が何かを文字で示す必要があります。それが代替テキストあるいはalt属性（オルトぞくせい）と呼ばれるものです。インターネット・エクスプローラを使っている人はツール→インターネットオプション→詳細設定→画像を表示しないにチェックを入れて見ることをおすすめします。適切なaltとそうでないaltが如何に違うかが解ると思います。

出来映えはどうかな？

それでは写真の挿入されたページdelavan_table3.htmlを見てください。このパターンは枠線を見せています。
上から枠線を表示しないようにしてみました。delavan_table4.html