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

セル全体が立体的に見える表組みを作る(2ページ目)

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

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む

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

何かを立体的に見せるには、「光の当たっている部分」と「陰になっている部分」を表現します。 具体的には、上側と左側に明るい色を、下側と右側に暗い色を使い、その中間色で背景を塗ると、立体的に出っ張って見えます。

光と陰の説明図
 

この方法を使って表のセル全体をデザインすると、以下のように見せることができます。

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

なお、明るい部分と暗い部分を逆転させ、上側と左側を暗く、下側と右側を明るくすると、立体的にへこんでいるように見えます。 (よく分かるように、全体の背景を灰色にしています。)

セル全体が立体的にへこんでいるように見える表
▲セル全体が立体的にへこんでいるように見える表

それでは、具体的にスタイルシートを記述する方法をご紹介致しましょう。

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

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

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