CSS ディメンション


CSS Dimension

CSS Dimension プロパティを使用すると、要素の高さと幅を制御できます。同様に、行間を広げることもできます。

その他の例

例: 要素の高さの設定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img.normal
{
	height:auto;
}
img.big
{
	height:120px;
}
p.ex
{
	height:100px;
	width:100px;
}
</style>
</head>

<body>
<img class="normal" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
<img class="big" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
</html>

例の実行»

オンライン例を表示するには、[例の実行] ボタンをクリックしてください

この例では、要素の高さを設定する方法を示します。さまざまな要素の高さ。

例: パーセンテージを使用して画像の高さを設定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>

<body>
<img class="normal" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
<img class="big" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
<img class="small" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
</body>
</html>

サンプルの実行 »

オンラインサンプルを表示するには、「サンプルを実行」ボタンをクリックしてください

この例は、要素の高さを設定する方法を示しますパーセント値を使用します。

例: ピクセル値を使用して要素の幅を設定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {width:200px;}
</style>
</head>
<body>

<img src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />

</body>
</html>

サンプルの実行 »

オンラインサンプルを表示するには、「サンプルを実行」ボタンをクリックしてください

この例は、ピクセルの使用方法を示します要素の幅を設定する値。

例: 要素の最大高さを設定する

<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
p
{
	max-height:50px;
	background-color:yellow;
}
</style>
</head>

<body>
<p>本段落的最大高度被设置为 50px。 本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。</p>
</body>
</html>

例の実行 »

オンライン例を表示するには、「例を実行」ボタンをクリックしてください

この例では、要素の最大高さを設定する方法を示します。

例: パーセンテージを使用して要素の最大幅を設定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	max-width:20%;
	background-color:yellow;
}
</style>
</head>
<body>

<p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>

</body>
</html>

サンプルの実行 »

オンラインサンプルを表示するには、「サンプルを実行」ボタンをクリックしてください

この例は、パーセンテージ値の使用方法を示します。要素の最大幅を設定します。

例: 要素の最小の高さを設定する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	min-height:100px;
	background-color:yellow;
}
</style>
</head>

<body>
<p>The minimum height of this paragraph is set to 100px.</p>
</body>
</html>

例の実行 »

オンライン例を表示するには、「例を実行」ボタンをクリックしてください

この例では、要素の最小の高さを設定する方法を示します。

例: ピクセル値を使用して要素の最小幅を設定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	min-width:150px;
	background-color:yellow;
}
</style>
</head>

<body>
<p>这个段落的最低限度设置为o 150px.</p>
</body>
</html>

サンプルの実行 »

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

この例は、ピクセル値を使用して要素の最小幅を設定する方法を示します。

すべての CSS Dimension プロパティ

プロパティ説明
高さ 要素の高さを設定します。
line-height 行の高さを設定します。
max-height要素の最大の高さを設定します。
max-width要素の最大幅を設定します。
min-height 要素の最小の高さを設定します。
min-width要素の最小幅を設定します。
width要素の幅を設定します。