関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
デジタル関連コミュニティ
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
ホームページ作成
【ホームページ作成】テーブルの見出しだけ立体的にする
テーブル（表）の作成・装飾 (HTML,CSS)
更新日：2009年05月23日
テーブルの見出しだけ立体的にする
テーブル(表)を装飾する際、枠線や背景色を加えるだけではシンプルなので、見出し部分の装飾に少し凝ってみてはいかがでしょうか。見出しのセルだけ、グラデーションを使って立体的に見えるよう装飾してみましょう。
テーブル（表組み）を作る際、ただ枠線や背景色を加えるだけではシンプルなので、見出し部分の装飾に少し凝ってみてはいかがでしょうか。
見出しに相当するセルだけ、立体的に見えるよう装飾してみましょう。
 |
 |
立体的に見せるためのグラデーション部分は、背景画像を使うことで実現しています。 枠線の装飾や背景色、背景画像の指定はスタイルシートで作ります。
※上記のサンプルは画像で掲載しています。クリックすると、お使いのブラウザで実際の表示を確認できます。
背景画像の向き（上下）を変えると、以下のように見えます。
 |
使う背景画像を少し濃くすれば、以下のようになります。
 |
 |
今回は、上記のサンプルのように、表の見出し部分をグラデーション画像で装飾する方法をご紹介いたします。
この記事の担当ガイド
関連キーワード[PR]
住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！ さぁ、いますぐチェック！
人気ホームページ作成ランキング
Powered by 価格.com
関連キーワード[PR]
関連キーワード[PR]
メルマガ登録
【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。
おすすめ厳選サイト
季節特集
専門家を探せる、相談できる。
All About モバイル
Copyright(c) All About, Inc. All rights reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます