CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

WordPressテーマ「PHOTEK (tcd024)」
WordPressテーマ「SOURCE(TCD045)」

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。

a

デザインは、下線のみで。

今までテーブルで作ってたんですけど、シンプルじゃないかなぁと。。
テーブルってレスポンシブがめんどくさいし(´・ω・`)

というわけでコード作りました!

HTML

<div class="box">
<ul>

<li>
<span class="box-left">左側のコンテンツ</span><span class="box-right">右側のコンテンツ</span>
</li>

<li>
<span class="box-left">左側のコンテンツ</span><span class="box-right">右側のコンテンツ</span>
</li>

</ul>
</div>

CSS

.box {
	margin: 0;
}
.box ul {
	margin: 0;
	list-style: none;
}
.box ul li {
	padding: 1em 0;
	border-bottom:1px solid rgba(0,0,0,0.2);
}
.box ul li a {
	text-decoration: none;
	display: block;
}
.box-left {
	display: inline-block;
	width: 20%;
	margin-right: 10%;
	vertical-align: middle;
}
.box-right {
	display: inline-block;
	width: 70%;
	vertical-align: middle;
}

応用

WordPressで投稿をニュースっぽく表示したりもできますね!

<div class="box">
	<ul>
		<li>
			<a href="<?php the_permalink() ?>"><span class="left"><?php the_time('Y.m.d'); ?></span><span class="right"><?php the_title(); ?></span></a>
		</li>
	</ul>
</div>
WordPressテーマ「LUXE (tcd022)」
WordPressテーマ「LOTUS (TCD039)」

こんな記事も書きました!

laptop-computer-1245981_1280

コピペで使えるCSSデザイン枠テンプレート

どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...

MORE

alarm-clock-2132264_1280

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

MORE

architecture-1868502_1280

CORE(TCD027)でトップページの新着記事一覧にページナビをつける

先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...

MORE

season-1985856_1280

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

MORE

computer-1185626_1280

CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...

MORE

coffee-2446645_1280

ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...

MORE

cup-2884023_1280

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...

MORE

food-2940553_1280

ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...

MORE

laptop-2838921_1280

WordPressでCSSの反映を確認しながら編集する方法

CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...

MORE

background-2846221_1280

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

MORE

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

flower