画像の表示サイズを変更するの巻

画像ファイルの大きさを変える方法は２通りあります。
ひとつはHTMLを編集する方法。
もうひとつはスタイルシートを編集する方法です。

HTMLでサイズ指定したほうが（わずかですが）表示が速くなります。

それはファイルの読み込み順の影響です。
ファイルはまずHTMLを読み込んで、その後付加情報を読み込みます。
HTMLを読み込んだ時点でサイズが決まっていれば、その時点でレイアウトできるからです。

ただしスタイルシートとHTMLの両方で指定すると最終的にスタイルシートのサイズになります。

画像タグの貼り方

画像ファイルの指定方法は以下のようにします。

上の場合はサイズが指定されていないので、読み込んだ画像ファイルの
実際の大きさそのままに表示されます。

例：<img border=”0″ alt=”” src=”http://www.1999.co.jp/itbig15/10153981.jpg” />

表示結果

これはアフィリエイトです。著作権の問題で勝手に画像を使えないので商品リンクにしています。以下の画像も同様に、すべてアフィリエイトです。

この画像はもともと横幅３００ピクセル、高さ３００ピクセルなので、その大きさで表示されています。

例に書いたソースはアフィリエイトのソースそのままです。
最初の説明以外の属性が２つ書いてあります。まず、それを説明してしまいます。

altは必須属性なので、できる限り内容を書くべきです。
例えば、alt=”八神はやて 水着Ver.”とすれば画像が表示できない時に、その場所へ
八神はやて 水着Ver.　という文字を表示してくれますのでページを見る人の助けになります。

通常のブログでの画像表示は上のような指定なので実際の大きさで表示されます。

HTMLでのサイズ指定方法

サイズを変えたい場合には明示的にサイズを指定します。
(既にaltを説明したので、以下はaltを含めます)

文字数の影響で上の表示は２行になっていますが、実際には１行で書きます

表示結果

文字数の影響で上の表示は２行になっていますが、実際には１行で書きます

表示結果

この時に実際のサイズと同じ縦横比率を維持しないと下のように画像がおかしくなりますので
注意してください。

スタイルシートでのサイズ指定方法

スタイルシートでも指定するのはwidthとheightです。ただし、スタイルシートの時は単位も指定します。

逆に言えば、スタイルシートでは単位はピクセルでなくても良いということです。

とほほのスタイルシート入門（基礎知識）より

「とほほのスタイルシート入門」はこのブログのように単発記事ではなく、まとめて体系的に学べるのでお薦めです。

なお、スタイルシートでは単位指定でなくパーセント指定も出来ます。
例えば、横幅が５００ピクセルの場所で画像にwidth:20%を指定すれば、それは１００ピクセルを指定したことになります。

例

文字数の影響で上の表示は３行になっていますが、実際には１行で書きます

冒頭でも説明したようにHTMLとスタイルシートの両方で指定した場合には
スタイルシートの結果が表示されます。