cssの中でも、レイアウトに関するプロパティを紹介していきます。
ブログなどで、画像を横並びにしたい時とかありませんか？
cssは文字の色や大きさ変えるだけではありません。要素を自由自在に移動させることがcssの本領です。
cssの記述場所や文法が知りたい方は、こちらの記事も合わせてお読みください。
floatプロパティ
floatプロパティは、指定した要素を左または右に寄せる効果があります。
さらにその後に続く要素は、その反対側に回り込みます。
つまり、ブロックを横並びにするときに使うプロパティですね。
※横並びにする要素にはwidth（横幅）を設定しておいてください。
float:left;
指定したタグを左に寄せ、続くタグはその右側に回り込みます。
float:left;
float:right;
指定したタグを右に寄せ、続くタグはその左側に回り込みます。
float:right;
clearプロパティ
clearプロパティは、要素の回り込みを解除するためのものです。
floatプロパティを使うとその後の要素はすべて回り込んでしまいます。
回り込みが不要な要素（横並びにしない要素）に指定しましょう。
clear:left;
左寄せした要素に対する回り込みを解除。
clear:left;
clear:right;
右寄せした要素に対する回り込みを解除。
clear:right;
clear:both;
左か右寄せした要素に対する回り込みを解除。bothはどちらの回り込みにも対応しているので、とりあえずこれを使えば間違いありません。
clear:both;
positionプロパティ
positionプロパティは要素の配置方法を指定するプロパティです。基本的に次に紹介するtop、bottom、left、rightプロパティとセットで使います。
position:relative;
現在表示されている場所を基準にします。（相対配置）
position:relative;
position:absolute;
ブラウザの左上を基準にします。（絶対配置）
position:absolute;
top、bottom、left、rightプロパティ
top、bottom、left、rightプロパティは基準となる位置からの距離を指定するプロパティです。
top:○px;
topプロパティは、要素のもともとの位置（上）から、移動後の位置までの距離を指定します。
top:○px;
bottom:○px;
bottomプロパティは、要素のもともとの位置（下）から、移動後の位置までの距離を指定します。
bottom:○px;
left:○px;
leftプロパティは、要素のもともとの位置（左）から、移動後の位置までの距離を指定します。
left:○px;
right:○px;
rightプロパティは、要素のもともとの位置（右）から、移動後の位置までの距離を指定します。
right:○px;
displayプロパティ
displayプロパティは要素の表示形式を指定します。
display:inline;
要素をインライン形式にします。
display:inline;
display:block;
要素をブロック形式にします。
display:block;
display:none;
要素を非表示にします。ブログで消したい部分があれば、これを指定することで非表示にできます。
display:none;
overflowプロパティ
overflowプロパティは、ボックスからはみ出した文字などをどうするか指定します。
overflow:visible;
はみ出したまま表示します。
overflow:visible;
overflow:hidden;
はみ出した部分は表示しません。
overflow:hidden;
overflow:scroll;
はみ出した部分をスクロールで表示します。
overflow:scroll;
最後に
cssのレイアウトに関するプロパティでした。
横並びはテーブルを使えば簡単ですが、スマホサイトで見た時に上手くいかない場合があります。
floatを使うことで、それぞれのデバイスに合った並びに自動で表示してくれるのはとても便利です。
また、ブログで自動的に表示されてしまう不必要な要素も、displayプロパティで簡単に消すことが出来ます。
こんな風に、ちょっとしたレイアウトのアレンジなどに使ってみてください。
