Webページの空白の空け方の基準は？

6月の半分以上、日にちが経ちますが…

梅雨入り宣言早く来て、早く梅雨上げ宣言になってほしい気分です…

しかもこっちは早く夏が来て、年中夏であってほしい気持ちでたまりません！

梅雨前線、そろそろ北上してくれへんかな…

天気予報のニュースを見る限り、のろのろと九州～四国南下ばっかり停滞してるんじゃねぇか！

早く6月中に北上してくれ！

北上して、6月までに梅雨明け宣言してほしいんやけど！

しかも、今年は「気象病」にならないことを…

話変わりますが…

Webページの空白の空け方の基準は？

空白の開け方の基準は特に定めはないですが…

こちらは、前の職場で初めてWebデザインの業界に転身したときに教わったことを今までそのまま生かしてます。

こちらの空白の開け方はDTP時代と違って、上から下へと空白を空けるようにしています。

こちらのやり方をご参考にね。

<article>
	<section>
		<h1>Title 01</h1>

		<section>
			<p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p>

			<figure>
				<img src="./images/photo01.jpg" alt="Images" />

				<figcaption>Photo Name</figcaption>
			</figure>

			<h2>Second Title</h2>

			<p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p>
		</section>

		<section>
			<p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p>

			<figure>
				<img src="./images/photo01.jpg" alt="Images" />

				<figcaption>Photo Name</figcaption>
			</figure>

			<h2>Second Title</h2>

			<p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p>
		</section>
	</section>
</article>

※一部割愛しています。

CSSで空白の開け方はどうしてるか？

※ここではMarginをメインに空白の空け方を説明してます。

article {
	margin:0 auto;
}

article h1 {
	margin:0 auto 30px;
}

article section {
	margin:0 auto 30px;
}

article section section{
	margin:0 auto 50px;
}

article section section section p{
	margin:0 auto;
}

article section section figure{
	margin:0 auto 30px;
}

article section section figure figcaption{
	margin:0 auto;
}

article section section h2{
	margin:0 auto 20px;
}

このような感じでコーディングをしてます。

上が「0」として、上から下の間を空けながら空白を作ってます。

単に、「 」をたくさん連続して「 」って空ける奴ドアホなんですわ（笑）

「Margin」を使って空白を作っていきましょうね！

では、また！