WEB制作.Hack

今まで使ってコーディングが楽になったと思われるCSSテクニック（一部CSSではない部分もありますが…）などをまとめておきたいと思います。

コーダーの方は知っている事が殆どだと思いますが、知らない人は直ぐにでも使える簡単な事も多いので是非使ってみて下さい。

元の記事はこちら

海外サイトでたまに見かけるレトロ風なデザインのサイトって凄く雰囲気も出てますし、かっこいいですよね～

自分はレトロなデザインは出来ませんし出来る気もしないので凄いと思います。レトロなデザインに挑戦しようと思っている方は参考にでもして下さい。

元の記事はこちら

まぁ～タイトルの通りですが、今さらながら Twitter をはじめる事にしました。

記事にする程ではないけど気になった情報やおもいっきりプライベートな事を呟いていこうかと思っているのですが、気になってくれた方はよろしくお願いします^^

http://twitter.com/csslecture/

元の記事はこちら

Firefox の見た目をデフォルトのまま使っている人は一度見た目を変えてみてはいかがでしょうか？

何が変わると言っても見た目だけですけど…しいて言うなら気分が変わります。仕事上 Firefox を眺める時間が長い自分には気分を変える事はかなり重要なんですよね…

って事で見た目の変更の仕方がわかんね！って人の為に変更方法を紹介しておきます。紹介と言っても誰でも直ぐに出来ちゃうですけどね;;

元の記事はこちら

最近紹介ばかりな感じがしますが・・。
ちょっとテクニックの発想に感動したので、解説も踏まえて紹介したいと思います。
ちなみにこのテクニックの元になったのはこちらの CSS Play で紹介されているものです。

まず最初に、概念図を見せます。（クリックで拡大）

クリーン HTML のプルダウンメニュー デモ

サンプルダウンロード

ネガティブマージンとパディングで余白を相殺

概念図を見てもらうと分かりますが、通常のメニューに対して margin-top にネガティブマージンを、 IE6 で対応している数値いっぱいに設定し、かつ同様の値を padding-top にも設定します。
“モダンブラウザの場合はこれはなくても大丈夫なのですが、IE6 の場合、隠れているプルダウンメニュー部分が隣の要素と重なる、という不具合があるのでこれで解消しています。”

メニューに固定幅と overflow: hidden を設定

そしてリスト要素に対して表示させたい固定幅を指定しつつ、overflow: hiddenではみ出した部分を非表示にします。ここがまずポイント 1 です。

メニューとプルダウンメニューを float で配置

続いて、リスト内の a 要素を左に float させ、プルダウンでマウスオーバー時に表示させたい要素も左に float させます。
これで、なにもしていなければ、単純に最初の a 要素とリスト要素が横に並ぶ状態になります。

ここでポイント 1 が生きてきます。固定幅と overflow: hidden によって、float で並んだ要素のうち、a 要素のみが表示されます。2 カラムのサイトで、右カラムだけ overflow: hiddne で隠れているのを想像すると分かりやすいと思います。（イメージはこんな感じ↓）

:hover でボックスのサイズを変更

ここがポイント 2 です。そして秀逸。
:hover 擬似クラスは IE6 の場合、a 要素以外には対応していません。
無理やり対応させる方法がなくはありませんが、その場合は HTML 的に invalid になってしまいます。
しかし、今回はタイトルの通りクリーンな HTML 実装されているため、しっかりと a 要素に :hover 擬似クラスを使います。

では使われているポイントを見てみましょう。

<br /> ul.ulTop li.liTop a.aTop:hover ,<br /> ul.ulTop li.liTop a.aTop:focus ,<br /> ul.ulTop li.liTop a.aTop:active {<br /> margin-right:1px;<br /> }<br />

しっかりと a 要素に :hover 擬似クラスが使われています。
ここで指定されているmargin-right: 1pxは、プルダウンメニューの親（マウスオーバーしたらメニューが表示される部分）の右マージンを拡大する、という処理です。

ではなぜ、こんな処理をしているのでしょうか。
答えは、これを追加することによって、上で書いた overflow: hidden で隠れているリスト要素を “カラム落ちさせる” ことです。
ぴったりと計算したカラムの場合、1px でも width なり margin なりが違うとカラム落ちしてしまいますよね。
これを “あえて” 実行しているわけです。

さて、カラム落ちしたリストはどうなるでしょうか。
overflow: hidden で隠れるのは、幅の部分のみなので当然、カラム落ちしたリスト要素は、マウスオーバーした a 要素の下に来ます（カラム落ち）。

まさにプルダウンメニューが表示されたように見えますね。
しかし、これだけではリスト部分にマウスを移動した瞬間、a 要素のmargin-right: 1pxがなくなってしまうため、また元の位置に戻ってしまいます。

ここが秀逸な部分です。
リスト部分にマウスを持っていくと、当然その先もリンクになっています。
リンクということは a 要素ですよね。
そして、この a 要素にも同じようにボックスのサイズが変わる処理をしておきます。
こんな感じです↓

<br /> ul.sub a:hover ,<br /> ul.sub a:focus ,<br /> ul.sub a:active {<br /> margin-right: 1px;<br /> }<br />

すると、親に当たる a 要素からマウスが離れても、今度は子要素に当たる a 要素の幅が変わるため、結果的にプルダウンで表示された部分にマウスを移動してもプルダウンしたままになる、というわけです。

さらに秀逸な点

さて、これでテクニックの肝は説明しましたが、このサンプルにはさらに秀逸な点があります。
それは “クリックしてプルダウンを固定することができる” ということです。

上の CSS を見て気づいている人もいるかもしれませんが、ul.sub a:focusやul.sub a:activeにもmargin-right: 1pxが設定されているため、クリックした際にも margin-right: 1px が反映されます。

そのため、クリックするとプルダウン状態が維持される、というわけです。
これを応用すると、クリックで表示させるメニューも簡単に作れそうですね。

注意点

このテクニックの注意点というか、対応できない点として、リストの幅が固定でないといけないため、2 階層以上あるようなプルダウンメニューは作成できません。そのため、ちょっとしたプルダウンなどに使うことが望ましいです。

元の記事はこちら