広告

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

絶対はみ出さない画像!自動でサイズ調節するスタイルシート

ファンブログにアップロードした画像URLの調べ方は「ファンブログでアップロードした画像の場所」に書いてあります。

今回も、ちぎり絵作家NARUさんの、作品「NARUシカ」をお借りして、スタイルシートで画面サイズに合わせて画像の大きさを自動で変える方法を説明します。

この記事はHTMLのimgタグの使い方が分かることを前提にしています。この記事を読んで分からない場合は、imgタグが分からない人向けに書いた、別の記事「画像が枠からはみ出さない、簡易的なスタイルシート」で対応してください。

NARUシカ

画像の大きさを画面サイズに合わせて自動で変える

意味がわからない方は、試しに今開いているこのページのサイズを色々と変えてみてください。常に横幅いっぱいの大きさで、はみ出すことなく、フルサイズ「NARUシカ」が表示されていると思います。

ブラウザのサイズ変更ボタン

ブラウザのドラッグ

自動で大きさを変える時はwidthをパーセントで指定する

このページの「NARUシカ」のソースコードは以下の通りです。

<img src="画像のURL" alt="画像の説明" style="width:100%;height:auto;" />

スタイルシートのwidth100%を指定した結果、画面のサイズを変えても常にフルサイズになります。パーセンテージの基準は自分が入っている場所(node)の大きさです。基準の場所(node)の広さが1000ピクセルのところでwidth:100%を指定すれば、1000ピクセルの横幅で表示されます。

ですから、画像の親nodeが画面全体の50パーセントしかないところで、width:100%を指定しても、親nodeの幅いっぱいまでしか広がりません。

<div style="width:50%;"><!-- 親nodeの横幅が50% -->
<img src="画像のURL" alt="画像の説明" style="width:100%;height:auto;" />
</div>

上のソースの表示結果

NARUシカ

高さの調節はheightでおこなう

さらに、heightautoに指定することで、高さは横幅に合わせた自動調整となります。

縦横比が正しくないと、表示もおかしくなるので注意しましょう。

NARUシカ NARUシカ

heightを指定して、横幅を自動調整することも出来ます。

サイズの違う2つのちぎり絵を高さ200ピクセルに合わせて表示

NARUシカ シータとパズー

ソースコード

<p>
<img src="NARUシカのURL" alt="NARUシカ" style="width:auto;height:200px;" /> 
<img src="シータとパズーのURL" alt="シータとパズー" style="width:auto;height:200px;" /> 
</p>

シータとパズー

こちらも、ちぎり絵作家NARUさんの作品「シータとパズー」です。元々は小さな画像なのですが、フルサイズに拡大して表示しています。紙という素材を生かした、作品の繊細な表面がよくわかります。けど、曲がっています。拡大すると曲がっています。

シータとパズー

この作品の元の横幅は、320ピクセルです。

元のサイズで表示
シータとパズー

普段は自動でサイズを変更するが、表示画面が320ピクセル以上の場合は横幅320ピクセルで固定したい!という時はどうしましょ?

max-widthで最大幅を指定する

max-widthというのは、そんな時に使えるスタイルシートです。

<img src="URL" alt="説明" style="width:100%;height:auto;max-width:320px;" />

こうすると、横幅が320ピクセルまでは自動調整、ただし320ピクセル以上には広がらなくなります。320ピクセルだと小さいので、下はmax-width:700pxで設定しています。ブラウザのサイズを変えても700ピクセル以上には広がらないのがわかると思います。

シータとパズー

また、それ以上小さくなって欲しくない時にはmin-widthというものもあります。min-widthを指定すると、その値よりは小さくならなくなります。

max-width min-width と同じ事を高さに適用させる、 max-height min-height というのもありますが、使い方は同じです。


画像のサイズ変更はアフィリエイトでも出来ますが、規約をよく読んだ上、自己責任で行なって下さい。トラブルが起きても当サイトは関知しません。

上の画像は下のようなソースで表示しています。

<style type="text/css">
p.dolls img{
 float:left;
 width:19%;
 margin-right:1%;
}
</style>

<p class="dolls">
<img src="画像1のURL" alt="画像1の説明" />
<img src="画像2のURL" alt="画像2の説明" />
<img src="画像3のURL" alt="画像3の説明" />
<img src="画像4のURL" alt="画像4の説明" />
<img src="画像5のURL" alt="画像5の説明" />
</p>

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