A140 位置の調整

位置の調整について

CSSで文字や要素の位置の調整を行いたい場合に使用するプロパティは多くあります。

今回は要素の位置を調整するときに使うプロパティについて紹介します。

位置調整の際に使うプロパティ

position

positionという名前の通り要素の位置を決めるた際に使用するプロパティです。今の位置からみた相対的な位置や親要素の位置からみた絶対的な位置などを指定し要素の位置を指定します。

要素 {
  position: 値;
}

値の部分には「static」「relative」「absolute」「fixed」の4種類のどれかが入ります。この値によって「どの様にして位置を決めるのか」を指定することができます。

• static: positionの初期値。位置を決める方法を指定しない。
• relative: 今の位置を基準として、相対的な位置を決める。
• absolute: static以外のpositionが指定された親要素の位置を基準として、絶対的な位置を決める。
• fixed: ブラウザウィンドウを基準として、絶対的な位置を決める。画面をスクロールしてもその場所に固定されたまま。

位置を決めた前提で、実際にどれだけ動かすのかを決めるかを 「top」「bottom」「left」「right」を用いて指定します。

要素 {
  position: relative; /* 今の位置を基準 */
  top: 50px; /* 上から50px */
  left: 100px; /* 左から100px */
}

float

floatは縦に並んでいた要素を「横並び」にすることのできるプロパティです。floatを適用していない要素は、floatを適用した要素の周囲に自動で回り込むという特徴もあります。そのためfloatを使用する際は、単に要素を移動させるだけではなく、移動させない要素に対してfloatを機能させないようにすることも必要になります。

要素 {
  float:値;
}

値の部分には「left」「right」「none」の3種類のどれかが入ります。

• left：要素を左寄せにする
• right：要素を右寄せにする
• none：配置を指定しない（初期値）

Flexbox

Flexboxはfloat同様に縦に並んでいた要素を「横並び」にすることのできるプロパティです。横並びにするだけでなく並べ方のデザインなどを柔軟に装飾することができるものです。

<div class="flex">
  <p>横並び</p>
  <p>横並び</p>
</div>

.flex {
  display:flex;
}

p {
  backroud-color:red;
  width:100px;
  margin:0px 10px;
}

ブラウザ表示

横並びにしたい要素の親要素に “display:flex;” を指定すると子要素が横並びになります。

例題

以下の中でpositionでできない指定方法はどれか

1. static
2. relative
3. absolute
4. dynamic

以下の中でFlexの使い方として正しいものはどれか

1. 横に並んでいた要素を「縦並び」にすることのできる
2. displayをflexと指定した要素が横並びになる
3. displayをflexと指定した子要素が横並びになる
4. displayをflexと指定した子要素が縦並びになる

エンジニアからのアドバイス

要素の横並びについてはFlexを用いることを推奨されるケースが多いです。floatとflexの動きの違いを理解し、どちらを用いるべきかはプロジェクトでのコーディングルールをPMに確認しプロダクトとしての統一させることでリーダブルなコードを書くことを意識しましょう。