Tomo.Log()

2カラムでレスポンシブなHTML/CSSのメモ

[09/12, 2018]

２カラムで一定の横幅よりも小さい場合は下に回り込むレスポンシブなサイトの構築メモです。
いつもやり方を忘れてしまうので、シプルで最小限の要素に土留めています。
サンプルでは、 横幅が768pxよりも小さい場合は、右のカラムは下に回り込むようにしてあります。
とりあえずコピペですぐ確認できるように、cssを直書きしています。

<html>
<head>
	<style type="text/css">
	<!--
	.header {
		text-align: center;
	}
	
	.footer {
		text-align: center;
	}

	.container {
		width: 100%;
		display: table;
	}

	.container .left_column {
		display: table-cell;
		width: auto;
		margin: 0px;
	}

	.container .right_column {
		display: table-cell;
		width: 30%;
		padding-left: 10px;
	}

	@media screen and (min-width: 1000px) {
		body {
			width: 972px;
			margin: 0 auto;
		}		
	}

	@media (max-width: 768px) {
		.container .left_column {
			display: block;
		}
		.container .right_column {
			display: block;
			width: auto;
		}
	}
	-->
</style>
</head>

<body>

	<div class="header"><h1>Header</h1></div>

	<div class="container">

		<div class="left_column">
			<h2>Title</h2>
			<p>Long long time ago. Long long time ago. Long long time ago. Long long time ago. Long long time ago. Long long time ago. Long long time ago. </p>
			<p>Long long time ago. Long long time ago. Long long time ago. Long long time ago. Long long time ago. Long long time ago. Long long time ago. </p>
		</div>

		<div class="right_column">
			<div class="box">
				<h2>Sub menu</h2>
				<ul>
					<li>ABC</li>
					<li>ABC</li>
					<li>ABC</li>
				</ul>
			</div>

			<div class="box">
				<h2>Sub menu</h2>
				<ul>
					<li>ABC</li>
					<li>ABC</li>
					<li>ABC</li>
				</ul>
			</div>
		</div>

	</div>	

	<div class="footer">Footer</div>

</body>
</html>

CSSって見た目は同じでも書き方がいろいろあって、どれにしたらいいかとかいつも迷ってしまいますよね〜😅 iOSアプリなどに慣れていると、webのUIを作るの大変だなと身にしみます。。。

SNS