positionプロパティとabsoluteとrelativeを使うメリット

positionプロパティとabsoluteとrelativeを使うメリット

コンテンツが複数あるブログやサイトを作成したとします。

そんな時にサイズが変化するコンテンツ幅に、要素が追順するように配置をしたい場面がよくあります。

PCのブラウザ幅やスマホのブラウザ幅の変化にも追順させたいなども同様です。

このような場面で使われるのがPositionプロパティです。

今回はこのPositionプロパティの使い方について、初心者向けに解説していきたいと思います。

よくある配置に対しての悩みのケース

以下のようなブログやサイトを作成したとします。

HTML

<!DOCTYPE HTML>
<html lang=”ja”>
 <head>
  <meta charset=”UTF-8″>
  <title>ぱくぱくのCSS講座</title>
  <link rel=”stylesheet” type=”text/css” href=”style.css”>
 </head>
 <body>
  <div class=”box1″>
   <h1>ぱくぱくの記事①</h1>
   <p>テキスト テキスト テキスト テキスト </p>
   <button type=”button” name=”botton”>記事はこちら</button>
  </div>

  <div class=”box1″>
   <h1>ぱくぱくの記事①</h1>
   <p>テキスト テキスト テキスト テキスト </p>
   <p>テキスト テキスト テキスト テキスト </p>
   <button type=”button” name=”botton”>記事はこちら</button>
  </div>

  <div class=”box1″>
   <h1>ぱくぱくの記事①</h1>
   <p>テキスト テキスト テキスト テキスト </p>
   <p>テキスト テキスト テキスト テキスト </p>
   <p>テキスト テキスト テキスト テキスト </p>
   <button type=”button” name=”botton”>記事はこちら</button>
  </div>

 </body>
</html>

CSS

.box1{
 background-color: aqua;
 width: 500px;
 height: 300px;
}

ブラウザ表示

よくある悩みのケースが『記事はこちら』のボタンの配置です。

文章の段落が多くなるとコンテンツ内でのボタンの位置がどんどん下になっていく。

この様な場合、『ボタンを常にコンテンツの右下に表示させたい』と思います。

よくある失敗のケース

marginプロパティを使っての配置調整

これはよくやりがちなミスですね。

この事例を実際のCSSとブラウザでの表示を見て確認してみましょう。

CSS

.box1{
 background-color: aqua;
 width: 500px;
 height: 300px;
}


button{
    margin-left: 370px;
    margin-top: 100px;
}

ブラウザでの表示結果

段落が増える高さに対して、ボタンの位置が少しづつズレていきます。

これはmarginが絶対的な位置で配置してしまうことに問題点があります。

段落が増えるとコンテンツの大きさはどんどん増えていきます。

しかしそれに対してmarginはついて来れないのです。。。

これではせっかくのコンテンツもグダグダになっちゃいますね。

Positionプロパティで配置する

Positionは要素の配置場所を操作するプロパティです。

そしてPositionプロパティは以下の指定により機能を持ちます。

  • absolute=絶対値
  • relative=相対値
  • fixed=固定位置

Positionプロパティのメリット

  • 高さや幅が変わっても配置が変わらない
  • 毎回CSSを微調整する必要がなくなる
  • 画面が違う端末でも同じ表示ができる
  • ユーザーが操作する場所を統一できる

親要素に『relative=相対値』/子要素に『absolute=絶対値』

長さが違うコンテンツがあったら『absolute=絶対値』

基準にしたい親要素に対して位置を統一することができます。

基本的にabsoluteとrelativeを単独では使用しません。

1.固定したい要素に『absolute』を指定する。

 今回の場合は、『button』を固定した位置で表示させたいのでこれに当たります。

2.基準にしたい要素に『relative』を指定する。

 今回の場合は、『.box1』が変則的大きさが変化するのでこれを基準にします。

それではCSSに以下の様に記述してみましょう。

.box1{
 background-color: aqua;
 width: 500px;
 height: 300px;
 position: relative;
}

button{
    right: 30px;
    bottom: 30px;
 position: absolute;
}

そしてブラウザで確認してみると。。。

段落の数が増えても一定の位置でボタンが配置されていますね。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

CSSカテゴリの最新記事