ウェブログ

CSSだけでちょっとだけ立体的に見えるテーブルのコード


CSSにちょっとだけ一手間いれるだけで画像をつかわずとも立体的というか、いわゆるベタっぽいテーブルから脱却できるCSSをご紹介します。コレ簡単でいいかもです。簡単な追加でちょっと上品に見えますよね。
背景色やthへの見出しはお好きにいじってください。

サンプル

今一番行きたい国 ドバイ
今一番欲しい物 Bluetooth接続のスピーカー
今食べたいもの 海鮮料理。海老とか貝類とか…

コード

以下、htmlとcssです。

html

css

説明

borderの左と上に白い線を一本追加し、tableのborder-collapseをseparateにしているだけなんですけどね。

border-collapseって何

border-collapseとは隣のセルとのborderを重ねるかどうかというCSSプロパティです。デフォルトでは値がseparateとなっていて分かれているんですが、reset.cssではこれがcollapseで重なるように設定されています。なのでどのreset.cssを使っているかにもよるんですが、これをseparateに戻しています。
border-collapse-スタイルシートリファレンス

あとは特に難しいことはないです。
お楽しみを!

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり