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

リスト表示へ

3カラムレイアウトで、中央を可変にするCSS(リキッドレイアウト)

2006年7月10日 16:19

すべて固定幅の 3 カラム構成はよく見ると思います。
しかし、左と右にメニューなどを置き、真ん中だけ可変(リキッドレイアウト)にしたい場合もあると思います。
マイナス値のmarginによる現象を利用してこれを実現しちゃいましょう。

3 カラムレイアウトで、中央を可変にする(リキッドレイアウト)デモ

スターハック

2006年7月10日 10:50

IE4〜6、MacIE4〜5 に CSS を適用するハックです。
色々組み合わせることで個別にスタイルを分けることも可能です。n

セレクタの前に* htmlをつけると、WinIE4〜6、MacIE4〜5 でスタイルが適用されます。
ちなみに、ルート要素である html の前にユニバーサルセレクタを置くのは間違いであり、本来の記述方法ではありません。(つまりこれもバグです)
なので、あまり多様はしないほうがいいかも…。

内容はこんな感じ。n

スター7・ハック

2006年7月 7日 16:33

NescapgeやIEにだけCSSを読み込ませたい場合に使えます。
ただし、これはバグを利用した技です。
また、今後のIEではこれを読み込まなくなる可能性もあります。n

記述ミスを利用してハックする。n

と、body、*、#hogeの間に空白を含めずに書きます。
本来は、ユニバーサルセレクタ(*)の前後には、空白かプラス記号(+)、大なり記号(>)しか置けません。
しかし、ネスケとIEではこれを読み込んでしまう為、(モダンブラウザはエラーとして扱う)他のブラウザをはじきたい(ネスケとIEにだけプロパティを設定したい)場合に効果があります。
ただし、先にも言ったようにこれはバグのため、できるだけ使わないほうが無難です。n

ホーリー・ハック

2006年7月 7日 16:31

Mac IE を"はじく" CSS ハックです。
このハック内の CSS プロパティは、Mac IE には読み込まれません。
簡単に言うと、コメントのバグを利用したハックです。n

Mac IEにだけ読み込ませたくないプロパティがある場合は以下のように書きます。

これは、Mac IE のコメントのバグを利用したハックです。
Mac IE の場合、コメントの終了部分にバックスラッシュ(日本では ¥ )を入力すると、コメントが"終了しない"というバグがあります。n

そのため、「/* Hiiden from Mac IE ¥*/」と書くと、他のブラウザでは正常にコメントがここで終了するのに対し、Mac IE ではコメントがまだ続く、と解釈します。n

なので、その下に書いてあるプロパティもコメント扱いされ、読み込まれない、というわけです。
ただそうなると、その下が延々とコメントになってしまうので、終了させたいところで「/**/」と空のコメントを入れ、Mac IE にもコメントの終了を知らせます。n

こうすることで、Mac IE にだけ読み込ませたくないプロパティがある場合に、Mac IE だけをはじくことができます。n

CSSだけでポップアップヘルプを実現する

2006年7月 5日 01:25

今回は、CSSのみを使ってポップアップヘルプを実現してみました。
どんなものかというと、特定の語句に説明をつける際、
ポイントしたときにヘルプ表示がポップアップで出てくるようなのを
見かけたことはありませんか?
あれを、javascriptを使わずに、しかも使い回しができるように
CSSで作成してみました。

サンプルはこちら↓
http://www.green.dti.ne.jp/edo/web-test/test10/

CSSはこちら↓
http://www.green.dti.ne.jp/edo/web-test/test10/index.css
↑サーバ解約したため、サンプルが消えてしまいました(;´д`)
時間をみて再アップします・・・。n

リンクテキストにアクセント(画像)をつける

2006年6月30日 20:01

リンクテキストにマウスオーバーで色を変化させたり、というのはよくあると思います。
それではなく、リンクテキストにちょっとした装飾を施しちゃいましょう。
例えば、リンク文字の横に矢印の画像を入れたりとか。n

Win IEで透過PNG画像を使う

2006年6月30日 13:44

さてさて、透過 PNG 画像。使えるととても便利で、デザインの幅も広がります。
しかし、Win IE では透過機能が使えないという大問題がっ。
(またおまえか! とか思いますねw)
まぁ IE7 になればちゃんと表示されるようになるみたいですが。n

しかしながら、Win IE でもなんとか見れる方法があります。
それが今回の記事の主題です(*'-')

CSSによる画像を使ったロールオーバー

2006年6月27日 00:07

CSSによる画像を使ったロールオーバーです。
すでに色々なところで言われていて、結構ポピュラーなことだと思いますが、
まぁ備忘録ってことでお付き合いくださいw

通りすがりさんに指摘されたので追記です。
ここで紹介しているテクニックは、「背景画像を使用した」テクニックです。
そのため、画像を OFF にして閲覧している人がいた場合、
通常の画像であれば、alt 属性に書かれている内容が表示されるため問題ありませんが、
このテクニックの場合、メニューになにも表示されなくなってしまうので注意が必要です。

新しく、これで決まり?な画像置換 - DKIR という記事を書きました。
こちらは "画像OFF、CSS ON でも問題ない" というメリットがあるのでオススメです。

CSSによる画像を使ったロールオーバー デモ

CSSによるポップアップメニュー

2006年6月23日 23:30

この後のエントリーで CSSのみでプルダウンメニューを作る を書き足しました。こちらではJavascriptを使わずにIE6を含めたすべてのブラウザでプルダウンメニュー(ポップアップメニュー)を実現しています。

Flash や JavaScript で実現されるポップアップメニューを CSS で実現するやり方を考えてみたり。
結局、IE にあわせると JavaScript を介さないといけなくなるんですが、いちおう Firefox でならば JavaScript を使わないで実現することはできました

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

簡単に解説すると、ひとつのボックス要素の中にポイントするとポップアップする部分のメニューを書きます。
それのボックス要素内にdisplay:noneをもつ要素(これがポップアップで出る部分)を書き、通常時には隠れるようにしておく。
そして最初に書いたメニュー部分(サンプルでは li 要素)に:hover擬似属性を設定する。(li:hover←これが IE だと使えないんですよねー)n

のように、:hover時にのみ block 要素になるように設定を追加します。
そうすることで、:hover時だけ姿を現す、まさにポップアップメニューになります。
とりあえず、今回は IE にも対応させようってことで JavaScript の onmouseover で上のli:hover divの部分の代用をしてます。n

IE7 で :hover が使えるようになるといいなぁ・・。n

FirefoxとIE双方に自然な影をつける

2006年6月21日 17:33

png 画像はアルファ値を保存できる画像形式で、影などの徐々に透明になっていくような画像を作るときにとても便利な画像だ。
が、これがまたIEのあほが認識しない。透明部分を白く表示するもんだから、違和感この上ないのだ。n

背景が一色など、決まったものであれば白くなる部分にその色を敷いて、擬似的にきれいな影を表現できるが、背景が写真や複雑なパターンなどだとそうはいかない。n

ボックスを固定すれば問題ないが、それでは柔軟性に欠ける。
そこで、IE とその他の CSS を振り分けることを利用して、別々の画像を読み込ませることでこれを実現してみた。n

また、IE には独自仕様で影をつけるフィルタがあったりする。n

やり方は簡単、まず振り分けようの CSS を書き、(ここらへんは情報溢れてるので割愛)
IE には影のついていない画像を読み込ませる。そして、そのボックスに影をつけるフィルターを適用する。n

そして IE 以外の、png 形式を正しく表示できるブラウザ用に、背景として png 画像を読み込ませる。
これで完成だ。n

まぁ IE7 は png 形式をサポートするみたいだからいらなくなるかもしれないけど、
ま、思いついちゃったからとりあえずのっけとくw
なんか不具合があったらコメントにでも残しておいてください(;´□`)

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