Vol.6|SSCのホームページ制作・集客スクールブログ2014.06.05S.SCSSWeb制作ブログこんにちは、鈴木です。今回も前回に引き続き、スタイルシートについて書いてこうと思います。目次floatposition1.floatfloatプロパティは、ブロックレベルの要素の幅を固定し、ブロック全体を左や右にスライドさせます。後に続くほかのブロック要素は空きスペースに自動的に流れ込みます。floatプロパティは、一般的なWebサイトの多くで文書構造順に従った基本レイアウト手法として使われています。以下のブロック構造があるとします。left;">ブロック2</div>を追加します。このように2つのブロック要素が隣り合います。right;">ブロック2</div>に変更します。このように、二つのブロック要素が指定した位置にレイアウトされます。注意することは、float状態を解除しないと、後に続くブロック要素が空きスペースに自動的に流れ込みます。ブロック要素を空きスペースに流れ込ませないためには、指定のブロック要素にclear:both;と記述する必要があります。2.positionプロパティpositionプロパティは、文書構造でレイアウトできない、もしくは任意の位置にブロック要素を指定したい時に使われます。指定することができます。static特に配置を指定しません。left、right、top、bottomを指定しても反映されません。relativestaticの位置を基準とした相対位置に配置されます。absolutestaticの位置を基準とした絶対位置に配置されます。fixed絶対位置への配置となり、ページをスクロールしても位置は固定されます。以下の図はpositionのプロパティに相対位置を指定した例です。relative;">ブロック2</div>と記述します。floatとpositionをそれぞれ単体で、もしくは組み合わせて使うこともできます。marginやpaddingといった余白のコントロールを併用して使うことでより効果的なレイアウトを作ることができます。SSCのホームページ制作・集客スクール当社では、WordPress講座を中心としたホームページ制作・集客スクールを運営しています。教室は、さいたま市の浦和駅から徒歩5分。・Webのスキルを習得したい学生などなど、様々な方に幅広い目的で受講していただくことが可能です!SSCのホームページ制作・集客スクールはこちら。