俺流!バラとラン栽培

バラとランと WordPress に魅せられて!

表(table)にシャドウとグラデーションを付ける方法

表を作成するためにやっとこさシャドウを付けることに成功しました!(本ブログの投稿記事「Internet Explorer 11、table (表)でシャドウを表示する方法」参照)

では、更に完成形にしたいと思います!と言っても表内のトップセルにグラデーションを付けることで完成にします。ちょっとしたあこがれだけの自己満足ではありますが。

PAK86_codeing_700x200

まずは、完成した style.css 内をご紹介。以下のコードです。

これを実行すると、実際には表全体に対して軽めのシャドウが付いて、トップセルにグラデーションが係っているはず。取り急ぎ、「Internet Explorer 11」と最新版の「Google Chrome」で確認しています。以下が実際の表。

冬越温度 強光を好む 中光を好む 弱光を好む
12~15℃ (4)デンファレ (6)コチョウラン:大輪系
(2)コチョウラン:中輪系
(1)コチョウラン:小輪系
None
8~12℃ (3)シンビジウム:大型 None None
5℃ (4)デンドロビウム None None

詳細は、あっちこっちのネットで公開されていますから、そちらのサイトを参考にすることをお勧めしますが、私が参考にしたのは、以下のウェブページ。

もうこれだけで十分に実装できちゃいました。トップセルの部分で「background-color」としちゃって最初は機能しませんでしたが、解説を注意深く読めば、「background」で良かった!

【追記:2015年03月10日】
上記に加えて、各行の背景色を交互に変えてみました。参考にしたのは「CSS3を使って美しく装飾されたテーブルの作り方|Webpark」です。このページ、ほとんど必要な表に関する装飾方法が記載されていると思います。

ちょっとくどいかな~デザインが・・・感じ方は個人差がありますから、取り急ぎ、このデザインは善しとしておきます。

【追記】
ちょっと自分用の備忘録ですが、上記のコードの先頭に付ける「-moz-」や「-webkit-」って何だ、って疑問があって・・・調べてみると「ベンダープレフィックス-CSSの基本 | HTMLリファレンス」というページに解説がありました!

ちょっと引用しておくと・・・

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。
出典:「ベンダープレフィックス-CSSの基本 | HTMLリファレンス」

なるほど!そういうことか~と納得するも解説ができるほどではないので、まずは記憶しておけば良いかな。更に・・・

拡張機能であることを明示するための識別子
ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。

将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。 ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子(vendor identifier)でブラウザの種類を特定します。
出典:「ベンダープレフィックス-CSSの基本 | HTMLリファレンス」

参考までに以下も引用しておきます。

主要ブラウザのベンダープレフィックス
-moz- Firefox
-webkit- Google Chrome、Safari
-o- Opera
-ms- Internet Explorer

これで納得。

関連する投稿記事リスト

下記に、本投稿記事と関連する投稿記事リストを自動生成しています。

自動生成は、投稿記事間の内容(80%)、カテゴリー(10%)、タグ(10%)を基準にして実施され、日付は公開日を示しています。ご興味があれば、是非、ご覧下さいませ。

Updated: 2015年03月13日 — 13:33

気楽にコメントして頂けますように!コメントは承認後の公開です。

* Copy This Password *

* Type Or Paste Password Here *

2,180スパムコメントは、これまでのところでブロックされたSpam Free Wordpress

「俺流!バラとラン栽培」Copyright © 2015-2016 by Zero Cool. All rights researved. Frontier Theme