広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

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

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

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

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

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

画像タグの貼り方


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

<img src="画像ファイルの場所/ファイル名" />

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

なお、最後が/>となっているのは、これでひと括りのタグという意味です。
通常のタグは<タグ名>で始まり</タグ名>で終わりますが、imgは始まりと終わりに
分かれずに、<img src=""/>という構成です。始まりイコール終わりな時はこう書きます。

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

表示結果

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

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

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

border="0"
これはボーダー(縁取り)をつけないという指定です。
ボーダーをつけたい場合:HTMLのこの属性は排除に向かっているのでスタイルシートで指定してください。(参考記事:色つきの枠で文章を囲みたい
alt=""
これは画像の説明です。(この例では、空白になっています)
読み込めなかったりして、うまく画像が表示できない時、代わりにここに書いた文字が表示されます。

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

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

HTMLでのサイズ指定方法


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

横幅200ピクセル 縦幅200ピクセルで表示
<img border="0" alt="八神はやて 水着Ver."
src="http://www.1999.co.jp/itbig15/10153981.jpg" width="200" height="200"/>
文字数の影響で上の表示は2行になっていますが、実際には1行で書きます

表示結果


横幅500ピクセル 縦幅500ピクセルで表示
<img border="0" alt="八神はやて 水着Ver."
src="http://www.1999.co.jp/itbig15/10153981.jpg" width="500" height="500"/>
文字数の影響で上の表示は2行になっていますが、実際には1行で書きます

表示結果


width
横幅をピクセルで指定します
height
縦幅をピクセルで指定します

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



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


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

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

10em ... 文字の高さを基準とした1文字分の長さ(emは文字Mの大きさに由来)
10ex ... 文字xの高さ
10px ... 10ピクセル

10in ... 10インチ(1in=2.54cm)
10cm ... 10センチメートル(1cm=10mm)
10mm ... 10ミリメートル(10mm=1cm)
10pt ... 10ポイント(1pt=1/72in)
10pc ... 10パイカ(1pc=12pt)
とほほのスタイルシート入門(基礎知識)より

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

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


横幅200ピクセル、縦幅200ピクセルをスタイルシートで指定
<img border="0" alt="八神はやて 水着Ver." src="http://www.1999.co.jp/itbig15/10153981.jpg"
style="width:200px;height200px;"/>
文字数の影響で上の表示は3行になっていますが、実際には1行で書きます

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


注意
この例では、HTMLのwidthとheightを指定していません。それでも正しく表示されます。
もし厳密な書き方にのっとるのであれば、たとえスタイルシートで指定していてもHTMLでのwidthとheightの指定を省略してはいけません。

新ブログ「Big Bang」で続きを読む