ITコース CSS基礎 028_フロート、配置、整列
フロート
CSSにおいて、フロートはfloatプロパティを使用して要素をコンテナの左側または右側に沿って浮かせ、他の要素がその周りを囲むことができるようにするレイアウト技術です。
例：
.div-left { float: left; } .div-right { float: right; } <div class="div-left">div-left</div> <div class="div-right">div-right</div>効果： 
フロート要素は親要素の高さの崩壊を引き起こす可能性があり、他のDIVの要素に影響を与える可能性があり、同じ行に複数のフロート要素がある場合は重なる可能性があります。clearプロパティを使用してそれらの間の影響を制御する必要があります。
例：
.div-left { float: left; } .div-right { float: right; } /* `clear`プロパティを使用してフロート要素の影響をキャンセル .content { clear: both; } */ <div class="div-left">div-left</div> <div class="div-right">div-right</div>
<div class="content"> これは影響を受けるテキストです。 </div>効果： 
例：
.float-left { float: left; } .float-right { float: right; } <img class="float-left" src="zhaojian1.jpg" alt="" srcset=""> <div class="float-right">2024年1月25日</div><div class="float-right">記事タイトル記事タイトル記事タイトル</div>効果：
フロートは複数列レイアウトを作成するための初期の技術でしたが、現代のレイアウトでは、FlexboxやGridなどのより柔軟なレイアウト技術が通常推奨されます。
配置
CSSにおいて、配置とはpositionプロパティを通じて要素の配置方法を設定し、top、right、bottom、leftプロパティを通じて要素の最も近い配置された親要素に対する位置を指定することを指します。
- 配置は最も近い配置された（positionが
staticではない）祖先要素に対して行われます。配置された祖先要素がない場合、初期包含ブロック（通常は<html>要素）に対して配置されます。 - 絶対配置と固定配置の要素は通常のドキュメントフローから外れ、他の要素のレイアウトに影響を与える可能性があります。
- プロパティ値は通常、ピクセル（
px）またはパーセント（%）を使用します。
静的配置 static
静的配置（Static Positioning）はpositionプロパティのデフォルト値で、通常は明示的に指定する必要はありません。静的配置の要素はドキュメントフロー内で通常通り配置され、top、right、bottom、leftプロパティの影響を受けません。
初期配置 initial
CSSにおいて、initialはプロパティ値を初期値にリセットするためのキーワードです。positionプロパティの場合、その初期値はstaticです。position: initial;を使用することは、positionプロパティを設定しないことと同等です。
相対配置 relative
要素はその通常の位置に対して配置されます。
例：
.base { width: 200px; height: 200px; background-color: aquamarine; } .relative-example { position: relative; top: 100px; left: 20%; } <!-- <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> brや他の要素を追加してみてください --> <div class="base relative-example"></div>効果： 
絶対配置 absolute
要素は最も近い配置された祖先要素に対して配置されます。
例：
.base { width: 200px; height: 200px; } .absolute-example { position: absolute; top: 50px; left: 100px; background-color: blueviolet; } <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <div class="base absolute-example"></div>効果：
固定配置 fixed
要素はブラウザウィンドウに対して配置され、常に画面上の固定位置に維持されます。
例：
.base { width: 200px; height: 200px; } .fixed-example { position: fixed; bottom: 40%; left: 40%; background-color: gold; } <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <div class="base fixed-example"></div> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>効果：
スティッキー配置 sticky
要素は特定の位置までスクロールすると固定配置になり、それ以外の場合は相対配置になります。
例：
.base { width: 200px; height: 200px; } .sticky-example { position: sticky; top: 10%; left: 40%; background-color: darkcyan; } <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <div class="base sticky-example"></div> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>効果：
継承配置 inherit
要素は特定の位置までスクロールすると固定配置になり、それ以外の場合は相対配置になります。
例：
.base { width: 200px; height: 200px; } .inherit-example { position: inherit; top: 100%; /* 境界に注意 */ left: 100%; /* 境界に注意 */ background-color: violet; } <div class="base relative-example"> <div class="base inherit-example"></div> </div>効果： 
重ね順序（重なる要素）
z-indexは重ね順序を制御するためのCSSプロパティです。これは、要素が垂直スタッキングでの表示順序、つまりどの要素がどの要素の前または後ろにあるかを決定します。
z-index値は負の値にすることができます。z-indexが大きい要素は小さい要素を覆います。z-indexは配置された要素（positionがstaticではない）でのみ有効ですz-indexは要素のopacityが0以外に設定されている必要があります
例：
.base { width: 200px; height: 200px; position: absolute; } .z-index-example1{ background-color: red; z-index: 9; } .z-index-example2{ background-color: blue; z-index: 1; } <div class="base z-index-example1"></div> <div class="base z-index-example2"></div>整列
CSS整列とは、CSSプロパティを通じて要素の水平および垂直整列方法を制御することを指します。CSS整列プロパティは、テキスト、画像、テーブル、リストなど、任意の要素に適用できます。
一般的な整列プロパティには以下の値があります：
- left：左揃え
- center：中央揃え
- right：右揃え
- top：上揃え
- middle：中央揃え
- bottom：下揃え
水平整列 text-align
要素ボックス内のテキストコンテンツの水平整列方法を設定するために使用されます。
例：
.text-center { text-align: center; /* 水平中央揃え */}.text-left { text-align: left; /* 左揃え */}.text-right { text-align: right; /* 右揃え */}.text-justify { text-align: justify; /* 両端揃え */} <div class="text-center">これは一文です ABCDE 12345</div> <div class="text-left">これは一文です ABCDE 12345</div> <div class="text-right">これは一文です ABCDE 12345</div> <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel sapien accumsan, ac efficitur nulla bibendum. Nullam posuere fermentum nulla, in ultricies leo gravida sit amet. Vestibulum ut mi vitae libero accumsan dapibus.</div>効果： 
垂直整列 vertical-align
要素内のインライン要素の垂直方向の整列方法を設定するために使用されます。通常、インライン要素に使用され、ブロックレベル要素には直接影響しません。
例：
.base{ height: 150px;}.vertical-align-baseline { vertical-align: baseline; /* デフォルトのベースライン揃え */}.vertical-align-top { vertical-align: top; /* 上揃え */}.vertical-align-middle { vertical-align: middle; /* 中央揃え */}.vertical-align-bottom { vertical-align: bottom; /* 下揃え */} <div class="base"> <img class="vertical-align-baseline" src="zhaojian1.jpg" alt="" srcset="">これは一文です ABCDE 12345 </div> <div class="base"> <img class="vertical-align-top" src="zhaojian1.jpg" alt="" srcset="">これは一文です ABCDE 12345 </div> <div class="base"> <img class="vertical-align-middle" src="zhaojian1.jpg" alt="" srcset="">これは一文です ABCDE 12345 </div> <div class="base"> <img class="vertical-align-bottom" src="zhaojian1.jpg" alt="" srcset="">これは一文です ABCDE 12345 </div>効果： 
