ホーム > タグ > CSS

CSS

[mootools]ランダムスタイルシート

mootoolsでアクセスするたびにスタイルシートを変えるサンプル。
（ダウンロード時にRemoteのAssetsが必須）
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

読み込みが始まってからランダムを実行するので、スタイルが適用されるまで数秒のタイムラグが発生する。
レイアウトのスタイルをlinkしといて、このランダムで上書きするのが妥当かも。

PLAIN TEXT
JAVASCRIPT:
  1. window.addEvent('domready', function(){
  2. var style = ['style-a.css','css/style-b.css','css/style-c.css'];
  3. var src = style.getRandom();
  4. new Asset.css(src, {id: 'base'});
  5. });

アクセス初回だけという制限も出来ると思うが、そもそもCSSをランダムにする必要があるのかは疑問。
どうせやるならボタン切り替えの方がいいと思うが、どっちにしても押し付けがましい気がして個人的にはあまり好きではない。

[CSS]text-indent:-9999pxでリンクの点線が伸びてしまう件

text-indentをマイナスにした要素にアンカータグをつけた時、縦横サイズを指定していてもクリックしたときに表示される点線が伸びて表示される。

TEST

これはoverflow:hiddenを同時指定すれば回避出来る。

TEST

CSS Filters(for IE)

有名すぎるほど有名なIE用のCSSハックをいくつか。

参考サイト
CSS-only Filters Summary
centricle:css filters

Continue reading

[CSS]float解除ハックClearFix

親要素にfloatが使えない場合の解決策として使われる超有名ハック。
これ考えた人尊敬するわ。

このハックを使う主なケース。

  • margin:0 auto;で中央配置にしてるブロック要素の中でfloat指定するものを配置する
    （親要素にfloat指定することが出来ない状態）
  • liやdt、dlにfloatかけたから手っ取り早くクリアしたい
  • clear:bothとか置けない。もしくは置くのが面倒。置くと美しくない

大概は親要素にfloat指定するか、下にclear指定しとけばおｋだけど、たまにどちらも使えない場合がある。そんなときはこのハックを思い出すと幸せになれる。
使用するとIEで妙な隙間が出来る場合があるので注意。多分バグだろうけど。

Continue reading

[CSS]ユニバーサルセレクタ

XHTML+CSSコーディングする際なくてはならないもの。
CSSファイル作ったらとりあえず一番先頭に書いておくもの。
始まりに相応しいので最初はユニバーサルセレクタから。

ユニバーサルセレクタとはアスタリスクのことで、単独で使えばブラウザ表示エリア内の隙間(padding)や、h1、h2などの見出しタグについてるマージン(margin)など、ブラウザが独自に持ってるスタイルを全て消去出来る。

Continue reading

 Page 4 of 4 « 1  2  3  4 

Home > Tags > CSS

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
  • そしてこのSQLはわれながらよく書いたと思う 2010-11-15
  • CSVの列っていう方がいいのかな…118項目だった 2010-11-15
  • 楽天のCSVの項目が116個もあった衝撃 2010-11-15
  • オフィスで香水臭振りまくのは迷惑だと知れ 2010-11-15
  • ぐあー　フレグランステロやー 2010-11-15
  • More updates...

Powered by Twitter Tools

Tag Cloud
おすすめサーバー・他

メタ情報

Return to page top