CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSユニットを理解する

CSSユニットには、フォントサイズ、文字サイズ、ビューポートサイズなど、さまざまなカテゴリがあります。大きく分けて、上記のサブカテゴリで構成される絶対単位と相対単位の2つのカテゴリがあります。

以下は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;
}
#container {
   display: flex;
}
.child{
   margin: 5px 0;
   height: 40px;
   color: white;
   border-width: 4px 0 4px 4px;
   border-color: black;
   border-style: solid;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
   width:1cm;
}
.child:nth-of-type(2){
   background-color: #F44336;
   width:1in;
}
.child:nth-of-type(3){
   background-color: #C303C3;
   width:1mm;
}
.child:nth-of-type(4){
background-color: #4CAF50;
width:1pc;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
   width:1pt;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
   width:1px;
   border-right-width: 4px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Absolute-Units</legend>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div><br>
<div><span class="child">cm</span><span class="child">in</span><span class="child">mm</span><span class="child">pc</span><span class="child">pt</span><span class="child">px</span></div><br>
<input type="number" id="numSelect" value="1" min="1">
<input type="button" onclick="changeWidth()" value="Preview">
<script>
var numSelect = document.getElementById("numSelect");
function changeWidth() {
   var divChild = document.getElementsByClassName('child');
   for(var i=0; i<6; i++){
      divChild[i].style.width = numSelect.value+divChild[i+6].textContent;
}}
</script>
</body>
</html>

出力

ボタンをクリックする前に-

CSSユニットを理解する

[プレビュー]をクリックした後 番号フィールドが設定されたボタン-

CSSユニットを理解する

以下はCSSの相対単位です-

Sr.No 単位と相対値
1 ％
親要素の寸法
2 em
要素のフォントサイズ
3 例
要素のフォントのエックスハイト
4 rem
ルート要素のフォントサイズ
5 vh
ビューポートの高さの1％
6 vmax
ビューポートの大きい方の1％
7 vmin
ビューポートの小さい方の1％
8 vw
ビューポートの幅の1％

CSS相対単位の例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#container {
   display: flex;
}
.child{
   margin: 5px 0;
   height: 40px;
   color: white;
   border-width: 4px 0 4px 4px;
   border-color: black;
   border-style: solid;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
   width:1%;
}
.child:nth-of-type(2){
   background-color: #F44336;
   width:1em;
}
.child:nth-of-type(3){
   background-color: #C303C3;
   width:1ex;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
   width:1rem;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
   width:1vh;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
   width:1vw;
   border-right-width: 4px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div><br>
<div><span class="child">%</span><span class="child">em</span><span class="child">ex</span><span class="child">rem</span><span class="child">vh</span><span class="child">vw</span></div><br>
<input type="number" id="numSelect" value="1" min="1">
<input type="button" onclick="changeWidth()" value="Preview">
<script>
var numSelect = document.getElementById("numSelect");
function changeWidth() {
   var divChild = document.getElementsByClassName('child');
   for(var i=0; i<6; i++){
      divChild[i].style.width = numSelect.value+divChild[i+6].textContent;
}}
</script>
</body>
</html>

出力

ボタンをクリックする前に-

CSSユニットを理解する

[プレビュー]をクリックした後 「em」のボタン オプションが選択され、テキストフィールドが空-

CSSユニットを理解する


  1. CSSを使用した子要素の選択

    CSS子コンビネータは、親要素のすべての子要素を選択するために使用されます。 CSS子コンビネータの構文は次のとおりです。 セレクター{属性：/*値*/} CSS子孫コンビネータは、親要素のすべての子孫を選択するために使用されます CSS子孫コンビネータの構文は次のとおりです セレクターセレクター{属性：/*値*/} 例 次の例は、CSSの子と子孫のコンビネータを示しています。 * {text-align：center;ボーダー：10pxグルーブトマト;} ::first-line {box-shadow：inset 0 0 7px cornflowerblue;}

  2. CSSのclientHeight、offsetHeight、scrollHeightプロパティを理解する

    clientHeight clientHeightは、パディングを含む要素の高さの尺度を示します。境界線、マージン、およびスクロールバーの高さ（再調整されている場合）はこれに含まれないことに注意してください。 offsetHeight offsetHeightは、垂直方向のパディング、上下の境界線を含む要素の高さの尺度を示します。マージンはここに含まれていません。 scrollHeight scrollHeightは、垂直方向のパディングと、オーバーフロープロパティのために画面に表示されないコンテンツを含む要素の高さの測定値を示します。 次の例は、clientHeight、o