画像の境界線画像の大きさ 画像の切り抜き画像の拡大 イメージcss ﾘﾌｧﾚﾝｽ へ
画像の境界線を指定する(CSS)
border: ***;
　border は、全てのタグ（要素）に適用できます。
　border は、境界線の太さ、色、スタイルをまとめて指定するプロパティです。このプロパティを<img>タグ（要素）に設定すると、画像に境界線を付けることができます。
　img { border: 1px #0000ff solid; }   a img { border: none; }
プロパティ名値　および　説　明
border:1px…線の太さ #0000ff…線の色 solid…線のスタイル ;
初期値medium文字色の値 none 
＊ それぞれの値は、半角スペースで区切って記述します。
記述する順序は自由で、必要のない指定は省略できます。（省略した場合は初期値になります）
※ 境界線スタイルの指定を省略すると、境界線が表示されなくなります。境界線を表示する場合は、この指定を省略しないで下さい。
※ 画像にリンクを設定すると、一般的なブラウザでは自動的に境界線が表示されます。この境界線を消す場合は、<img>タグ（要素）に border: none; を指定します。
例 ： <a href="#top"><img src="top.gif" style="border:none;"></a>
＊ 境界線の指定方法については、「境界線の太さ・色・スタイルをまとめて指定する」をご覧下さい。
　★ 使用例とブラウザでの表示 (f1-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .f1-1blu { border: 2px blue solid; }   a.f1-1bno img { border: none; }
使　用　例   ブラウザの表示
<img src="SL2w.gif" alt="SL" class=f1-1blu> SL
<a href=#f1-1 class=f1-1bno><img src="SampleL.gif" alt=ｻﾝﾌﾟﾙ></a> ｻﾝﾌﾟﾙ
<a href=#f1-1><img src="Sample.gif" alt=ｻﾝﾌﾟﾙ></a>：境界線指定なし ｻﾝﾌﾟﾙ：境界線指定なし
☆ a.f1-1bno img { ... } は、<a>タグに f1-1bno を指定した「画像リンクボタン（<img ...>）」の境界線の表示を
指定する記述方法です。
☆ この記述を a img { ... } にすると「画像リンクボタン（<img ...>）」の表示方法を一括して設定できます。
☆ Opera は、「画像リンクボタン」の境界線を指定しなかった場合、境界線を表示しないようです。
関連するページ
CSS スタイルシート境界線(纏)：境界線の太さ・色・スタイルをまとめて指定する
HTML タグページ 画像の境界線：画像の周囲に線を付ける
画像の境界線画像の大きさ 画像の切り抜き画像の拡大 イメージcss ﾘﾌｧﾚﾝｽ へ
画像の大きさを指定する(CSS)
width: *px; height: *px;
　width と height は、全てのタグ（要素）に適用できます。ただし、width は非置換インライン要素、tr要素、thead要素、tfoot要素、tbody要素には適用できません。また、height は非置換インライン要素、colgroup要素、col要素には適用できません。
　width は横幅を、height は高さを指定するプロパティです。このプロパティを<img>タグ（要素）に設定すると、表示する画像の大きさを指定できます。
　img { width: 300px; height: 200px; }
プロパティ名値説　　明
width 数値＋単位（px 等）
or パーセント		 画像の横幅を指定（初期値は auto）
height 画像の高さを指定（初期値は auto）
　★ 使用例とブラウザでの表示 (f1-2)
設定例 ： .f1-2pho { width: 56px; height: 40px; }
使　用　例   ブラウザの表示
<img src="photo1.jpg">：通常の大きさ ：通常の大きさ
<img src="photo1.jpg"
style="width:60px; height:42px;">：直接指定		 ：直接指定
<img src="photo1.jpg" class=f1-2pho>
<img src="photo2.jpg" class=f1-2pho>：間接指定		 ：間接指定
☆ 特定画像のサイズを指定する場合は、<img>タグに style属性で横幅と高さを指定します（直接指定）。
☆ 複数の画像のサイズを整える時は、CSSファイル等に横幅と高さを設定し<img>タグに class属性等を
追加し指定します（間接指定）。
関連するページ
HTML タグページ 画像サイズ：画像のサイズを指定する
画像の境界線画像の大きさ 画像の切り抜き画像の拡大 イメージcss ﾘﾌｧﾚﾝｽ へ
画像を切り抜く(CSS)
clip: rect(上 右 下 左);
　clip は、positionプロパティで「absolute」または「fixed」が指定された要素に適用できます。
　clip は、要素の切り抜き領域を指定するプロパティです。このプロパティを<img>タグ（要素）に対して設定すると、画像を切り抜くことができます。
※ この指定は、positionプロパティで absolute または fixed を指定している場合に機能します。
　img { position: absolute; clip: rect(20px 280px 180px 20px); }
プロパティ名値説　　明
clip rect(上 右 下 左) 各辺までの距離を数値＋単位（px 等）で指定
（初期値は auto … 切り抜かない）
　【値の指定方法】
rect( ) … ( )内に、上、右、下、左の順（時計回り）に値を指定します。それぞれの値は半角スペースで区切ります。
※ CSS 2.1 の仕様では、半角スペースではなくカンマ（ , ）で区切る事になっています。ただし、カンマ区切りには、Internet Exp.は対応していません。
 clipの値
指定する値 … 値は、画像の左上端から各辺までの距離で指定します。
autoの指定 … rect(20px auto 180px auto) のように auto（切り抜かない）を指定することもできます。
この例は、画像の上下のみを切り抜く（右と左を切り抜かない）指定です。
　★ 使用例とブラウザでの表示 (f1-3)
設定例 ： .f1-3clip { position: absolute; clip: rect(10px auto 60px auto); }
.f1-3posi { position: relative; width: 210px; height: 75px; border: 1px red solid; }
使　用　例   ブラウザの表示
<div class=f1-3posi>
<img src="photo1.jpg" class=f1-3clip>
<img src="photo1.jpg" style="float:right;">
</div>
☆ 切り抜きした写真の上部は、切り抜きした分（10px分）隙間が空きます。
☆ .f1-3posi { ... } は、表示領域を確保するための指定です。
画像の境界線画像の大きさ 画像の切り抜き画像の拡大 イメージcss ﾘﾌｧﾚﾝｽ へ
画像を拡大･縮小する(CSS)
zoom: 1.5;
　zoom は、全てのタグ（要素）に適用できます。
　zoom は、拡大･縮小を指定するプロパティです。このプロパティを<img>タグ（要素）に対して設定すると、画像の拡大と縮小を指定できます。
　img { zoom: 1.2; }   img { zoom: 80%; }
プロパティ名値説　　明
zoom 数値 or パーセント 拡大（縮小）率を指定
　【値の指定方法】
数値で指定％で指定説　　明
zoom: 1; zoom: 100%;通常の大きさ
zoom: 1.5; zoom: 150%;1.5倍に拡大
zoom: 0.5; zoom: 50%;半分に縮小
zoom は、Internet Exp.等の独自拡張機能です。※ CSS 2 では定義されていません。
画像サイズの変更は画像編集ソフトを使用した方が良いでしょう。
　★ 使用例とブラウザでの表示 (f1-4)
サンプルコード   ブラウザの表示
<img src="photo2.jpg">
：通常の大きさ		 ：通常の大きさ
<img src="photo2.jpg" style="zoom: 1.2;">
：1.2倍に拡大		 ：1.2倍に拡大
<img src="photo2.jpg" style="zoom: 80%;">
：80％に縮小		 ：80％に縮小
☆ zoom は、Internet Exp.等の独自拡張機能です（Firefox や Opera は未対応）。
関連するページ
HTML タグページ 画像サイズ：画像のサイズを指定する
画像の境界線画像の大きさ 画像の切り抜き画像の拡大 イメージcss ﾘﾌｧﾚﾝｽ へ