カラム状の記事をレスポンシブ対応させる

まとめ記事を以下のようなカラム状に表示できるようにしたので、その方法についての覚書です。

fgsdfgdfs

カラム状にするために使った CSS は以下のとおりです。

/* 記事を複数のカラムに分ける */
.tablecolumn {
	display: table;
	width: 100%;
}

.tablecolumn > div {
	display: table-cell;
	border-right: 1px dotted #cccccc;
	padding-left: .7%;
}

.tablecolumn > div:last-child {
	border: none;
}

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

	.tablecolumn > div {
		border: none;
	}
}

/* カラムの幅を調整する */
.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%;
	}
}

iPhone 等では1カラムになるように調整しました。

sgfsgdf

記事の方には以下のような感じのものを貼りました。

<div class="tablecolumn" style="font-size:13px;margin:0 -6%;width:112%;color:#555555;">
<div class="w25">

(本文)

</div>
<div class="w25">

(本文)

</div>
<div class="w25">

(本文)

</div>
<div class="w25">

(本文)

</div>
</div>

2カラムのときには、「w50」、3カラムのときには「w33」を使えばいいようにしました。

なお、背景がない状態だと、必ずしも「display:table」を使う必要はありませんが、「カラム状の記事を作成するときにはこれ」みたいなものを作っておきたかったので、今回、作成してみたところです。

投稿者: comemo

mac & iPad で情報をインテグレートする

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。