スタイルシート(CSS)入門編その3|ゼロからのWeb制作 Vol.6

こんにちは、鈴木です。
今回も前回に引き続き、スタイルシートについて書いてこうと思います。

 

目次

  1. float
  2. position

1.float

floatプロパティは、ブロックレベルの要素の幅を固定し、ブロック全体を左や右にスライドさせます。
後に続くほかのブロック要素は空きスペースに自動的に流れ込みます。

floatプロパティは、一般的なWebサイトの多くで文書構造順に従った基本レイアウト手法として使われています。

例えば以下のブロック構造があるとします。

資料12

 

 

 

 

 

 

 

スタイルシートに

<div class="block1" style="float: left;">ブロック1</div>
<div class="block2" style="float: left;">ブロック2</div>

を追加します。

資料14

 

 

 

このように2つのブロック要素が隣り合います。

また、スタイルシートを

<div class="block1" style="float: left;">ブロック1</div>
<div class="block2" style="float: right;">ブロック2</div>

に変更します。
資料13

 

このように、二つのブロック要素が指定した位置にレイアウトされます。

注意することは、float状態を解除しないと、後に続くブロック要素が空きスペースに自動的に流れ込みます。
ブロック要素を空きスペースに流れ込ませないためには、指定のブロック要素に

clear:both;

と記述する必要があります。

2.positionプロパティ

positionプロパティは、文書構造でレイアウトできない、もしくは任意の位置にブロック要素を指定したい時に使われます。
また、positionプロパティは相対位置、絶対位置を指定することができます。

static

特に配置を指定しません。left、right、top、bottomを指定しても反映されません。

relative

staticの位置を基準とした相対位置に配置されます。

absolute

staticの位置を基準とした絶対位置に配置されます。

fixed

絶対位置への配置となり、ページをスクロールしても位置は固定されます。
以下の図はpositionのプロパティに相対位置を指定した例です。

指定のスタイルシートに

<div class="block1" style="position: statict;">ブロック1</div>
<div class="block2" style="position: relative;">ブロック2</div>

と記述します。

資料15

 

 

 

 

 

 

 

 

floatとpositionをそれぞれ単体で、もしくは組み合わせて使うこともできます。

marginやpaddingといった余白のコントロールを併用して使うことでより効果的なレイアウトを作ることができます。