CSSの絶対単位と相対単位
CSS絶対単位と相対単位はどちらも、距離単位のカテゴリに分類されます。
CSS相対単位は、別の要素を参照する要素の長さを定義します。
たとえば、 vh 相対単位はビューポートの高さを基準にしています。
以下はCSSの相対単位です-
| Sr.No | 単位と相対値 |
|---|---|
| 1 | ％ 親要素の寸法 |
| 2 | em 要素のフォントサイズ |
| 3 | 例 要素のフォントのエックスハイト |
| 4 | lh 要素の線の高さ |
| 5 | rem ルート要素のフォントサイズ |
| 6 | rlh ルート要素の線の高さ |
| 7 | vb ルート要素のブロック軸でのビューポートのサイズの1％ |
| 8 | vh ビューポートの高さの1％ |
| 9 | vmax ビューポートの大きい方の1％ |
| 10 | vmin ビューポートの小さい方の1％ |
| 11 | vw ビューポートの幅の1％ |
例
CSS相対単位の例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
html{
font-size: 14px;
line-height: normal;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#textContain {
font-size: 20px;
line-height: 2;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="1" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="em" checked><label>em</label>
<input class="radio" type="radio" name="heading" value="rem"><label>rem</label>
<input class="radio" type="radio" name="heading" value="vw"><label>vw</label>
<input class="radio" type="radio" name="heading" value="vh"><label>lh</label>
<input class="radio" type="radio" name="heading" value="ex"><label>ex</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
if(textSelect.value === '')
textPreview.textContent = 'Type some text first';
else{
for(var i=0; i<5; i++){
var radInp = document.getElementsByClassName('radio')[i];
if(radInp.checked === true){
textPreview.textContent = textSelect.value;
textPreview.style.fontSize = numSelect.value+radInp.value
}
}
}
}
</script>
</body>
</html> 出力
上記のコードの出力は次のとおりです-
ボタンをクリックする前に-
「em」オプションが選択され、テキストフィールドが空の状態で「プレビュー」ボタンをクリックした後-
「rem」オプションが選択され、空でないテキストフィールドが表示された状態で「プレビュー」ボタンをクリックした後-
「em」オプションが選択され、空でないテキストフィールドが表示された状態で「プレビュー」ボタンをクリックした後-
以下はCSSの絶対単位です-
| Sr.No | 単位と名前 |
|---|---|
| 1 | cm センチメートル（1 cm =100 mm） |
| 2 | in インチ（1インチ=2.54 cm） |
| 3 | mm ミリメートル |
| 4 | pc パイカ（1個=12ポイント） |
| 5 | pt ポイント（1ポイント=1/72インチ） |
| 6 | px ピクセル（1ピクセル=0.75ポイント） |
例
CSS絶対単位の例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<title>CSS Absolute Units</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Absolute-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="10" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="pc"><label>pc</label>
<input class="radio" type="radio" name="heading" value="pt"><label>pt</label>
<input class="radio" type="radio" name="heading" value="px" checked><label>px</label>
<input class="radio" type="radio" name="heading" value="in"><label>in</label>
<input class="radio" type="radio" name="heading" value="cm"><label>cm</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
if(textSelect.value === '')
textPreview.textContent = 'Type some text first';
else{
for(var i=0; i<5; i++){
var radInp = document.getElementsByClassName('radio')[i];
if(radInp.checked === true){
textPreview.textContent = textSelect.value;
textPreview.style.fontSize = numSelect.value+radInp.value
}
}
}
}
</script>
</body>
</html> 出力
上記のコードの出力は次のとおりです-
ボタンをクリックする前に-
「px」オプションが選択され、空でないテキストフィールドが表示された状態で「プレビュー」ボタンをクリックした後-
「pt」オプションが選択され、空でないテキストフィールドが表示された状態で「プレビュー」ボタンをクリックした後-
「pc」オプションが選択され、空でないテキストフィールドが表示された状態で「プレビュー」ボタンをクリックした後-
-
CSSでボタン要素を垂直方向と水平方向の中央に配置するにはどうすればよいですか？
CSSを使用してボタンを垂直方向および水平方向に中央揃えするには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .centered { display: flex; &
-
CSSで要素を垂直方向と水平方向に中央揃えする方法は？
CSSを使用して要素を垂直方向および水平方向に中央揃えするには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .centered { display: flex; &n