カテゴリー:2006年7月

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

2006年7月26日 12:51

CSSの運用・管理には毎回悩まされる。
案件ごとに違ってくるのはしょうがないとしても、
同じような内容でもそのときどきで「これがいい」と思うことが
自分の中でも違うのが問題だ(;´д`)
とまぁそんなこんなで少しだけガイドラインぽいものを
作ってみた。
とりあえずこれをたたき台にして、徐々に追加・修正を行って
ブラッシュアップしていこうと思っている。

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

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

2006年7月13日 16:16

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

サンプルはこちらです↓

http://www.green.dti.ne.jp/edo/web-test/test12/

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

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

2006年7月10日 16:19

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

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


スターハック

2006年7月10日 10:50

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

スター7・ハック

2006年7月 7日 16:33

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

ホーリー・ハック

2006年7月 7日 16:31

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

クラスを複数設定する。

2006年7月 6日 13:02

CSSのテクニックではないですがw
わりと使われてなかったり、本の紹介とかにないような気がしたので、書いてみました。
クラスを複数指定できることはわりと知られてないんですかね?
それとも、どこかで不具合があって使われてないとか…?
とりあえず、自分の検証できる環境で調べた所、問題が出たことはなかったので「不具合なんてない!」と思い込んだまま書きますw

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
↑サーバ解約したため、サンプルが消えてしまいました(;´д`)
時間をみて再アップします・・・。