HTMLを知ろう！その6
2010年3月6日
またまた間があきましたが、続きです。
今回は、画像の説明です。
小難しい話が長く続きますが、結構重要なポイントなので
頑張って読んでいただけると幸いです！
さて前回、背景画像が結局表示されなかった、と言う方もいるでしょうか。
HTMLの感覚に慣れないうちは、画像がページにぺたっと貼ってあるような
気がすると思いますが、実際には「別のファイル」です。
そして、「ここに、このファイルの画像を表示しなさい」と
指示をすることで、表示されています。
サンプル04で言えば、sirou05-4.htmlで、お好み焼きの写真img5-1.jpgを
表示させているわけです。
具体的な表示方法は↓こんな感じです。
<img src=”img5-1.jpg”>
これって結構わかりやすいと思いませんか？（え？思わない？？）
画像、つまりイメージなので、imageを省略した「img」タグ
そして、表示させたい画像を指定するための
「src」
なんじゃこれ、と思わず、こうゆうもの・・・と覚えてください。
これはファイル名を指定する時の決まり文句なので
imgの時以外でも出てきますが、良く使うのはimgタグの時です。
■相対パス
さて、画像など、別のファイルを説明する際に一番面倒なのが
パス
のお話です。
「パス」、と言うとバスケットなどでボールをパスする、とか
順番をパスする、とか日本語の中にも定着した言葉ですが
HTMLなどで使う「パス」は、そういう意味とは全然違います。
わかりやすく言うなら、位置関係、住所、居場所
みたいな感じです。
つまり、そのファイルから見て、指定しているファイルがどこにいるか
を示すのが「パス」です。
正確にはちょっと違うと思いますが
コーディングの練習をしているうちはこの理解でOKです。
先ほどの表示例では、画像のファイル名だけが書いてあるので
位置関係としては、同じフォルダの中にいる
と言うことになります。
例えば、webフォルダに、page.htmlとphoto01.gifと言うファイルがあったら
page.htmlからphoto01.gifを呼び出す時
<img src=”photo01.gif”>
で呼び出します。
こういう風に、「自分から見てどこにいるか」を示すのが
相対パス
です。通常は相対パスで指定します。
他の種類としては「絶対パス」と言うのがあります。
自分とは関係なく、画像ファイルがどこにいるのか指定する
絶対的な位置、と言うニュアンスです。
これはサーバーなどの話も入ってきて難しくなるので割愛します。
画像を表示したいだけなのに、難しい話になってきた・・・
とやる気がうせちゃいますね。。
でも、これがわかってないと、「画像が表示されない。なんで～～」
と言う事態に陥ります。
別の例を出してみます。
webフォルダにpage.htmlとphoto01.gif
その中に更にimgフォルダを作ってphoto02.gifを入れました。
その時に、さっきのようにphoto02.gifを
<img src=”photo02.gif”>
で呼び出すと、画像が表示されません。
自分から見た位置、つまり同じフォルダ内にphoto02.gifがいないのが原因です。
<img src=”img/photo02.gif”>
と指定すると出てきます。
追加された部分「img/」これは、「/」で区切られていて
フォルダの名前が指定できるようになっています。
なので、画像が入っているフォルダが、「images」なら
<img src=”images/photo02.gif”>
「img」フォルダの中に、更に日付で分けてたりして「2009」フォルダを
作ってそこに入れていれば
<img src=”img/2009/photo02.gif”>
になります。
それでは、自分よりも上の階層に画像があったらどうなるでしょう？
webフォルダ、imgフォルダが同じところにあって
webフォルダ内にpage.html
imgフォルダにphoto02.gif
がある時です。
<img src=”../img/photo02.gif”>
こんな風に書きます。「../」で1個上の、言う指定で、その中にあるimgフォルダの中
と言う指定になります。
上の上、だったら「../../」と増やしていきます。
サンプルページ、前回のサンプル03に公園の写真を追加してみます。
siryou06-1.html
そこにimgフォルダを作って
photo.jpg
を置いてみます。
追加するコードは↓こんな感じ。
<img src=”img/photo.gif”>
<table width=”500″ bgcolor=”#ffffff”>
<tr><td>
<p><font color=”blue”>今日のランチ</font></p>
<p>レタスとトマトとハムのサンドイッチ<br>
ポタージュスープ<br>
野菜ジュース<br>
<br>
今日はお天気が良かったので、公園に行って食べました～。</p>
<img src=”img/photo.jpg”>
</td>
</tr>
</table>
■その他の指定
一応、これで画像は表示できるようになりました。
でも、付属の設定をしてあげるのが一般的です。
例えば、画像の上にマウスを持っていくと文字がピロンっと出てきたりします。
あれは、altと言うおまけの設定です。写真の説明を書いておきます。
他にも、画像のサイズを指定してあげるのが原則です。
サンプルの場合、画像のサイズは横400px、縦300px、画像の説明は「公園」とします。
その場合は
<img src=”img/photo.gif” alt=”公園” width=”400″ height=”300″>
となります。横幅がwidth、高さがheightです。
そこまで書いたサンプルがこちら
>>サンプル
<table width=”500″ bgcolor=”#ffffff”>
<tr><td>
<p><font color=”blue”>今日のランチ</font></p>
<p>レタスとトマトとハムのサンドイッチ<br>
ポタージュスープ<br>
野菜ジュース<br>
<br>
今日はお天気が良かったので、公園に行って食べました～。</p>
<img src=”img/photo.jpg” alt=”公園” width=”400″ height=”300″>
</td>
</tr>
</table>
これでだいぶそれらしくなってきましたね～
「スタイリッシュなサイト」とはとても言えませんが
これだって一応HTMLで作ったページなのです。
■画像のサイズ
さきほど、サラリと画像のサイズを書きましたが
自分が載せたい画像のサイズがわからん・・・
と言う方も多いと思います。
XPをお使いであれば、画像ファイルをクリック
（ダブルクリックだと開いちゃいますので、ただのクリックで）
左側に「詳細」と言う欄があれば、そこに「大きさ：400×300」のように
表示されていると思います。
または、画像を右クリックして「プロパティ」を開き、「概要」タブをクリックすると
その画面の右下に「詳細設定」と言うのがありますので
そこに幅400ピクセル、高さ300ピクセルと言う風に書いてあると思います。
ちなみに、ピクセル、と言うのは実生活で言うところの「センチ」や「メートル」
などのような、「単位」です。
パソコン上では、画像などの横幅などは全てこの「ピクセル」で表示します。
センチがcm、メートルがmと書くように、ピクセルはpxと書きます。
一般的なパソコン用モニターは1000px前後なので
500pxだったら、画面の半分くらいの大きさ、と言うことになります。
■画像のサイズ2
自分で撮った写真を載せよう、と思った時
問題になるのが「サイズ」です。
「サイズ」にも2通りあって、縦横の幅と言う意味でのサイズと
容量、と言う意味でのサイズがあります。
このどちらもちゃんと考えて使わないといけません。
今はカメラの性能が良くなっているので、
コンパクトデジカメでも1000万画素、などの高画質で撮れます。
印刷する時には、A4で出してもキレイ
と言うメリットがありますが、高画質＝ファイルのサイズ（容量）も大きいです。
そして、幅と言う意味でのサイズも、これまた大きい。
私はデジタル一眼を使っているので、
一番綺麗に撮れるモードで撮影すると
横幅が3000px以上、ファイルサイズも2MBと
ものすごいサイズになっています。
どう「ものすごい」のか。
先ほど、モニターのサイズが1000px前後とご説明しましたので
3倍の横幅ということで、そのまま表示したら3分の1しか表示されない
ということです。
もちろん、ブラウザなどが縮小して表示してくれますが
大きな画像を小さく表示すると、線が歪んで見えたりとか
綺麗に表示されないことも多いです。
それから、ファイルサイズ（容量）ですが、
画像の理想的なサイズは100KBくらいまでです。
2MBなら、小さいじゃん？
って思いそうですが、MBはKBの1024倍
2MBは、理想よりも20倍も大きいのです。
今はブロードバンド化が進んでいて、光回線でサクサク見られるわ
と言う方も多いと思いますが、
1ページに10枚の写真があったとして、それら全てが2MBだったら
さすがの光回線でも、サクサクとは開けないと思います。
■じゃぁどうすれば良いの？
画像を小さくしてあげましょう。
そのためには、ソフトが必要です。
有名なソフトは
Photoshop（めっちゃ高いです。8万とかします。。）
Photoshop elements（安いけど1～2万円します）
プロになるんだ！と言う方はPhotoshop
そこまでじゃないけど本格的にやるんだ！と言う方は、Photoshop elementsを
お勧めします。
でも、お金は掛けたくない。と言う方には、フリーのソフトがあるので
そう言ったものを利用されると良いと思います。
私は一応プロでやってますので、Photoshopを使ってますが
お客さんで、自分で画像を加工したい、と言う方には
「JTrim」
と言うのを紹介しています。
サイト：http://www.woodybells.com/jtrim.html
他にも、「無料 画像加工 ソフト」などで検索すると
一杯出てきますので、使いやすそうなものを選ぶと良いと思います。
あと、カメラの付属ソフトなんかで、加工できるソフトもあります。
・JTrimでリサイズする
リサイズと言うのは、サイズを変更する、と言う意味です。
JTrimで画像を開いて、メニューの「イメージ」から「リサイズ」をクリックします。
そして、横幅を400pxにしようと思ったら
今入っている数字を、「400」に変更します。
そうすると、縦は自動的に計算されますので「OK」をクリック。
これで、私が試した写真は、23KBになりました。
>>サンプル02
元の画像と小さくした画像を両方表示したページです。
大きい画像も、400pxに無理やり縮めて表示しています。
意外と奥が深いのが「画像」の世界。
ファイル形式や、サイズ、などのほかにも
肖像権とか著作権侵害の問題など、気をつけなければいけないことはたくさんありますが
HTMLを知ろう！と言うタイトルからは離れていくので、
次回は、リンクについてご紹介する予定です。
