5分で分かる?ブログで使えるhtml講座 ~レイアウト上級編(position)~
今回はpositionという最強(?)プロパティについてご説明します。
今まで説明してきたtableタグやCSSのmargin, paddingといったプロパティを使うだけではレイアウトの自由度に限界がありますよね。例えば「画面上部に常にある画像を表示したい」なんていうことはpositionを使わないとできません。
これをマスターするとページ上のコンテンツを自由自在に配置できるようになります。
インラインスタイルってなに?という方は、コチラの記事を先にご覧ください。
※緑文字で書かれた部分は少し難しい内容なので、興味があったら軽く読む程度でOKです。ある程度知識がついてきたら読み返すと幸せになれるかもしれません。
基本
htmlで書く各要素(タグで囲まれているやつ)はそれぞれが座標 ( x, y )を持っています。
通常その座標は自動で計算されているのですが、その座標をCSS( top, right, bottom, left)で調整することができます。
ではその座標はどこを基点(0, 0)とするのか?
その基点がpositionの種類によって違うので、それらの詳細を説明していきます。
static
デフォルトの座標を使用します。
何も指定しない場合と同じで、topやleftなどが無効になります。
あまり使わないと思います
relative
「レラティブ」と読みます。
基点はstaticと同じで [top, bottom, left, right] のプロパティと組み合わせて、本来表示される場所からの相対的な位置を指定します。
※要素の幅や高さは、元々の位置にあるものとして計算されます。なので他の要素に影響を与えることなく見た目だけの位置を調整できます。
<div style="border: 1px solid green;">
<div style="border: 1px solid red;">あいうえお</div>
<div style="position: relative; top: -10px; left: 10px;border: 1px solid blue;">かきくけこ</div>
<div style="border: 1px solid red;">さしすせそ</div>
</div>
↓
※高さが計算されているので「あいうえお」と「さしすせそ」の間に空白があります。
absolute
static以外のプロパティを持つ親要素の( 0, 0 )を基点として位置を指定します。
※要素の幅や高さは0として扱われます。
<div style="border: 1px solid green; position: relative;">
<div style="border: 1px solid red;">あいうえお</div>
<div style="position: absolute; top: 0px; right: 10px;border: 1px solid blue;">かきくけこ</div>
<div style="border: 1px solid red;">さしすせそ</div>
</div>
↓
※高さが計算されないので「あいうえお」と「さしすせそ」の間に空白がありません。
fixed
ブラウザの表示画面の左上を基点とします。スクロールしても位置が固定されたままになります。※要素の幅や高さは0として扱われます。
<div style="border: 1px solid green;">
<div style="border: 1px solid red;">あいうえお</div>
<div style="position: fixed; bottom: 100px; left: 10px; border: 1px solid blue;">かきくけこ</div>
<div style="border: 1px solid red;">さしすせそ</div>
</div>
↓
※画面の左下にずっと見えている「青枠のかきくけこ」が固定されている要素です。
まとめ
positionプロパティには4種類の値を指定でき、それぞれ以下の特徴があります。
基点 | 備考 | |
static | デフォルト | 何も指定しない場合と同じ topやleftといった属性が効かない |
relative | デフォルト (staticと同じ) |
幅や高さは元の位置にあるものとして計算される |
absolute | 親要素の基点(static以外のpositionが効いている場合のみ) | 幅や高さは0として計算される |
fixed | 画面の左上 | 幅や高さは0として計算される。 スクロールしても固定される |
top, left, right, bottomと組み合わせることで、任意の要素を画面上に自由に配置することができます。
おわり