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

テーブルの見出しだけ立体的にする

テーブル(表)を装飾する際、枠線や背景色を加えるだけではシンプルなので、見出し部分の装飾に少し凝ってみてはいかがでしょうか。見出しのセルだけ、グラデーションを使って立体的に見えるよう装飾してみましょう。

西村 文宏

西村 文宏

ホームページ作成 ガイド

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

...続きを読む

テーブル(表組み)を作る際、ただ枠線や背景色を加えるだけではシンプルなので、見出し部分の装飾に少し凝ってみてはいかがでしょうか。
見出しに相当するセルだけ、立体的に見えるよう装飾してみましょう。

サンプル2
 

サンプル1
 

立体的に見せるためのグラデーション部分は、背景画像を使うことで実現しています。 枠線の装飾や背景色、背景画像の指定はスタイルシートで作ります。
※上記のサンプルは画像で掲載しています。クリックすると、お使いのブラウザで実際の表示を確認できます。

背景画像の向き(上下)を変えると、以下のように見えます。

サンプル3
 

使う背景画像を少し濃くすれば、以下のようになります。

サンプル4
 

サンプル5
 

今回は、上記のサンプルのように、表の見出し部分をグラデーション画像で装飾する方法をご紹介いたします。

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

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

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