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

リスト表示へ

プルダウンメニューをさらに作り込んでみた

2006年12月14日 10:38

ということで、連日同じエントリーですが。
もう少し作り込んで、今回は別ページでサンプルをアップしてみました。

変更点としては、前回の物に比べ、色などのスタイルを修正。
加えて、下に階層が含まれているメニューについては、右端に▲のマークを
自動で追加するようにしてみました。
動作テストは「WinIE6、Firefx1.5、2.0」です。

※干し梅さんより指摘を頂き、サンプルを修正しました。
XHTML が Valid になるように修正しました。

プルダウンメニューデモ

サンプルダウンロード

※サンプルダウンロードには、html ファイル、css ファイル、js ファイルと、中で使われている画像ファイルが含まれています。

まだまだ改変の余地ありなので、改変や使用は完全フリーです。(というか、ダウンロードしてくれる人がいるんだろうか?w)
ただ、できればコメントとかくれるとさらにやる気がでるのでうれしいですw
(なんか変なとことかあったら言って下さい...)

入れ子のプルダウンメニューを作る

2006年12月13日 15:30

このあとのエントリーで、CSSのみでプルダウンメニューを作る を書いてます。
IE6 にも対応しているので、参考にしてみてください。

前回、CSSによるポップアップメニュー でポップアップメニューを作成したけど、今度はそれをさらに発展させて入れ子のポップアップメニュー(プルダウンメニュー)を作ってみた。(というか、案件でそういうのを作ることになって、サンプルを作ったのでアップしてみただけだけどw)

ただ、IE でも動作するようにするため、JavaScript を介入させています。
IE を省いて、モダンブラウザのみで動けばいい、ということであれば CSS だけでも実現できるようです。
faLog さんを参考にしたので、CSS だけで実現させたい場合は参考にしてください。

ちなみに、入れ子を複数指定しても大丈夫なように作ってます。
<li> 要素の中に <ul> 要素を入れ子にしていくだけで、階層構造が作れるようになってます。

サンプルの解説

【サンプル】

DIV要素を垂直方向に中央寄せする

2006年12月 6日 08:51

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

DIVを垂直方向に中央寄せするCSSサンプル:PHPSPOT開発日誌

こんな記事を見つけた。
BOX要素を垂直方向に中央寄せするには、テーブルくらいしかできない。
そんな中、CSSでそれを実現してしまおう、というのがこの記事だ。
中を読んでみたけど、わりと強引な感じ。n

HTMLソース

CSSソース

簡単に説明すると、まずhtmlとbody要素にheight:100%を指定。
これでどのブラウザでも画面の縦いっぱいにBOXが展開されます。
そして、その中にDIVをheight:50%で配置。
こうすることで、このDIV要素の下端が画面の中央になります。
また、heightと一緒に上marginに「中央寄せしたいBOX」の高さの半分の値を設定します。n

そしてさらに、そのDIV要素の下にDIVを配置。
そこへ想定している高さを指定し配置することで中央寄せとなります。
つまり、最初のDIVで画面中央までBOXを生成し、
さらに次のDIVの高さの半分だけ上にBOXを押し上げることで
結果的に中央寄せになる、というものですね。
かなり強引な上に、高さの決まったものしか中央寄せできないので
実際に使えるかは未知数ですが…。

てか、なぜBOX要素の垂直方向への中央寄せがないんでしょうかね?
結構必要だと思うのですが…。
次のCSS3に期待しましょうwn

[clearfix] どんなブラウザでもクリアするワザ【最終版?】

2006年11月21日 11:53

クリアするウラワザ で書いた、ひとつのボックスで完結する float のクリアワザの、IE7 対応版です。内容としては、前回とほぼ同じ。
ただ、IE 用に、IE 独自拡張 CSS の zoomプロパティを使うところ。n

とすることで IE7 でも大丈夫なようです。
細かい内容については、前回の記事を参照くださいwn

ちなみにこちらのサイトが元ネタです。
STOP'N LISTEN

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

クリアするウラワザ

2006年11月 7日 17:27

float、結構思惑通りに動かなくて苦労しますよね。
CSS 触り立てで陥るのが、float によって親ボックスが正常にしたまで伸びない、ということ。
(まぁ、動作的にはそれで正しいですが、直感的に言うとやや違和感ありますよね)
しかし、最初は「なにごと?!」と思ってしまいます。n

自分のイメージで簡単に説明します。
まず、輪ゴムを想像してください。(え? とか思わないでw)
さらに、タバコとかなんでもいいので箱(ボックス)を想像してください。
さて、その輪ゴムをその想像した箱にくくり付けてください。
輪ゴムは、箱の形になって伸びますよね?
これが、いわゆる通常時の親ボックスの形です。n

さて、今度はその箱から輪ゴムをとってください。
すると輪ゴムは元の形にもどって小さくなりますよね?
これが、float(浮いた)したボックス(タバコの箱)と親ボックス(輪ゴム)の関係です。
つまり、子ボックスが浮いてしまったために、親ボックスの中には何もない状態となってしまった、というわけです。n

だから、いきなりボーダーが変になったーと思っても、それが正常の動作(輪ゴムが元に戻るのと同じ)なのです。n

さて、ではどう対処したらいいか?n

float したボックスのあとに、float を clear するボックスを挿入しても解決されますが、ただそれだと HTML 的に汚くなってしまうので、CSS だけで解決しましょう。n

float を囲っている親ボックスに対して以下のプロパティを追加してください。n

peek-a-booバグ

2006年9月25日 10:02

いないいないばぁバグ、と言われるものだそうです。
WinIE で発生するバグで、ボーダーや背景がスクロールしたときに消えるバグだとか。
再読み込みすると出て来たりするのでいないいないばぁと呼ばれてるんでしょう。n

解決策は、問題の出る要素に対してheigh:1%を指定するだけ。
WinIE の場合、高さを指定しても内容によって勝手に高さが変わるので問題ありません。
(他のモダンブラウザでは、高さ指定するとそれに固定されるため、WinIE のみに適用させるようハックを使う必要があります)n

[2009/02/04 追記]
ちなみにこのheight: 1%。IE が持っているhasLayouttrueにする効果のあるプロパティです。
そのため、height: 1%を利用するより、IE の独自プロパティであるzoom: 1を利用したほうがハックを必要としないためいいかもしれません。(未検証)

とある案件でこれが出て、また 1 から CSS 見直さないといけないのかなーと凹んでたので簡単に解決してよかったです。(本当に)
とりあえず備忘録的に書いてみました。
初耳だったので他の人の参考にもなればな、とも思い。
とりあえず久々の更新ですがこれだけです(´・ω・`)

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

CSS管理についての考察

2006年8月18日 16:04

前にも書いたけど、CSS 管理についての考察を再び書いてみようと思う。
なぜこれを書くに至ったかは、ひとつ現状で試していることがあるからだ。
また、これを見た人(どれくらいいるかは分からんけどw)も試すか、もしくは使い勝手や、管理する際の利便性などについて考えてコメントをくれるととても嬉しい。n

まず、結論から言ってしまうとTAG を設けるということだ。
最近、色々なオンラインサービスで TAG が目につく。
そしてあとあとその情報を呼び出すときに、その TAG を指定する、というものだ。
これの便利なところは、ひとつの要素に複数の TAG をつけられる点。
これによって、その情報がなにに属するのか、を複数定義付けられる。n

だから例えば、音楽 CD を例に取ると、まずCDという TAG が考えられる。
また、それが自分の好きなアーティストのアルバムだったとしたらアルバムお気に入り、もしくはそのアーティスト名そのものでもいい。
こうして複数の TAG をつけておくことで、もしそれが情報の中に埋もれてしまっても、検索の際にその中のどれかの TAG をキーワードに検索すれば結果に表示されることになる。n

さて、なにがいいたいか、というと、CSS にはコメントという機能がある。
そのクラスや ID が一体どういった役割なのか、またファイルの先頭に更新日などを書く場所を設けてもいい。
とにかく、後から見た時に分かりやすくするための情報を付与できる、ということだ。n

このコメント、今まではわりと適当にしか使っていなかったが、これの大事さが今になって分かって来た。
できるだけ詳細にコメントを書くことで、それがどういった目的で書かれたのか、またそれ以外の要素についての説明もされていると、そこからさらに別の場所に誘導することもできる。
(例えば、これの中にはem要素が含まれる旨を書き、記述先がこれより下にあることを明示することで検索性があがる)n

最近意識していることは、できるだけ詳細に書く事。また、それが box を定義するものであれば、それの中に一体どんな要素(クラスや ID 、それ以外のセレクタなど)が含まれるのかも書いている。
実際、場合によっては使用しないクラスなども出て来てしまうが、誰かが編集する際に、新しく追加する項目用の CSS がすでに定義されているのか、また未定義なのか分からない。
それがコメントに書かれていれば、新しくクラスや ID を定義する手間も省けるし、無駄に CSS が増えて行くこともなくなる。n

さて、コメントについていくつか自分なりの使い方を書いて来たが、その中で一番使えるのでは? と思っているのがTAGだ。n

印付きリストを実現する

2006年8月 9日 09:07

知ってはいたのに、忘れていてついめんどくさい作り方をしてしまったので、備忘録的にも書いてみたいと思います(*'-')
今回も:before疑似クラスとcontentプロパティが出てきますが、一体いつになったらこれを気兼ねなく使えるようになるんだ…。n

さてさて、みなさんは印付きリストを作成するときはどうやって作っていますか?
ナカグロ(・)や、数字、ローマ数字ならば ul 要素や ol 要素をそのまま使うだけで事足ります。
しかし例えば、「■」や「●」などを頭に置きたい、という場合もあるんじゃないでしょうか。n

CSSの運用・管理を模索してみる。

2006年7月26日 12:51

CSS の運用・管理には毎回悩まされる。
案件ごとに違ってくるのはしょうがないとしても、
同じような内容でもそのときどきで「これがいい」と思うことが
自分の中でも違うのが問題だ(;´д`)

とまぁそんなこんなで少しだけガイドラインぽいものを作ってみた。
とりあえずこれをたたき台にして、徐々に追加・修正を行って
ブラッシュアップしていこうと思っている。n

もしこれはちょっと…とか、こうしてみたら?
なんていうありがたい意見がある場合はぜひぜひコメントくださいませ(*'-')

CSSでドロップキャプスを表現する

2006年7月13日 16:16

雑誌などでよく見かけるドロップキャプス(記事の一番最初の文字だけおっきくなってるやつです)をwebで実現する方法です。
まぁぶっちゃけ、これもよく記事で見かけますがwn

未だかつて仕事で使った事のない:first-letter疑似クラスを使ったものと、それを使わないで表現したものとふたつ載せてみました。なんでかって?n

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