CSS での配置の使用方法の詳細な研究 (要約)

CSS における位置指定の概要 `position`属性は英語で`位置`を意味し、 `CSS`での主な機能は要素の配置を設定することです。 `CSS`には`3`種類の配置方法があります。

CSS における位置指定の概要

position属性は英語で位置を意味し、 CSSでの主な機能は要素の配置を設定することです。

CSSには3種類の配置方法があります。

プロパティ値	説明する
修理済み	固定位置を設定します。
相対的	相対的な位置を設定します。
絶対	絶対位置を設定します。

固定ポジショニングの練習

固定配置を練習する前に、コード構造がどのようになっているかを見てみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      
       幅: 100ピクセル;
       高さ: 100px;
       背景色: 赤;
       マージン: 0;
       パディング: 0;
     }
     div{
       幅: 200ピクセル;
       高さ: 200px;
       背景色:春緑;
        マージン: 0;
        パディング: 0;
     }
  </スタイル>
</head>

<本文>
   <h1 class="box"></h1>
   <div></div>
</本文>

</html>

結果プロット

ここで、 h1要素を固定位置に設定して、上記の構造上の実践とどのように異なるかを確認し、次に固定位置の特徴のいくつかを分析します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      位置:固定;
       幅: 100ピクセル;
       高さ: 100px;
       背景色: 赤;
       マージン: 0;
       パディング: 0;
     }
     div{
       幅: 200ピクセル;
       高さ: 200px;
       背景色:春緑;
        マージン: 0;
        パディング: 0;
     }
  </スタイル>
</head>

<本文>
   <h1 class="box"></h1>
   <div></div>
</本文>

</html>

結果プロット

固定位置決め特性は次のように分析されます。

固定位置はブラウザウィンドウを基準に設定されます。ページがどのようにスクロールされても、固定位置の要素の位置は影響を受けません。
固定配置要素の特徴: 標準のドキュメントフローから分離されています。
固定位置要素の特徴: 標準のドキュメントフローの要素よりも階層が高いため、h1 タグに固定位置を設定すると、div タグと重なります。
固定配置要素の特徴: h1タグはdivタグの上にあるため、固定配置要素はスペースを占有しなくなります。

相対的な位置の練習

相対的な配置を練習する前に、コード構造がどのようになっているかを見てみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

ここで、 .div2要素のclass属性値を相対配置に設定して、上記の構造的実践との違いを確認し、相対配置のいくつかの特性を分析します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
       位置: 相対的;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

注意: 相対配置の座標位置を設定しないと、まったく移動しません。

作成者はclass属性値を使用してdiv2要素の位置座標を設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
       位置: 相対的;
       左: 50px;
       上: 50px;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

相対的な位置決め特性は次のように分析されます。

相対的に配置した要素は、標準のドキュメントフローから外れません。
相対的に配置された要素に座標が設定されていない場合、その要素はそのまま配置されます。
相対的に配置された要素は座標位置を設定し、元の位置に基づいて移動位置の計算を開始します。
相対的に配置された要素は、標準のドキュメントフロー内の要素よりも高いレベルにあり、標準のドキュメントフロー内の要素をカバーします。
相対的に配置された要素の場合は、負の値に設定できます。

絶対位置決めの練習

絶対位置決めを実践する前に、コード構造がどのようになっているかを見てみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

ここで、 .div2要素のclass属性値を絶対位置に設定して、上記の構造的実践との違いを確認し、次に絶対位置付けのいくつかの特徴を分析します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
       位置:絶対;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

注意: 絶対配置は標準のドキュメントフローの範囲外です。

div2要素の位置座標は、 class属性値で設定します。読者に直感的な印象を与えるために、最も外側のdiv要素を中央揃えに設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      マージン: 0px 自動;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
       位置:絶対;
       左:0px;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

注: 絶対位置の要素がブラウザの左端に表示されるのはなぜですか? 絶対位置の移動の原則: 絶対位置の要素は、親要素を探して、位置があるかどうかを確認します。位置がある場合は、親要素に従って配置します。親要素に位置がない場合は、親要素の親要素を探して、位置があるかどうかを確認します。これは、 body要素がブラウザの位置であるため、 body要素が停止するまで続きます。ここまで述べて、著者は新しい学習者に直感的な印象を与えましたので、実際に試して、本当のトリックを見てみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ポジショニング</title>
  <スタイル>
     。箱{
      幅: 400ピクセル;
      高さ: 300px;
      境界線: 1px 濃いオレンジ色;
      マージン: 0px 自動;
      位置: 相対的;
      
     }
    .box div{
       幅: 100ピクセル;
       高さ: 100px;
     }
     .div1{
       背景色: 赤;
     }
     .div2{
       背景色: スレートブルー;
       位置:絶対;
       右:0px;
     }
     .div3{
       背景色: スプリンググリーン;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</本文>

</html>

結果プロット

注: 現在、著者は絶対配置座標を右配置に変更し、親要素は相対配置を設定しています。ここでは実践しません。配置された親要素の親要素が祖父要素でもあり、親要素と祖父要素の両方が同時に配置されている場合、要素は祖父要素ではなく親要素に従って配置されます。

絶対位置決めの特性は次のように分析されます。

絶対位置に配置された要素は、標準のドキュメントフローの範囲外です。
絶対位置に配置された要素は、標準のドキュメントフロー内の要素をオーバーライドします。
絶対位置に配置された要素は、スペースを占有しなくなります。
絶対位置に配置された要素は、親要素の祖先要素の間にあるかどうかに基づいて配置されます。祖先要素の間にある場合、配置は最も近い要素に基づいて設定されます。祖先要素の間にない場合は、配置は body 要素に基づいて設定されます。
絶対配置された要素の親要素は、絶対配置を含め、あらゆる方法で配置できます。通常は絶対配置と組み合わせて使用される相対配置を使用することをお勧めします。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: さまざまなネットワーク画像形式におけるPNGの利点の詳細な説明

>>: HTML インライン要素と HTML ブロックレベル要素の概要と違い