くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[CSS]positionの基礎

今日の講義はpositionについてです。

 

positionが使われているのはどんなところ?

例えば 「ケンコーコム

f:id:pleasure10501:20150324221233p:plain

一番上にあるロゴやグローバルナビは、CSSを無効化してみると、
HTMLのかなり下の方に記述されているのがわかります。

このように、HTMLで記述された順序通り順ではなく、
任意の場所に部品を配置したり、あるいは部品を重ねたり

f:id:pleasure10501:20150324222305p:plain

↑ このように小さな写真をたくさん並べることも、positionでできます!
floatでは無理。

 

☆HTMLが文書構造であるのに対し、CSSは装飾を設定します。

別の言い方をすると、
HTMLでは検索エンジンという機械に読ませたい重要なことを優先的に記述する。
CSSは人が読みやすいように装飾や配置を設定する。

役割が違います。

 

練習①

3つの箱(divで面積を確保する)
wrapper(親box)  300 × 300px
box1(子box)    100 × 100px
box2 (子box)    150 × 150px

①通常だとこんな状態

f:id:pleasure10501:20150324225131p:plain

<body>
<div id="wrapper">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</div>
</body>

②次に、 親box、子boxにそれぞれpositionを指定します

親box { position: relative;
 left: 100px;
 top: 100px; }
子box{  position: absolute;
    left: 100px;
   

top: 100px; }

 ↓ こうなります

f:id:pleasure10501:20150324225941p:plain

親boxの位置が、左から100px、上から100px分移動しました
子boxは、親の左上を基点にして左から100px、上から100px移動しています。

また、子boxは移動距離が2つとも全く同じなので、子box1は下に隠れてしまっています。
CSSの記述した順番が後ろのものが上に重なっていくので、サイズの大きいbox2が上になるのです。

③z-indexで上下の重なりを指定する

box1をbox2の上にするためには、z-indexを設定します。
#box1 {
  width: 100px;
  height: 100px;
  background: #DE759E;
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 200;
}
#box2 {
  width: 150px;
  height: 150px;
  background: #A4CCD4;
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 100;
}

数値の大きい方が上になります。↓

f:id:pleasure10501:20150324231203p:plain

 

 テキスト等には"z-index: 1""z-index: 2""z-index: 3"・・・と書いてありますが、現場では100、200と使うようです(先生談)

広告を非表示にする