2006年01月27日

[CSS]意外に知られていない(かもしれない)ポイント制による優先順位

最近CSSの見直しをして色々新しい発見をするので今日もエントリーします。 ID、class、属性名には個別のポイントが設定されていてその合計値が高いものから優先されていきます。

その件について詳しく書く前に基本のおさらい。 スタイルシートは下に書いてあるものほど優先されます。 普通は外部スタイルの読込を一番最初して、次にHEADの中にスタイルを書き、タグに直書きするので、
タグ内スタイル>HEAD内スタイル>外部スタイル
の順で優先されると思います。(今回はユーザースタイル、ブラウザスタイル、!importantについては一先ず置いておきます。)
今までは一番最後に読込んだスタイルが適用されるって思い込んでたのですが、どうもそうではないらしい。 いや、うすうすは感ずいていたんですよ、なんかID付の属性が優先されてるなぁーって。

はい、ここから本題です。
id 100ポイント
class 10ポイント
属性名 1ポイント
はい、本題終了。

こういう計算でなりたってます。例を書くとこんな感じ。


/*こっちの方が優先されます。*/
#left p.contents a{
  color:#F00;
  font-size:0.8em;
}

/*こっちは無視されます*/
#left p a{
  color:#aaa;
  font-size:2em;
}

以上です。そんだけです。 そろそろムーバブルタイプに引っ越そうかなぁ。

posted by 高速内弁慶 at 20:41| Comment(17) | TrackBack(3) | CSS | このブログの読者になる | 更新情報をチェックする

[CSS]クロスブラウザな半透明フィルタ

IEには独自拡張のCSSでフィルターが使えます。こいつは便利なやつで半透明化やらグラデーションやら色々出来るのですが、なんだかんだ言っても独自拡張。互換性がありません。
しかし、アルファ値に限って言えばは他のブラウザでも独自拡張にて実装されているのでクロスブラウザ化することが出来ます。(クロスブラウザってJavaScript以外でも呼んでよかったけ?)

[Internet Explorer対応]


0〜100の数字で制御します。0に近づくほど薄くなります。
MacIEだと確か動きません。


img{
  filter: alpha(opacity=20);
}

[Mozilla / FireFox / Netscape 対応]


0〜1の数字、または0〜100%で制御します。0に近づくほど薄くなります。
こちらは最新版のMozilla FireFox Netscapeで動作します。
-moz-opacityはMozillaが実験的に実装している独自拡張です。いつ廃止されるかわからないので使用は推奨されていません。


img{
  -moz-opacity:0.2;
}

[Safari 対応]


サファリはこれで半透明になるらしいです。Macもってないからよく分かりません。


img{
  opacity:0.2;
}

[Internet Explorer / Mozilla / FireFox / Netscape / Safari 対応]


この3つのCSSを同時に記述するとOpera以外の主要ブラウザで半透明化出来ます。
そうです。Operaでは無理なんです。アハハ・・・。


img{
  filter: alpha(opacity=20);
  -moz-opacity:0.2;
  opacity:0.2;
}

結局今回も、非推奨要素だったりOperaだと無理だったりあまり役に立たない内容でした。おしまい。
となりの部屋の住人がうるさくて眠れない。さっきから何度も壁殴ってるのに電話のケンカ声が止まらない。
ひさしぶに大家さんに電話するか。

続きを読む
posted by 高速内弁慶 at 00:02| Comment(44) | TrackBack(4) | CSS | このブログの読者になる | 更新情報をチェックする

2006年01月26日

[CSS]タグにclassは複数設定できるらしい。

知ってる人には当たり前の事かも知れないけど、知らなかったので「へぇ〜」って思った。だからエントリーしてみる。

classは半角スペースで区切る事により複数設定できる、具体的に書くと「class="p1 p2 p3"」とこんな感じ。スタイル内のセレクタをカンマ区切りで複数指定してグループ化はよく使ってるけど、これは使った事なかった。
今の所、特に使う予定はないけど。

posted by 高速内弁慶 at 23:24| Comment(19) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2005年10月26日

[ネタ]CSSのみでドット絵

dotcat.gif

対応ブラウザ: IE6.0 / NN7.0 / Mozilla / FF / Opera8 / 他は知らん

今日紹介するサンプルは恐らく一生使うことの無い、何の役にも立たない、どうしようもない、CSSを使ったサンプルです。
その名も「ドット絵CSS」
CSSのみでドット絵を描く事が出来る一見優れものような気がするサンプルです。
本当は何の役にも立たないゴミです。
作った画像を保存できないなんて当たり前。
自分でPrintScreenしてください。
一度描いたら修正不可!男なら一発勝負です。
操作性?レスポンス?そんなの知りません。
ってぐらい使えないものです。
あえてCSSのみでやる所にロマンを感じてください。
サーバーに負担が掛かるのでサンプルはダウンロードしてローカルで試してください。

サンプル

アップロード前にウイルスチェック済みですが、念のためダンロード後ウイルスチェックをする事をお勧めします。

解説

ソース見れば分かります。visitedの色を変えてるだけです。

posted by 高速内弁慶 at 23:17| Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2005年10月24日

CSSのみで折りたたみナビゲーションっぽいリンク


対応ブラウザ: IE6.0 / NN7.0 / Mozilla / FF / Opera8 / 他は知らん

ツッコミいただいたのでpタグをspanタグに直しました。
改めてDTDでの要素の定義をみたらAタグの中にブロック要素は入れたら駄目となってました。
ありがとうございました。
spanタグにしたのでスタイルはずした時用にbrタグを書いてdisplay:none;で内消しときました。
適当にbrタグにスタイル掛けてみたんですが、brタグってスタイル効くんですね。
普段あんまし使う事ないと思うけど。


手抜きサンプルの日でちょこっと紹介したCSSのhoverを使って遊んでたやつです。
リンクって「link visited hover active」をきちんと定義しないといけなかったような、どうでも良かったような。
例によって適当に書いてる所もあるので、ある程度は脳内補完してください。

サンプル

スタイルなし


CSS適用

続きを読む
posted by 高速内弁慶 at 23:27| Comment(66) | TrackBack(1) | CSS | このブログの読者になる | 更新情報をチェックする

2005年10月06日

FLASHに頼らないCSSで出来る伸びるグラフ

対応ブラウザ: IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8 / Safari

CSSのみで伸びるグラフを実現します。とは言ってもCSSのみでは動的に数値を変更する事は出来ないので、他にサーバーサイドスクリプトと連動させる必要がありますがFlashに頼らず動的にグラフの長さを変更することが出来ます。
アンケートフォームの結果や、ヒットカウンタなどと連動すれば面白いものが出来るかもしれません。


サンプル

今ココだよ!

続きを読む
posted by 高速内弁慶 at 18:30| Comment(223) | TrackBack(1) | CSS | このブログの読者になる | 更新情報をチェックする

2005年10月04日

ブラウザ別CSSハック一覧表

どうやら、CSSハックネタはウケが良いようなんで、CSSハック一覧表作ってみました。
途中で眠くて力尽きてます・・・続きはまた今度 (現在随時続きを追加しています。)

2005年10月現在使用可能CSSハック

複合技CSSハックは一つでもブラウザがバージョンアップすると使えなくなる可能性があります。
また、理論上は可能というだけなので、適用されない場合もあるかもしれません。ご了承ください。
ここまでするぐらいならブラウザ別にCSSを外部読み込みさせた方が良い気もします。
注:全部自分で確認したわけじゃありません。(Mac持ってません)使用する前にご自分の環境で必ず確認してください。

用途別CSSハック一覧表
CSSハック 対応ブラウザ 対応ブラウザのみ適用
(color:黒→赤を適用)
対応ブラウザ以外適用
(color:黒→赤を適用)
    対応ブラウザのみ適用 対応ブラウザ以外適用
通常 CSS対応ブラウザ
p {
  color: #F00;
}
スターハック WinIE4.0〜6.0
MacIE4.0〜5.2
* html p {
  color: #F00;
}
p{
  color: #F00;
}
* html p {
  color: #000;
}
アンダースコアハック WinIE4.0〜6.0
p{
  _color: #F00;
}
p{
  color: #F00;
  _color: #000;
}
バックスラッシュハック MacIE5.0〜5.2
p {
  color: #F00;
  /*\*/ color:#000; /* */
}
p {
  /*\*/ color: #F00; /* */
}
Caioハック NN4
p {
  color: #F00;
  /*/*/ color: #000;/* */
}
p {
  /*/*/ color: #F00;/* */
}
ハッシュハック WinIE4〜6
MacIE5.0〜5.2
Opera7
Mozilla
Firefox
p{
  #color: #F00;
}
p{
  color: #F00;
#color: #000; }
スター7ハック WinIE5.5〜6.0
MacIE5.0〜5.2
Safari
html*p {
  color: #F00;
}
p {
  color: #F00;
}
html * p1 {
  color: #000;
}
Fbriceインバージョン NN4
Opera4〜5
p{
  /*/*//*/
  color:#F00;
  /* */
}
p{
  color:#F00;
}
p{
  /*/*//*/
  color:#000;
  /* */
}
:root擬似クラス MacIE5.0〜5.2
Mozilla
FireFox
Safari
:root p{
color:#F00;
}
p{
color:#F00;
}
:root p{
color:#000;
}
xmlns属性 Mozilla
FireFox
Opera7.5〜
Safari
html[xmls] p{
color:#f00;
}
p{
color:#F00;
}
html[xmls] p{
color:#000;
}
名称不明
(プロパティ名の前に全角スペース)
WinIE4〜6
WinOpera8
p{
 color:#f00;
}
p{
color:#F00;
}
p{
 color:#000;
}
複合CSSハック
スターハック
スター7ハック
Safari
html*p {
  color: #F00;
}
* html p {
  color: #000;
}
p {
  color: #F00;
}
html*p {
  color: #000;
}
* html p {
  color: #F00;
}
続きを読む
posted by 高速内弁慶 at 00:26| Comment(125) | TrackBack(258) | CSS | このブログの読者になる | 更新情報をチェックする

2005年09月15日

ふせんバナー風リンク

label.gif

対応ブラウザ: IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8(*1)

CSSを使った小ネタ。"aタグ"にスタイルをつけて、ふせん風にしてみました。
画像は一切使わないで作るというコンセプトで"aタグ"をブロック化してから右ボーダーを太くしてhover属性などで色を変えています。
*1 [Operaではvisited が効きません]


サンプル

ふせん風バナーリンク


ソース

<style type="text/css">
a{
	display:block;
	width:150px;
	height:40px;
	font-size:0.8em;
	color:#666;
	line-height:39px;
	text-decoration:none;
	background-color:#fafafa;
	margin:10px;
	padding-left:10px;
	border:1px #999 solid;
	border-left:10px #666 solid;
}
a:link    {border-left-color:#999;}
a:visited {border-left-color:#009;background-color:#fff;}
a:hover   {border-left-color:#900;}
</style>
posted by 高速内弁慶 at 21:59| Comment(41) | TrackBack(1) | CSS | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。