見出し画像

継続は力なり＃１９

うちやましょうたろう/成り上がり

配置方法を指定するプロパティ



フロートの基本

フロートは「floatプロパティ」によって、ある要素を左・右に寄せて配置し、その反対側に後続の要素が回り込むようにした状態のこと

「flontプロパティ」はインライン要素を含むほとんどの要素に指定でき、フロートの状態になるとインライン要素であってもそのボックスはブロックレベルのボックスになる

以下のものが指定できる

floatに指定できる値

・left
左側に要素を寄せて配置し、その右側に後続の要素を回り込ませる

・right
右側に要素を寄せて配置し、その左側に後続の要素を回り込ませる

・none
フロートしていない通常の状態にする


例

HTML

<p id="p1">
<img src="images/photo.jpg" alt="サンプル画像">
１つめの段落のテキストです。このテキストが画像の横に回り込みます。
このテキストが画像の横に回り込みます。
</p>
 
<p id="p2">
２つめの段落のテキストです。このテキストが画像の横に回り込みます。
</p>
 
<p id="p3">
<img src="images/photo.jpg" alt="サンプル画像">
３つめの段落のテキストです。このテキストが画像の横に回り込みます。
</p>
 
<p id="p4">
４つめの段落のテキストです。このテキストが画像の横に回り込みます。
</p>

CSS

#p1 img { float: right; }
#p3 img { float: left; }

画像1


フロートの解除

ウィンドウの幅を少し広くしてみると、以下のように最初の２つの段落の行数が減り、２つめの画像の位置が右の写真の下部を超えてどんどん上にあがってしまう

画像2


２つめの画像と３段落目のテキストは常に１つめの画像よりも常に下に表示させたい場合は、指定した要素の直前でフロートを解除する「clear プロパティ」を使用する

以下の値を指定する

clearに指定できる値

・left
この要素よりも前で「float: left」が指定されているフロートを、この要素の直前で解除する

・right
この要素よりも前で「float: right」が指定されているフロートを、この要素の直前で解除する

・both
この要素よりも前で指定されている左右両方のフロートを、この要素の直前で解除する

・none
フロートに解除せずにそのままにする


「cleat プロパティ」はブロックレベル要素にしか指定できない点に注意

以下は、先程のサンプルの3段目に「cleatプロパティ」を指定して右側のフロートを解除している

例

HTML

<p id="p1">
<img src="images/photo.jpg" alt="サンプル動画">
１つめの段落のテキストです。このテキストが画像の横に回り込みます。
このテキストが画像の横に回り込みます。
</p>
 
<p id="p2">
２つめの段落のテキストです。このテキストが画像の横に回り込みます。
このテキストが画像の横に回り込みます。
</p>
 
<p id="p3">
<img scr="images/photo.jpg" alt="サンプル画像">
３つめの段落のテキストです。このテキストが画像の横に回り込みます。
このテキストが画像の横に回り込みます。
</p>
 
<p id="p4">
４つめの段落のテキストです。このテキストが画像の横に回り込みます。
このテキストが画像の横に回り込みます。
</p>

CSS

#p1 img { float: right; }
#p3 img { float: left; }
#p3 { clear: right; }

画像3


フロートによる２段組みレイアウト

CSSで段組みレイアウト（マルチカラムレイアウト）を実現にはいくつかの方法がある

段にする範囲をグループ化する

各段にする範囲を「main要素」や「div要素」などでグループ化し、それらを左右いずれかにフロートさせるだけです

通常は全ての段とそれらを含む要素にも幅を指定する

以下は、簡単な２段組の例です


例

HTML

<div id="page"m>
 
<header>
header要素
</header>
 
<main>
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
メインの段のテキストです。
</main>
 
<div id="sub">
サブの段のテキストです。
サブの段のテキストです。
サブの段のテキストです。
</div>
 
<footer>
footer要素
</footer>
 
</div>

CSS

#page { 
   margin: 0 auto;
   width: 300px;
}
 
header, footer {
   text-align: center;
   color: #fff;
   background: #bbb;        /*グレー*/
}
 
main {
   color: #fff;
   background: #fc0;        /*黄色*/
}
 
#sub {
   color: #fff;
   background: #390;        /*緑*/
}

画像4


コンテンツ全体は「id="page"」が指定されたdiv要素でグループ化されている

CSSでその幅を300ピクセルにし、左右のマージンを「auto」にすることでコンテンツ全体をセンタリングしている
（「margin: 0 auto;」は上下のマージンを「０」、左右のマージンを「auto」にする指定）

それ以外には、サンプルが見やすくなるようにヘッダーとフッターのテキストを中央揃えにして、各要素の背景色を指定しているだけ

これから２段組にするのは、「main要素」と「id="sub"　が指定されているdiv要素」の部分

これらの要素は、各段の内容をグループ化している要素