レッスン
開始
勉強を始める
CodeGym /コース /Frontend SELF JA /ポジショニングの種類

ポジショニングの種類

Frontend SELF JA
レベル 21 , レッスン 0
使用可能

1.1 ポジショニング static

CSSにおけるポジショニングは、ウェブページ上で要素がどのように配置されるかを定義するものだよ。さまざまなポジショニングのタイプを理解することで、複雑で動的なレイアウトを作成できるのさ。ここで各ポジショニングのタイプを詳しく見ていくよ： static, relative, absolute, fixed と sticky.

staticはすべての要素のデフォルトのポジショニング値なんだ。これを持つ要素はドキュメントの通常のフローに配置されて、つまりHTMLマークアップで定義された順番に並んでいくってことさ。

使用例:

CSS 
    
      .static-box {
        background-color: #3498db;
        color: white;
        padding: 20px;
        margin: 10px;
      }
HTML 
    
      <div class="static-box">要素 1</div>
      <div class="static-box">要素 2</div>
      <div class="static-box">要素 3</div>

コードの説明:

  • .static-box: position: static;を持つ要素で、ドキュメントの通常のフロー内で一つずつ配置されるよ

1.2 ポジショニング relative

relativeは、要素をドキュメントのフロー内の通常の位置に対して相対的に配置することができるよ。要素は通常のフローに残るが、top, right, bottom, leftのプロパティを使って移動させられるんだ。

使用例:

CSS 
    
      .box {
        margin: 5px;
        padding: 20px;
        color: white;
        background-color: #2ecc71;
      }

      .relative-box {
        position: relative;
        top: 15px;
        left: 15px;
        color: white;
        background-color: #e74c3c;
      }
HTML 
    
      <div>
        <div class="box">通常の要素</div>
        <div class="box relative-box">移動した要素</div>
        <div class="box">通常の要素</div>
      </div>

コードの説明:

  • .relative-box: position: relative;を持つ要素で、通常の位置から下に15ピクセル、右に15ピクセル移動される

1.3 ポジショニング absolute

absoluteは、static以外のポジショニングを持つ最も近い先祖に対して要素を配置することができるよ。もしそんな先祖がいなければ、要素は初期コンテキスト（通常は<html>）に対して配置されるんだ。

使用例:

CSS 
    
      .container {
        position: relative;
      }

      .box {
        margin: 5px;
        padding: 20px;
        color: white;
        background-color: #2ecc71;
      }

      .absolute-box {
        position: absolute;
        top: 15px;
        left: 15px;
        color: white;
        background-color: #e74c3c;
      }
HTML 
    
      <div class="container">
        <div class="box">通常の要素</div>
        <div class="box absolute-box">絶対に配置された要素</div>
        <div class="box">通常の要素</div>
      </div>

コードの説明:

  • .container: position: relative;を持つコンテナで、その中にabsolute要素が配置されるよ
  • .absolute-box: position: absoluteを持つ要素で、コンテナに対して配置される。 コンテナの左上から15ピクセル下に、15ピクセル右に移動される。

1.4 ポジショニング fixed

fixedは、要素をブラウザのウィンドウに対して配置することができるよ。この要素はページのスクロール中もその位置に留まるんだ。

使用例:

CSS 
    
      .container {
        height: 200px;
        overflow: auto;
      }
      .fixed-box {
        position: fixed;
        background-color: #f39c12;
        color: white;
        padding: 20px;
        top: 15px;
        right: 15px;
      }
HTML 
    
      <div class="container">
        <div class="fixed-box">固定された要素</div>
        Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
        Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
        Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
        Nam ex sem, dignissim ac scelerisque vel, luctus vel orci. Donec sed elit finibus, pretium dolor non, bibendum purus. Morbi in mollis nunc. Nulla finibus enim at iaculis sagittis. Phasellus a dictum purus, in consectetur felis. Aliquam odio turpis, pharetra et interdum quis, fermentum at mi. Vestibulum nec leo mauris. Morbi urna lacus, eleifend vel turpis finibus, ultricies pretium urna. Donec convallis ipsum quis massa porttitor tincidunt et id nibh. Nullam dictum interdum diam, vel mollis tortor. Curabitur lobortis lorem nulla, sed malesuada quam cursus ac. Nulla ac diam enim. Nullam nibh odio, consectetur rutrum egestas nec, elementum at nisl. Pellentesque vitae tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam condimentum metus id eros dignissim, vel auctor sem lacinia.
        Donec nisl nisi, luctus ut turpis nec, vestibulum tempor velit. Nullam tristique ut turpis nec congue. Vivamus sed turpis nunc. Nulla vulputate, urna vitae fermentum sollicitudin, eros quam facilisis felis, ac tristique ex mauris maximus quam. Morbi eu laoreet turpis, non semper ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla hendrerit, orci quis aliquam finibus, magna metus dapibus elit, eget rutrum leo nulla non nisi.
        Vivamus id tempor massa, at consectetur nisi. Maecenas magna augue, ultrices vel neque sit amet, porttitor varius tortor. Maecenas consequat neque tristique, cursus eros in, pretium mauris. Quisque eu euismod nunc, a mattis enim. Cras vel sollicitudin arcu, quis suscipit sem. Donec imperdiet nunc sit amet risus feugiat, et fermentum dui venenatis. Mauris quis lectus eu velit scelerisque suscipit eu sit amet sapien. Donec sed sagittis sem, in ultricies nulla. Suspendisse placerat elit sit amet ullamcorper auctor. Aliquam condimentum quis ex id vestibulum. Vivamus erat dolor, tincidunt vitae bibendum nec, euismod a dui. Nullam odio risus, interdum sit amet orci sit amet, porta interdum urna. Aenean at risus nec nulla scelerisque fringilla in ultricies ante.
        Sed malesuada quis massa sed convallis. Praesent non erat vulputate, convallis nunc a, finibus tellus. Proin sit amet turpis a est aliquam scelerisque. Praesent vestibulum enim id odio faucibus, quis sollicitudin tellus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus luctus libero, sed faucibus ante feugiat id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce pellentesque lacus magna, sit amet suscipit felis fermentum porta. Pellentesque vulputate vehicula elit, id lacinia nisi aliquet eget. In sed ligula sed nunc dapibus accumsan id ut risus. Integer tristique eros a turpis congue, sit amet condimentum lacus ultricies. Curabitur pulvinar, leo eu elementum lacinia, sapien mauris faucibus libero, ut commodo neque arcu ac nibh. Integer eu sapien convallis, fermentum risus et, euismod odio. Maecenas maximus lectus nec dui facilisis finibus. Duis volutpat, sapien sit amet vehicula convallis, dui lectus finibus risus, faucibus gravida leo quam non eros.
      </div>

コードの説明:

  • .fixed-box: position: fixed;を持つ要素で、ページのスクロール中もその場所に留まる。 ブラウザウィンドウの右上に配置される

1.5 ポジショニング sticky

stickyは、スクロール中に指定された位置に達するまではrelativeとして振る舞い、その後fixedのように固定されるんだ。

使用例:

CSS 
    
      .sticky-box {
        position: sticky;
        background-color: #8e44ad;
        color: white;
        padding: 20px;
        top: 0;
      }

      .text {
        margin-top: 15px;
      }

      .content {
        height: 200px;
        background-color: #ecf0f1;
        overflow: auto;
      }
HTML 
    
      <div class="content">
        <div class="sticky-box">Sticky 要素</div>
        <div class="text">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          Nam ex sem, dignissim ac scelerisque vel, luctus vel orci. Donec sed elit finibus, pretium dolor non, bibendum purus. Morbi in mollis nunc. Nulla finibus enim at iaculis sagittis. Phasellus a dictum purus, in consectetur felis. Aliquam odio turpis, pharetra et interdum quis, fermentum at mi. Vestibulum nec leo mauris. Morbi urna lacus, eleifend vel turpis finibus, ultricies pretium urna. Donec convallis ipsum quis massa porttitor tincidunt et id nibh. Nullam dictum interdum diam, vel mollis tortor. Curabitur lobortis lorem nulla, sed malesuada quam cursus ac. Nulla ac diam enim. Nullam nibh odio, consectetur rutrum egestas nec, elementum at nisl. Pellentesque vitae tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam condimentum metus id eros dignissim, vel auctor sem lacinia.
          Donec nisl nisi, luctus ut turpis nec, vestibulum tempor velit. Nullam tristique ut turpis nec congue. Vivamus sed turpis nunc. Nulla vulputate, urna vitae fermentum sollicitudin, eros quam facilisis felis, ac tristique ex mauris maximus quam. Morbi eu laoreet turpis, non semper ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla hendrerit, orci quis aliquam finibus, magna metus dapibus elit, eget rutrum leo nulla non nisi.
          Vivamus id tempor massa, at consectetur nisi. Maecenas magna augue, ultrices vel neque sit amet, porttitor varius tortor. Maecenas consequat neque tristique, cursus eros in, pretium mauris. Quisque eu euismod nunc, a mattis enim. Cras vel sollicitudin arcu, quis suscipit sem. Donec imperdiet nunc sit amet risus feugiat, et fermentum dui venenatis. Mauris quis lectus eu velit scelerisque suscipit eu sit amet sapien. Donec sed sagittis sem, in ultricies nulla. Suspendisse placerat elit sit amet ullamcorper auctor. Aliquam condimentum quis ex id vestibulum. Vivamus erat dolor, tincidunt vitae bibendum nec, euismod a dui. Nullam odio risus, interdum sit amet orci sit amet, porta interdum urna. Aenean at risus nec nulla scelerisque fringilla in ultricies ante.
          Sed malesuada quis massa sed convallis. Praesent non erat vulputate, convallis nunc a, finibus tellus. Proin sit amet turpis a est aliquam scelerisque. Praesent vestibulum enim id odio faucibus, quis sollicitudin tellus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus luctus libero, sed faucibus ante feugiat id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce pellentesque lacus magna, sit amet suscipit felis fermentum porta. Pellentesque vulputate vehicula elit, id lacinia nisi aliquet eget. In sed ligula sed nunc dapibus accumsan id ut risus. Integer tristique eros a turpis congue, sit amet condimentum lacus ultricies. Curabitur pulvinar, leo eu elementum lacinia, sapien mauris faucibus libero, ut commodo neque arcu ac nibh. Integer eu sapien convallis, fermentum risus et, euismod odio. Maecenas maximus lectus nec dui facilisis finibus. Duis volutpat, sapien sit amet vehicula convallis, dui lectus finibus risus, faucibus gravida leo quam non eros.
        </div>
      </div>

コードの説明:

  • .sticky-box: position: sticky;を持つ要素で、relativeのように振る舞い、ブラウザウィンドウの上部に達するとその位置に固定され、以降のスクロール中もその場所に留まる

1.6 ポジショニングタイプの比較

ポジショニングタイプの比較:

ポジショニングタイプ 説明 使用例
static デフォルトのポジショニング。要素はドキュメントの通常のフローに従う。 要素の基本配置。
relative 要素の通常の位置に対する相対的なポジショニング。 要素を通常のフローから削除せずに移動すること。
absolute static以外のポジショニングを持つ最も近い先祖に対するポジショニング。 コンテナ内の要素の正確な配置。
fixed ブラウザウィンドウに対するポジショニング。 ページのスクロール中にその場に留まる必要がある要素。
sticky 指定した位置に達するまでrelativeとして振る舞い、その後fixedとして固定される。 スクロール時に要素を固定すること。
コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION