CSS リファレンス

サイドバーを固定にしたサンプル

サイドバーを固定にしたサンプル

今回はWebサイトのサイドにある部分を固定にするサンプルを作ってみました。

IE6も対応なので、解説していきたいと思います。

demo page

フッターを固定にしたサンプル

フッターを固定にしたサンプル

前回はヘッダーを固定にサンプルについて説明しましたが、今回はフッターを固定にしたサンプルを紹介します。

IE6に対応させる為に、以前にも紹介させて頂いたCyokodog::Diaryのcyokodogさんが使ったスクリプトを使いたいと思ったいたいと思います。

demo page

CSSでヘッダーを固定にしたサンプル

CSSでヘッダーを固定にしたサンプル

ヘッダーを固定にしたサイトってCSS HappyLifeさんとかが有名だと思いますが、そんな感じにヘッダーを固定にサンプルを作ってみました。

IE6も対応なので、解説していきたいと思います。

demo page

知っておいたら便利なCSS(スタイルシート)テクニック

知っておいたら便利なCSS(スタイルシート)テクニック

XHTML CSSによるWebサイト作成をする上で、なかなか思い通りに表示してくれない時やブラウザーによる表示の違いに頭を悩まされた事って誰もが経験した事があるかと思います。
もちろん自分も経験あります。特に勉強中の時なんか一つの事で何時間?何日悩まされた事やら...

そういう事が少しでもなくす為にも、知っておいたら便利なCSSのテクニックをまとめてみました。

position:fixedのright , bottomをIE6に対応させる

position:fixedのright , bottomをIE6に対応させる

以前CSS : positionの「absolute」「relative」「fixed」のリファレンスというエントリーをしたんですが、この時はIE6にright , bottomへの対応の仕方について分かっていなかったのですが、Cyokodog::Diaryのcyokodogさん、THE HAM MEDIAのハムさんに教えて頂いたので紹介しておきたいと思います。

demo page

CSSでTableをデザインするサンプル 応用編

CSSでTableをデザインするサンプル 応用編

←の用に料金表など、一つのコラムを目立たせてるようなテーブルのデザインを海外のサイトなどではみかけた事があるので、これのデモページを作ってみました。

思ってたよりややこしいかったので解説付きで紹介したいと思います。

demo page

min-width、min-height、max-width、max-heightをIE6でも実装する方法

「min-width」「min-height」「max-width」「max-height」をIE6でも実装する方法

CSSのの中に「min-width」「min-height」「max-width」「max-height」と言うプロパティがあるのですが、IE6ではそのままでは使えないので知らない人もいると思うですが、これがけっこう使えるんですよね。

サイト全体の横幅をpx指定せずに、%やaoutなどを使ってブラウザのサイズに合わせて可変するようなサイトを見かけるんですが、この時にmin-widthとかを指定しておくとブラウザのサイズが小さくなっても表示が変にならないようになるんですよ。

まぁーそんなわけでIE6でも実装出来る方法を解説しておきます。

CSS : positionの「absolute」「relative」「fixed」のリファレンス

CSS : positionの「absolute」「relative」「fixed」のリフォレンス

CSSレイアウトを行う際にデザインによってはpositionプロパティを使わないといけない場合もあるので、今回は「absolute」「relative」「fixed」とそれぞれの使い方を解説していきたいと思います。

ページ内分割をするナビゲーションのクリックエリア?IEバグ対応

ページ内分割をするナビゲーションのクリックエリア?IEバグ対応

ページ内分割する上記みたいなナビゲーションってブログを見ているとよく見かけると思うんですが、このナビゲーションのクリックエリアみたいなのが、IEではおかしくなってしまってる人って自分がみる限りでは殆どです。

見た目やCSS、実際にマウスが反応するエリアは一切おかしくはないのですが、実際にクリックしてみるとFirefoxやSafariでは、正しく表示されるのがIE7、IE6(6以下は知りません)では変な表示になってしまうんです...

CSSでTableをデザインするサンプル集

CSSでTableをデザインするサンプル集

以前TableをCSSでデザインするいろんなパターンのまとめでも紹介したのですが、今回は自分でTableのデザインで使いそうなサンプルを10点作ってみました。

もちろんフリーに使ってくれて構いませんし、自由にいじって頂いてけっこうです。

Domo Page

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年