たまろぐ

CSSでコンテンツエリアをデザインする / WordPressのテーマを作る

2019年10月10日 22:42 カテゴリー: Wordpress

コンテンツエリアを作っていきます。コンテンツエリアといっても、サイドバーとメインエリアをまとめているボックスの事です。少しずつ小出しにしていく作戦です。嘘です。凄く長くなるので分割していきます。

まさかのへそ出しでピンクのタイトスカートw

PC向けデザイン

コード

	.page{
		display: flex;
		width: 1100px;
		margin: auto;
	}
	
	
	.page:after{
		content:"";
		display: block;
		clear: both;
	}

これだけ。ですが、デザイン崩れを防ぐうえで重要な役割を果たしています。

解説

.page{
}

「page」と名前を付けたボックスに反映する。

HTMLの確認は下記記事を参考にしてください。

display: flex;

display 表示形式を変更できます。block、inline。inline-block等があります。

flex 要素の中のブロックを横並びにできます。縦の長さが横の要素ごとにそろうので凄く便利です。このテーマでは縦のラインを横のサイドバーの左のボーダーで表示しているので、縦の長さをそろえるのは絶対条件です。

width: 1100px;

width 横幅の広さを指定します。今回は1100pxにしました。

margin: auto;

margin 要素の外側の余白を指定します。値をautoにすると要素が真ん中にきます。

.page:after{
}

pageさんの後ろに仮想のボックスを作り、そこにスタイルを反映させます。HTMLで

<div class="page">
色々書きます!
</div>
<div class="page_after">
</div>

こんな感じにしてもできますが、何も入っていないdivは推奨されていません。少し使いづらいですが、:afterを付けてCSSでやっていきましょう。これをマスターするとCSSで出来ることの幅が広がります。ここでは詳しく説明しないので、もっと知りたい方は検索してみてください。

content:"";

これは:afterとセットで覚えておいてください。何か理由がない限り、ほぼこれが付きます。

display: block;

.pageでは値をflexにしましたが、ここではblockを設定します。blockはボックスとして認識してくださいねという意味があります。

clear: both;

これはカラムデザインでは必須です。もし横並びになっているデザインで崩れてしまった場合にはほとんどこれで解決できます。

今回は次の記事でfloatという要素が出てきますが、それを解除するのに使います。

スマートフォン向けデザイン

スマートフォン向けのデザインは何も設定していません。

まとめ

今回のpageさんはカラムデザインを組みやすくするための人なので、量は多くないです。内容はCSSの中では少し難しいです。

次の記事

WordPressのテーマを作るまとめ