CSSでTableをデザインするサンプル 応用編
- Category
- ： CSS リファレンス
←の用に料金表など、一つのコラムを目立たせてるようなテーブルのデザインを海外のサイトなどではみかけた事があるので、これのデモページを作ってみました。
思ってたよりややこしいかったので解説付きで紹介したいと思います。
(2008/10/24 17:51 PM)
CSSリファレンス、(X)HTML、Movable Type、その他Webサイト制作に関する役立つ情報を掲載します！
←の用に料金表など、一つのコラムを目立たせてるようなテーブルのデザインを海外のサイトなどではみかけた事があるので、これのデモページを作ってみました。
思ってたよりややこしいかったので解説付きで紹介したいと思います。
(2008/10/24 17:51 PM)
CSSのの中に「min-width」「min-height」「max-width」「max-height」と言うプロパティがあるのですが、IE6ではそのままでは使えないので知らない人もいると思うですが、これがけっこう使えるんですよね。
サイト全体の横幅をpx指定せずに、%やaoutなどを使ってブラウザのサイズに合わせて可変するようなサイトを見かけるんですが、この時にmin-widthとかを指定しておくとブラウザのサイズが小さくなっても表示が変にならないようになるんですよ。
まぁーそんなわけでIE6でも実装出来る方法を解説しておきます。
(2008/10/22 13:23 PM)
CSSレイアウトを行う際にデザインによってはpositionプロパティを使わないといけない場合もあるので、今回は「absolute」「relative」「fixed」とそれぞれの使い方を解説していきたいと思います。
(2008/10/06 12:22 PM)
ページ内分割する上記みたいなナビゲーションってブログを見ているとよく見かけると思うんですが、このナビゲーションのクリックエリアみたいなのが、IEではおかしくなってしまってる人って自分がみる限りでは殆どです。
見た目やCSS、実際にマウスが反応するエリアは一切おかしくはないのですが、実際にクリックしてみるとFirefoxやSafariでは、正しく表示されるのがIE7、IE6（6以下は知りません）では変な表示になってしまうんです...
(2008/09/02 17:46 PM)
以前TableをCSSでデザインするいろんなパターンのまとめでも紹介したのですが、今回は自分でTableのデザインで使いそうなサンプルを10点作ってみました。
もちろんフリーに使ってくれて構いませんし、自由にいじって頂いてけっこうです。
(2008/08/29 11:53 AM)
前回のCSSで可変対応した角丸のボックスを作る その1は、画像を上部、下部の二つに分けてやっていたのですが、今回は上記画像の用に上部、中部、下部に画像を切り出してやるやり方を解説したいと思います。
(2008/08/22 12:27 PM)
このような感じで角丸のボックスにテキストの内容が囲われているデザインパターンってよく見かけますし、実際に仕事でも使う機会が多いので分からない人やあやふやな人に参考になるようなサンプルを作ってみました。
今回は角丸のボックス内がグラデーションになっている場合のやり方を解説したいと思います。
(2008/08/21 14:15 PM)
サイト全体を包むdiv要素を上下中央配置にしたい！って声をちょこちょこ聞きますので解説をしていきたいと思います。
でも個人的に普通のWebサイトを上下中央にするのは好まないですよね...
フルFlashのサイトかや写真をメインに見せたいようなフォトギャラリー系のサイトなら良いと思うので今回は以前にも解説をしたlightview.jsを使ったPhoto Galleyのサイトをデモページとして作ってみました。
(2008/08/04 14:49 PM)
今回のサンプルで使う画像です。
例えば、企業系のWebサイトとかで、商品画像とか、イメージ画像とかって使う機会ってけっこうあると思うんですが、ただ画像をおくだけでは寂しいですよね...
この時にimg要素に薄い色のborderを入れてあげるだけでけっこう綺麗になると思うですよね。
なので今回はimg要素のデザインをいろんなパターン作ってみたので、参考にしてみて下さい。
(2008/07/07 13:12 PM)
tableタグを使う機会ってそう多くないと思うですが、料金表とか組む時はtableタグを使うのが一番だと思います。
ここで本題なんですが、自分は料金表などのデザインのバリエーションがうとく、何時も同じようなパターンになってしまうんですよね...。
なので今回は料金のデザインのパターンと、それをCSSで組むやり方の両方を紹介してくれるサイトをまとめました。
(2008/07/04 17:27 PM)
