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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

サンプル2
 

サンプル1
 

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

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

サンプル3
 

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

サンプル4
 

サンプル5
 

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

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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