各構成要素のデザイン – 「構成要素:カラム、デザイン:comemo ベーシック、テーマ:Twenty Twelve」編 –

CSS スタイルシートエディターに追加する CSS(2〜4カラム共通)
/* comemo column basic -twenty twelve- */
.tablecolumn {
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 10px;
}

.tablecolumn > div {
	display: table-cell;
	border: 5px solid #cccccc;
	border-radius: 7px;
}

.entry-content .tablecolumn > div .text {
	text-align: left;
	padding: 10px 5%;
	font-size: 13px;
}

.entry-content .tablecolumn > div > h3 {
	background-color: #cccccc;
	text-align: center;
	font-size: 14px;
	color: #fff;
	border: none;
	padding: 10px 0;
	margin: -1px;
}

@media (max-width: 767px) {
	.tablecolumn,.tablecolumn > div {
		display: block;
		width: 100%;
		margin: 1.625em 0;
	}
}

.tablecolumn .w100 {
	width: 100%;
}

.tablecolumn .w50 {
	width: 47%;
}

.tablecolumn .w33 {
	width: 31%;
}

.tablecolumn .w25 {
	width: 22%;
}

@media screen and (max-width: 767px) {
	.tablecolumn .w50,.tablecolumn .w33,.tablecolumn .w25 {
		width: 100%;
	}
}

2カラム

2カラム | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫

記事中の記述
<div class="tablecolumn">
<div class="w50">
<h3>見出し</h3>
<div class="text">本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w50">
<h3>見出し</h3>
<div class="text">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
</div>

3カラム

3カラム | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫

記事中の記述
<div class="tablecolumn">
<div class="w33">
<h3>見出し</h3>
<div class="text">本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w33">
<h3>見出し</h3>
<div class="text">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w33">
<h3>見出し</h3>
<div class="text">本文 本文 本文 本文 本文 本文</div>
</div>
</div>

4カラム

4カラム | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫

記事中の記述
<div class="tablecolumn">
<div class="w25">
<h3>見出し</h3>
<div class="text">本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w25">
<h3>見出し</h3>
<div class="text">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w25">
<h3>見出し</h3>
<div class="text">本文 本文 本文 本文 本文 本文</div>
</div>
<div class="w25">
<h3>見出し</h3>
<div class="text">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>
</div>
</div>

#2013