初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS positionによるレイアウト

CSSのレイアウトを組む際に役に立つpositionについて記述します

先日までjQueryについて書きましたがCSSが正確に記述できないとうまく効果が発揮できないので
一度CSSに立ち戻ります。

positionとは

  • positionプロパティは、ボックスの配置方法(基準位置)が、相対位置、もしくは絶対位置を指定します
  • positionプロパティで指定するのは、配置方法(基準位置)のみです。
static 特に配置方法を指定しません。

この値のときには、top、bottom、left、rightは適用されません。

これが初期値です。
relative 相対位置への配置となります。

positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute 絶対位置への配置となります。

親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。

親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed 絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

position: relative(相対的)

その要素本来の位置(左上)からの移動距離

f:id:bellsmarket:20150304224655j:plain


position: absolute(絶対的)

包含ブロック(左上)からの移動距離

f:id:bellsmarket:20150304224700j:plain

positionレイアウト

positionプロパティのデフォルト値はstatic(通常配置)ですが、absolute(絶対配置)に変更することで自由な配置のレイアウトにすることができます

絶対配置(absolute)

HTMLの文書構造的には優先順位が高いけど、レイアウトの配置は下部に配置したい事や優先順位は低いけどレイアウトでは上部に配置したいこと等少なくないかと思います。その際に使用するととても便利です。

position:absolute;が設定されると、そのコンテンツは通常の配置の流れから切り離され「基準ボックス」を基点として絶対値により自由に配置することができます。「基準ボックス」は任意に指定でき、指定しない場合は、bodyが基準ボックス扱いになります


f:id:bellsmarket:20150304225718j:plain

表示させたい場所の座標を指定する

  • 基準点が左上:left: 0; top: 0;
  • 基準点が左下:right: 0; top: 0;
  • 基準点が右下:left: 0; bottom: 0;
  • 基準点が右下:right: 0; bottom: 0;
  • 基準ボックスを変更する

    positionで配置したい要素をdivで囲んでいた場合。
    親要素であるdiv要素にposition:relative; を設定すると親要素のボックスの基準からの絶対値で指定ができます

    固定配置(fixed)

    【position:fixed;】 は、絶対位置でコンテンツを配置できますが、常にbody要素(ブラウザウィンドウ)が基準となることと、コンテンツをスクロールしてもウィンドウ内でずっと同じ位置に配置が可能です。
    使用するブラウザや環境によって、正しく動作しない可能性もあります。

    では実際に配置してみましょう。

    《HTML》

    <body>
    <div id="container">
    <div id="header"></div>
    <div id="wrapper">
    <div id="primary"></div>
    <div id="secondary"></div>
    <div id="advertisement"></div>
    </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>
    

    CSS

    #container { 
    width: 100%; /* ボックスの幅を指定 */ 
    } 
    #header { 
    background-color: #DDDDDD; 
    height: 50px; 
    margin-bottom: 10px; 
    } 
    #wrapper { 
    position: relative; 
    margin-bottom: 10px; 
    width: 100%; 
    } 
    #primary { 
    margin: 0 155px; /* 左右方向に155pxのマージンを指定する */ 
    background-color: #C7D5ED; 
    height: 300px; 
    } 
    #secondary { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 145px; /* ボックスの幅を変更 */ 
    height: 300px; 
    background-color: #F9CFBA; 
    } 
    #advertisement { 
    position: absolute; /* 値にabsoluteを指定 */ 
    right: 0; /* 右からの配置位置を指定 */ 
    top: 0; /* 上からの配置位置を指定 */ 
    width: 145px; /* ボックスの幅を指定 */ 
    height: 300px; 
    background-color: #E5C7ED; 
    } 
    #footer { 
    background-color: #DDDDDD; 
    height: 50px; 
    }
    

    《実行結果》

    f:id:bellsmarket:20150305000009p:plain

topへ戻る