ブログデザインにおいて、
「position」は超重要なCSSです。
使う回数はそれほど多くはありませんが、
使いこなせるかどうかで、
デザインの自由度が180度変わります。
しかし、調べてみても、
ポジションについて書いてある事は、
「絶対位置」や「相対位置」のような、
専門用語が多すぎると感じました。
今回は、そういう難しい用語は置いといて、
実践でどう使うかを紹介します。
ポジション
「POSITION」はその名の通り、
ポジション（位置）を操作するCSSです。
デザインで主に使うのは、
position：fixed;
position：relative;
position：absolute;
の3つです。
fixed
「position：fixed;」は、
指定したタグを画面上で固定する事が出来ます。
画面をスクロールしても、
ずっと画面上の同じ位置に表示される為、
メニューバーによく使われます。
BLOGRAMでは、スクロールの方向によって、
メニューバーが出現したり、
消えたりするようなプログラムを組んでいますが、
中身は「position：fixed;」を使って、
表示位置を画面固定しています。
今回、画面右下に「position：fixed;」を使った表示を作っておきました。
スクロールしてみて、どんな動きをするのか確認してみて下さいね。
位置を指定する方法
fixedは、position:fixed;の他に、
「top・bottom・left・right」の指定が必要です。
例えば、右下に表示する場合は、
bottom:0;
right:0
の2つの指定が必要になります。
ちなみに、
「bottom:0;」は、「下から：０px」
「right:0;」は、「右から:０px」という意味で、
どこから何px離れているかを指定しています。
relative absolute
relativeとabsoluteは、
個別で使うことも出来ますが、
基本的にセットで扱う方が使いやすいかと思います。
例えば、新しい記事のサムネイルに「new」という表記をしたい場合、
サムネイル側にrelative;、newにabsolute;を付けてあげましょう。
例えば、
サムネイルの右上にNEWと表示させたい場合は、
以下の様に、大枠（class=”thumnail”)にrelativeを指定して、
小枠（class=”new”)にabsoluteを指定します。
<div class="thumbnail"> <p>サムネイル</p> <div class="new">NEW</div> </div>
.thumbnail{
position: relative;
}
.new{
position:absolute;
right:0px;
top: 0px;
}
サムネイル
要するに、relativeの中のabsoluteは、
relativeを基準として移動させる事ができるという事です。
今回は、top:0; , right:0; で右上に固定していますが、
位置の指定にはマイナスも使えるので、
右上にはみ出したデザインにも出来たりします。
まとめ
WEBデザインで必須である、
ポジションについての紹介でした。
正直、WEBデザインをする上では、
ポジションを使えると使えないとでは大違いです。
POSITIONは、
より自由度の高いデザインを実現するためにも、
覚えておかなければならないCSSだと思います。
しっかり頭に入れておきましょう。