max-width …… 幅の最大値を指定する
広告
max-widthプロパティは、
<IMG>・
<INPUT>・
<TEXTAREA>・
<SELECT>
などの領域の幅の最大値を指定する際に使用します。
最大値を指定することで、これらの要素の幅を一定範囲内に収めることができます。
指定方法には、実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を％で指定する方法があります。
また、幅を制限させないようにするにはnoneを指定します。
■値
- none
- 最大値の制限をしません。これが初期値です。
- 数値で指定
- 数値にpxなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。
- ％で指定
- ％値で指定します。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
img.sample {max-width: 50px;}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<img border=”0″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/img002.gif” alt=”サンプルイメージ”
class=”sample”>
</body>
</html>
↓↓↓
ブラウザ上の表示
■関連項目
width …… 幅を指定する
max-width …… 幅の最大値を指定する
min-width …… 幅の最小値を指定する
height …… 高さを指定する
max-height …… 高さの最大値を指定する
min-height …… 高さの最小値を指定する
max-width …… 幅の最大値を指定する
min-width …… 幅の最小値を指定する
height …… 高さを指定する
max-height …… 高さの最大値を指定する
min-height …… 高さの最小値を指定する
広告