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

ファンブログにアップロードした画像の大きさ変更方法。

スポンサーリンク


画像ファイルの大きさを変える方法は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の指定を省略してはいけません。

関連コンテンツ

スポンサーリンク

「画像の表示サイズを変更するの巻」への8件のフィードバック

  1. 初めまして!
    画像ファイルの指定方法を学ばせて頂きに参りました。
    コバヤC様の所から跳んできました。
    具体的でわかりやすい説明で、助かります。
    カコ様Tom様、とっても便利です。
    今後ともよろしくお願い致します。

  2. ケメさん、こんにちは~。カコです☆
    Tom様の話が難しい時は、いつでもうちの
    ちょいコツへどうぞ♪

  3. ねーねー。
    でもファイルのサイズのこと考えたら、
    元の画像を小さくしたほうがデータ量が少なくって
    いいと思わない?

  4. ケメさん。こんにちは。
    昨日の朝にコメントもらってたんですね。
    気づいていなかった。

    こちらこそ、よろしくです。

    かこよく気づいたな。

    >元の画像を小さくしたほうがデータ量が少なくって
    >いいと思わない?

    その通り。表示の速さが違う。
    1記事でそこまで説明するよりも、いいかと思って。
    以前、こう説明したけど実は、と言う記事は他にもある。

    ただ、大きい画像と一緒にサムネイルをアップするなら、結果的に1枚の方が転送量は少なくなる。

    同じ画像を複数表示する時はこの方法を知ってた方がいい。

    ついでに言うと、コメント欄を使ってナイスフォローをしてもらえたので助かる。
    ありがとう。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください