自由自在なWEBデザインを実現してくれるすごいCSS

ブログデザインにおいて、

「position」は重要なCSSです。

 

使う回数はそれほど多くはありませんが、

使いこなせるかどうかで、

デザインの自由度が180度変わります。

 

 

しかし、調べてみても、

ポジションについて書いてある事は、

「絶対位置」や「相対位置」のような、

専門用語が多すぎると感じました。

 

 

今回は、そういう難しい用語は置いといて、

実践でどう使うかを紹介します。

 

 

 

ポジション

 

「POSITION」はその名の通り、

ポジション(位置)を操作するCSSです。

 

 

デザインで主に使うのは、

position:fixed;

position:relative;

position:absolute;

の3つです。

 

 

fixed

 

「position:fixed;」は、

指定したタグを画面上で固定する事が出来ます。

 

画面をスクロールしても、

ずっと画面上の同じ位置に表示される為、

メニューバーによく使われます。

 

 

BLOGRAMでは、スクロールの方向によって、

メニューバーが出現したり、

消えたりするようなプログラムを組んでいますが、

中身は「position:fixed;」を使って、

表示位置を画面固定しています。

 

 

今回、画面右下に「position:fixed;」を使った表示を作っておきました。

スクロールしてみて、どんな動きをするのか確認してみて下さいね。

 

FIXED

 

位置を指定する方法

 

fixedは、position:fixed;の他に、

「top・bottom・left・right」の指定が必要です。

 

例えば、右下に表示する場合は、

bottom:0;

right:0

の2つの指定が必要になります。

 

ちなみに、

「bottom:0;」は、「下から:0px」

「right:0;」は、「右から:0px」という意味で、

どこから何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;
}

 

 

サムネイル

NEW

 

 

要するに、relativeの中のabsoluteは、

relativeを基準として移動させる事ができるという事です。

 

今回は、top:0; , right:0; で右上に固定していますが、

位置の指定にはマイナスも使えるので、

右上にはみ出したデザインにも出来たりします。

 

 

 

まとめ

 

WEBデザインで必須である、

ポジションについての紹介でした。

 

 

正直、WEBデザインをする上では、

ポジションを使えると使えないとでは大違いです。

 

POSITIONは、

より自由度の高いデザインを実現するためにも、

覚えておかなければならないCSSだと思います。

 

しっかり頭に入れておきましょう。