カテゴリー:CSSテクニック

リスト表示へ

CSSの1行でできるIE6対策(ハック)

2008年3月 5日 17:33

Internet Quality さんの所の紹介エントリーにあったサイトで、IE6 だけにうまく CSS を適用しているサイトがあったので、自分のメモとしてもエントリー。n

サンプルを見ると、ごく簡単な処理になってます。
通常、importantを指定したスタイルが適用されますが、どうやら IE6 の場合、同じセレクタ内の場合はimportantで書かれていても、そのあとに書かれた同じスタイルが適用されてしまうようです。

なので、IE6 だけに適用したいものなんかは、ハックを使わずにこんな感じで適用するとスマートかも。ただし、imporantを使ってるので、他のところで上書きしようとしてもできないので、通常のハック同様、乱用は禁物ですが・・・。n

合わせて読むと役に立つかもなエントリー

初心者が陥りそうなCSSの7の間違い

2008年3月 1日 17:40

ということで、かなり独断と偏見によってこのエントリーを書いてますがw
Yahoo! 知恵袋のような質問系のところでたまに見かける問題や、
以前自分で陥った間違い(勘違い)についてまとめてみました。
知ってると大したことない問題でも、知らないとその修正にかなりの時間を費やしたりします。
そういう人たちに知っておいてもらいたいことを 7 個ほど書き出してみました。

書いていくうちに、すごい長くなってしまいました(;´д`)

CSSのみでアコーディオンメニューを実現する

2008年2月18日 00:49

前回のエントリー「:target擬似クラスを使ったプルダウンメニュー」とややかぶる気がするけど、若干違う感じなので勘弁、ってことでwn

この:target、使い方によってはonclickなどのjavascriptの代替としてかなり使えそうな予感。
しかも、物によってはページ内リンクとして動くので戻るを使って戻っても、移動する前と同じように見えたり、外部からも直接ページ内リンクも含めてリンクすることで見た瞬間にその項目を表示しておく、といった使い方もできそう。n

さて、今回のサンプルはアコーディオンメニューです。
今まではjavascriptなどで実現していたものを、CSSのみで実現してしまおう、というのが今回の趣旨です。n

CSSのみでアコーディオンメニューを実現するデモ

:target擬似クラスを使ったプルダウンメニュー

2008年2月15日 11:33

RedLine MagazineさんのCSS3 :target擬似クラスでイメージギャラリーを見て、ふと思いついたのでサンプルを作ってみた。n

:target擬似クラスを使ったプルダウンメニューデモ

内容は、:target 擬似クラスを使った、windows のメニューバーのようにクリックしたらメニューが現れるタイプのメニュー。
それを、JavaScript なしで CSS のみでやってしまおう、というのが今回の主旨。n

DIV要素を縦横中央に配置する

2008年1月31日 11:09

もっとフレキシブルに対応できる垂直中央寄せの記事を新しく書きました。
ブロック要素を内容量に応じて自動で上下左右にセンタリングさせるトリック

とある CSS による Lightbox 的表現のエントリーを見ていて、以前に書いた DIV要素を垂直方向に中央寄せする よりも簡潔な CSS (と HTML)で縦横垂直が実現できそうだったので書いてみた。n

div 要素を縦横中央に配置するデモ

まず最初にまとめを話してしまうと、絶対配置にした div 要素を、縦横 50% の位置に移動する。
するとボックスの左上が画面中央にくるので、さらにその後ネガティブマージンを使ってボックスの中央を画面中央に合わせる、というものです。n

Javascriptによる外部CSSファイルの切り替え(書き直し)

2008年1月28日 22:56

以前同じ記事を書いたんですが、サンプルデータが消えてしまったのと、
紹介があまり詳しくなかったので書き直してみました。
(たまたまこれを利用する機会もあったのでw)

Javascriptによる外部CSSファイルの切り替えデモ

肝は JavaScriptのみです。JavaScript ソースはこんな感じ↓n

CSS講座 - 目で見るボックスレイアウト

2008年1月20日 21:34

CSSのボックスレイアウトって色々複雑だよなぁと思っていて、もし自分がそれを、まだ理解してない人に教えるならなんて教えるかな? とか考えてるときがありました。
元々、なにかに例えて説明するのが好きなので、身近なものでなにか説明できないかと考えたわけです。
出した答えがこれでした↓

CSSのボックスレイアウトを家を例えに説明した図

すべてを家に例えるわけです。
まず、widthは "家の幅"、paddingは "庭の範囲"、borderは "家の壁の厚さ"、marginは "隣の家との距離" と。
そう説明した上で、"庭の範囲"(つまりはpadding)は自分の好みが反映される(つまり背景)。そして自分の敷地は壁までの範囲(つまりwidth+padding+border)。そして隣の家との距離はmargin

こう例えると、なんとなくpaddingmarginの違いがわかりやすいのかなぁと思ったわけです。
さらに、実際のボックスの幅がwidth+padding+borderとなる理由も、上記の説明でなんとなくイメージできるかなと。

そんなこんなを考えていて、ついに人にそれらを教える機会があり、参考資料として上の図と、下のツールを作るに至りました。
分かる方から見ても、この説明が分かりやすいか、分かりづらいか、そういった意見を頂きたいなぁと今回の記事を書いてみました。
もっといい説明があるよ!とか、なんでもいいのでコメントもらえたら幸いです。

ちなみにツールのコンセプトは「よくボックスレイアウトについて分かっていない人でも、動的に見ることでなんとなくでも概要をつかんでくれるかなー」と。
おかしい部分なんかありましたらコメントでももらえるとうれしいです(;´д`)

CSSのみでロールオーバー・まとめ(IE6含む)

2007年12月20日 10:36

わりと「ロールオーバー」で検索される方が多かったので、自分で書いたエントリーや
使ったことのあるロールオーバーの方法なんかをまとめてみました。

ロールオーバー時の画像変更と、プルダウンメニューなどのロールオーバー(マウスオーバー)のアクションなんかもまとめてます。

「CSSのみでロールオーバー・まとめ(IE6含む)」コンテンツ

SEO対策になるCSSロールオーバー?

2007年12月16日 00:42

ふと思いついたので書いてみました。
overflow: hidden 以外使わない、スパムになりそうもない手法で、さらに無駄なタグを挿入せず、かつ CSS OFF、画像 OFF でもなんとか情報が消えないように工夫した CSS ロールオーバーを作ってみました。n

SEO対策になるCSSロールオーバー?デモ

今回のサンプルの肝は、「overflow: hidden」です。n

CSSのみでプルダウンメニューを作る

2007年11月30日 09:42

※追記[2010/01/29]
CSS のみで、かつハックやコメントを使わずにクリーンな状態でプルダウンを実装できるテクニックの紹介記事を書きました。
2 階層以降が作れない、などのデメリットもありますが、クリックしてプルダウンを固定することもできるので場合によってはとてもオススメのテクニックです。
ハックやJavaScriptを使わず、クリーンHTMLでIE6にも対応したプルダウンメニュー

※追記[2008/09/25]
説明に表示していたHTMLに誤りがあったため、修正しました。

以前にふたつほどプルダウンメニューについて書きました。

でも、上記エントリーは IE 対策として JavaScript を併用したものでした。
が、なんと CSS のみでも IE6 にまで対応したプルダウンメニューが実現できるとのことで、ちょっとサンプルを作ってみたのでアップしてみたり。

ユウさんに指摘されて、縦バージョンのサンプルも作成してみました。

CSSのみでプルダウンメニューを作るデモ

なぜ CSS のみで実現できるのか理由までは分かっていませんが、これで動く、というところまで紹介したいと思います。

前の10件 1  2  3  4  5  6  7  8  9  10