レスポンシブサイトで使える小ワザ

レスポンシブサイトにおける事例

採用ページなどによくあるtable組みを使って実践してみたいと思います。
まずPCページがこのような感じだとします。

<table>

<tr>
<th>職種</th>
<td>
<ul>
<li>ディレクター</li>
<li>デザイナー</li>
<li>マークアップエンジニア</li>
</ul>
</td>
</tr>

<tr>
<th>勤務地</th>
<td>東京</td>
</tr>

<tr>
<th>求めるスキルと<br>人物像</th>
<td>次のような方を積極的に採用しています！
<ul>
<li>何事にもチャレンジしようとする気持ちや、柔軟な思考をお持ちの方</li>
<li>コミュニケーション能力の高い方</li>
<li>向上心旺盛で常により良い結果を目指して行動ができる方</li>
</ul>
</td>
</tr>

</table>

「求めるスキルと人物像」の欄は一行で収まらないので改行をいれてあります（※ここポイント）
そしてcssは以下です。

table {
	margin-bottom:20px;
	width:100%;
	border-collapse:separate;
}
th,td {
	border:none;
	padding:2%;
}
th {
	width:25%;
	color:#FFF;
	font-weight:bold;
	background-color:#00B285;
	vertical-align:middle;
}
td {
	background-color:#EEE;
}

次にスマホページ。
同じhtmlを使用し、cssだけ修正してスマホでも見やすいようにしてみると…

よく見かけるスマホっぽいレイアウトになりました！
cssは以下のように指定してみました。

table {
	margin-bottom:20px;
	width:50%;
}
th,td {
	border:none;
	padding:2%;
	display:list-item;
	list-style:none;
}
th {
	color:#FFF;
	font-weight:bold;
	background-color:#00B285;
	text-align:left;
}
th br {
	display:none;
}
td {
	background-color:#EEE;
}

ポイントが2つほどあります。
1つ目がdisplay:list-item;というdisplayプロパティ。これは任意の要素をlist要素のように使うことが出来る大変便利なプロパティです。
レスポンシブサイトではこのようにth,tdに対してdisplay:list-item;を指定しリスト要素に見せることで、スマホでも綺麗に表示することができます。

2つ目のポイントがbrタグを消すという指定なのです！
「求めるスキルと<br>人物像」と記述していた箇所は<br>を消すことで、スマホページでは改行がなくなり、一行で表示することが出来ます。

レスポンシブデザインを手掛ける機会があれば、ぜひ活用してみてください！