ホームページ作成/テーブル(表)の作成・装飾 (HTML,CSS)

セル全体が立体的に見える表組みを作る

表を構成するセルの枠線だけが立体的に見えるのではなく、表のセル1つ1つそのものが立体的に見える表を作ってみましょう。なかなか見栄えのよい表ができあがります。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

セル全体が立体的に見える表

スタイルシートを使えば、セル1つ1つの周囲の枠線もデザインできます。 これを活用すると、以下のような「セル全体が立体的に見える表」を作ることができます。 なかなか見栄えがよいと思いませんか?

セル全体が立体的に見える表
▲セル全体が立体的に見える表

一部をへこんでいるように見せることもできます。

一部のセルがへこんでいるように見える表
▲一部のセルがへこんでいるように見える表

これらは、ただスタイルシートで表(table)をデザインしただけです。画像は一切使っていません。
ただ枠線を引いただけの状態だと、次のように見えます。

ただ罫線を引いただけの表
▲ただ罫線を引いただけの表

今回は、スタイルシートを使って、表のセルそのものが立体的に見えるようにデザインする方法をご紹介致します。
簡単にできますので、ぜひ挑戦してみて下さい。

  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます