https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

画像の横幅、高さを指定する

{width:値;}で画像の横幅を指定することが出来ます。

■ 画像の横幅を指定する


下の画像の通常サイズは28×34ピクセルです。下の画像は 高さはheight:auto;(デフォルト)と指定しているので横幅に対して高さも自動で調整されます。 左から2番目の画像の横幅は
28×4=112pxで通常の横幅の4倍の値です。 したがって高さも34×4=136pxと4倍の高さで表示されHTML指定の
<img src="./image/biru.gif" width="112" height="136" alt="ビル"> と同じ横幅、高さになります。

【ブラウザ表示】

ビル1 ビル2 ビル3 ビル4
ソース

<img src="./image/biru.gif" alt="ビル1">
<img src="./image/biru.gif" class="w1" alt="ビル2">
<img src="./image/biru.gif" class="w2" alt="ビル3">
<img src="./image/biru.gif" class="w3" alt="ビル4">

外部ファイル

img.w1{width:112px; height:auto;}
img.w2{width:160px; height:auto;}
img.w3{width:10%; height:auto;}


<body>~</body>に直接記入する場合

<img src="./image/biru.gif" alt="ビル1">
<img src="./image/biru.gif" style="width:112px; height:auto;" alt="ビル2">
<img src="./image/biru.gif" style="width:160px; height:auto;" alt="ビル3">
<img src="./image/biru.gif" style="width:10%; height:auto;" alt="ビル4">

■ 画像の高さを指定する

{height:値;}で画像の高さを指定することが出来ます。 下の画像は 横幅は{width:auto;}(デフォルト)と指定しているので高さに対して横幅も自動で調整されます。

【ブラウザ表示】

ビル1 ビル5 ビル6 ビル7
ソース

<img src="./image/biru.gif" alt="ビル1">
<img src="./image/biru.gif" class="he1" alt="ビル5">
<img src="./image/biru.gif" class="he2" alt="ビル6">
<img src="./image/biru.gif" class="he3" alt="ビル7">

外部ファイル

img.he1{width:auto; height:80px;}
img.he2{width:auto; height:110px;}
img.he3{width:auto; height:130px;}


<body>~</body>に直接記入する場合

<img src="./image/biru.gif" alt="ビル1">
<img src="./image/biru.gif" style="width:auto; height:80px;" alt="ビル5">
<img src="./image/biru.gif" style="width:auto; height:110px;" alt="ビル6">
<img src="./image/biru.gif" style="width:auto; height:130px;" alt="ビル7">

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

画像に枠線を入れる
画像の周りに余白を入れる
画像の横に文字を回り込ませる
画像に並ぶ文字の位置を指定する
画像を切り抜く
画像のマスクを指定する

スタイルシート一覧のページに戻る