CSS positionプロパティの使い方

HTMLやCSSの勉強を始めた人は、誰もが思った通りのレイアウトに出来ず、苦しんだ経験があるのではないかと思います。

私も同じように苦しんだのですが、CSSのpositionプロパティの使い方を理解してから急にレイアウトのレベルが上がったことを実感しました。そのため、この記事で同じような人たちの助けとなれば非常に嬉しいです。

具体的にはpositionのrelativeやabsoluteの使い方についてのまとめとなります。

作る画面について

私が作成中のアプリのトップページ画面を例に説明していきます。
最近は画面仕様の重要性に気づいたため、まずどのような画面を作るかKeynoteを使って簡単にまとめるようにしています。

そして本記事で作ろうとしている画面がこちらとなります。この画像をpositonプロパティを使ってレイアウトしていきます。positionプロパティの使い方を知りたい方には、少し遠回りになりますが順を追って説明します。
f:id:Okerra:20180304190031p:plain

positionプロパティの考え方

relativeとabsolute

positionプロパティには設定値がいくつかありますが、ここではrelativeとabsoluteのみ使って説明します。

このプロパティには親classと子classの考えがあります。
f:id:Okerra:20180304191931p:plain
親classは基準点となるclassで、設定値にはrelativeを設定します。
肝心の子classにはabsoluteを設定します。そうすることで、親classを基準(x, y)=(0, 0)としてそこからどれだけ離れているかを指定することができます。

具体的な位置の検討

子classには親classからどれだけ離れているかを指定する必要があります。そこで具体的な位置を考えていきます。

1. 画像の中心位置の決定

まずは画像の中心位置について検討します。レスポンシブになるように比率で考えます。
f:id:Okerra:20180304201359p:plain
これにより画像の中心は(x, y)=(75vw, 50vh)で表現できます。

vh -> 表示されているディスプレイ高さ
vw -> 表示されているディスプレイ幅

100vw：100vh なら画面いっぱいを表します。75vw, 50vhなら画面の幅75%、高さ50%の位置を表現できます。
直接pxで表現することもできるのですが、どの画面サイズで見ても同じ位置に来るようにvh,vwの比率表現を使います。

2.画像の左上の座標を考える

画像の左上の位置を考えていきます。
f:id:Okerra:20180304194656p:plain

画像の中心が分かりましたが、間違ってもこれを設定しないように注意して下さい。
f:id:Okerra:20180304194142p:plain
このようになっていしまいます。

そのため次にこの中心からどれだけ離れているかを考えます。
今回は画像の大きさが400pxと決めていましたので、x,yの座標は下のように表現できることがわかります。
f:id:Okerra:20180304194349p:plain

実装

ここまで分かればあとは実装するだけです。

HTML

<div class="toppage-art">
  <div id="img-bg">
  </div>
  <div class="top-img">
    <img src="img.jpg", alt="top_art">
  </div>    
</div>

CSS

//背景となる親プロパティの設定
.toppage-art{
  width: 100vw; 
  height: 100vh;
  position: relative;                 //絶対位置の設定
}

//位置が分かりやすいように背景色を設定(positionの説明とは関係なし)
.toppage-art #img-bg{
  height: 100vh;
  width: 75vw;
  background-color: #e1e1e1; 
}

//子classの設定
.toppage-art .top-img{ 
  position: absolute;
  padding: 0;
  top:  calc(50vh - (400 * 0.5));    //親classの上からの位置
  left: calc(75vw - (400 * 0.5));    //親classの左からの位置    
}
 //画像の大きさ指定
.top-img img {
  width: 400px;
  height: 400px;
}