HTML グリッドレイアウトを使用して 6 つのふるいスタイルを実装するためのコードの詳細な説明

まず、効果図の下にコードを添付します

ここに画像の説明を挿入

<!DOCTYPE html>
<html>

	<ヘッド>
		<メタ文字セット="UTF-8">
		<タイトル></タイトル>
		<スタイル タイプ="text/css">
			。大きい {
				幅: 100ピクセル;
				高さ: 100px;
				背景: スカイブルー;
				ディスプレイ: フレックス;
				上マージン: 20px;
			} 
			。小さい {
				幅: 10px;
				高さ: 10px;
				背景：紫;
				境界線の半径: 5px;
			}
			
			。1つ {
				ディスプレイ: フレックス;
				コンテンツの中央揃え: 中央;
				/*交差軸*/
				アイテムの位置を中央揃えにします。
			}
			
			。二 {
				ディスプレイ: フレックス;
				コンテンツの両端揃え: スペースを空ける;
				アイテムの位置を中央揃えにします。
			}
			
			.22 {
				ディスプレイ: フレックス;
				flex-direction: 列;
				コンテンツの両端揃え: スペースを空ける;
				アイテムの位置を中央揃えにします。
			}
			
			。三つ {
				ディスプレイ: フレックス;
				flex-direction: 列;
				コンテンツの両端揃え: スペースの間;
				アイテムの位置を中央揃えにします。
			}
			
			.4 {
				ディスプレイ: フレックス;
				コンテンツの両端揃え: スペースを空ける;
			}
			
			.41 {
				ディスプレイ: フレックス;
				コンテンツの両端揃え: スペースを空ける;
				アイテムの位置を中央揃えにします。
			}
			
			.42 {
				ディスプレイ: フレックス;
				flex-direction: 列;
				コンテンツの両端揃え: スペースを空ける;
				アイテムの位置を中央揃えにします。
			}
			
			。五 {
				ディスプレイ: フレックス;
				コンテンツの両端揃え: スペースを空ける;
			}
			
			.51 {
				ディスプレイ: フレックス;
				flex-direction: 列;
				コンテンツの両端揃え: スペースを空ける;
				アイテムの位置を中央揃えにします。
			}
			
			.52 {
				ディスプレイ: フレックス;
				flex-direction: 行;
				位置合わせ: 中央;
			}
			
			。六 {
				ディスプレイ: フレックス;
				コンテンツの両端揃え: スペースを空ける;
			}
			
			.61 {
				ディスプレイ: フレックス;
				flex-direction: 列;
				コンテンツの両端揃え: スペースを空ける;
				アイテムの位置を中央揃えにします。
			}
		</スタイル>
	</head>

	<本文>
		<div class="大きなもの">
			<div class="small"></div>
		</div>
		<div class="big two">
			<div class="small"></div>
			<div class="small"></div>
		</div>
		<div class="big two2">
			<div class="small"></div>
			<div class="small"></div>
		</div>
		<div class="ビッグスリー">
			<div class="small" style="align-self: flex-start;"></div>
			<div class="small" style="align-self: center;"></div>
			<div class="small" style="align-self: flex-end;"></div>
		</div>
		<div class="ビッグスリー">
			<div class="small" style="align-self: flex-end;"></div>
			<div class="small" style="align-self: center;"></div>
			<div class="small" style="align-self: flex-start;"></div>
		</div>
		<div class="ビッグフォー">
			<div class="four2">

				<div class="small"></div>
				<div class="small"></div>
			</div>
			<div class="four2">

				<div class="small"></div>
				<div class="small"></div>
			</div>
		</div>
		<div class="ビッグファイブ">
			<div class="five1">

				<div class="small"></div>
				<div class="small"></div>
			</div>
			<div class="five2">

				<div class="small"></div>
			</div>
			<div class="five1">

				<div class="small"></div>
				<div class="small"></div>
			</div>
		</div>

		<div class="ビッグシックス">
			<div class="six1">
				<div class="small"></div>
				<div class="small"></div>
				<div class="small"></div>
			</div>
			<div class="six1">
				<div class="small"></div>
				<div class="small"></div>
				<div class="small"></div>
			</div>
		</div>
		<div class="ビッグシックス">
			<div class="six1">
				<div class="small"></div> 
				<div class="small"></div>
			</div>
			<div class="six1">
				<div class="small"></div>
				<div class="small"></div> 
			</div>
			<div class="six1">
				<div class="small"></div>
				<div class="small"></div> 
			</div>
		</div>
	</本文>

</html>

要約する

これで、HTML グリッドレイアウトを使用して 6 つのふるいスタイルを実装する方法についての説明は終了です。HTML グリッドレイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSS3で実装された水平ヘッダーメニュー

>>: Docker の MySQL 時間とシステム時間の不一致の問題を解決する