Lucky bag::blog: ピュア CSS なプレゼン用スライドショー
前回の「CSS3 の target 疑似クラスで脚注を動的に表示する」に引き続き、:target 疑似クラスを使ってスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。ピュア CSS とか言いつつも、前回同様、:target 疑似クラスに未対応な IE でも動くように JavaScript を使っている。純粋に CSS のみで動くのは、Firefox、Safari あたり。Opera は動かない。 ピュアCSS なプレゼン用スライドショー サンプル <div id="section-01" class="section"> <!-- 1ページ目 --> … </div> <div id="section-02" class="section"> <!-- 2ページ目 --> … </div> <div id="section-0
CSS の可読性を高めるためのアイデア - lucky bag
CSS の可読性を高めるためのアイデアってのは人それぞれ色々とあるんだろうけど、最近つらつらとその辺のアーティクルを見て廻った中で特に取り入れてみようかなと思わされたのが、入れ子の状態をブロック単位でインデントして分かりやすくしておくって方法かなぁ。例えば、下記のような感じ。 /*----ラッパー----*/ #wrapper { } /*----ヘッダー----*/ #head { } /*----ナビゲーション----*/ #nav { } #nav ul { } /*----ナビゲーション END----*/ /*----ヘッダー END----*/ /*----ラッパー END----*/ (X)HTML だけじゃなく、CSS の方でも入れ子の状態を視覚的に分かりやすくするためにインデントさせるってのは意外と思いつかなかった。そうか、ブロック単位だけじゃなくて、ブロック内での階層を
Google をカスタマイズできる Firefox の機能拡張 - lucky bag
Google の検索画面を見ない日は無いってのは、ちと大げさかも知れないけど、それだけ Google の使用頻度は高い。Firefox では Greasemonkey を使って Google を Remix ってのがあるけど、Greasemonkey を使いたくない人は CustomizeGoogle と言う機能拡張をインストールしたら、少し幸せになれるかも知れない。 CustomizeGoogle は Firefox の拡張機能です。この拡張機能は Google の検索結果に他の情報 (Yahoo, Ask Jeeves, MSN 等のリンク) を追加し、余計な情報 (広告やスパム) を取り除くことが可能です。これらの機能はすべてあなたの任意で使用できます。 CustomizeGoogle をインストールすることで、下記のような事が設定できる。（もちろん、これが全てではない） 通常Goo
unicode-bidiでメアドを変換 - lucky bag
CSS の unicode-bidi プロパティを使ったアイデア。つか、良く思いついたなって感じ。 ネタ元 「 Stu Nicholls | Cutting Edge CSS | Hiding email address 」 文字コードの Unicode では、日本語であれば左から右へ、アラビア語であれば右から左へと言う風に言語により文字方向の表記が決められています。 unicode-bidi プロパティを使えば、これを変える事が出来ます。ネタ元では、これをメールアドレスに適応して、ソース上は逆方向に記述し、CSSの unicode-bidi プロパティによって、見栄えを正しく見せています。ロボットからのメールアドレス収集を防げるかも知れませんね。 メールアドレス： moc.gab-ykcul@ofni 上記の(X)HTMLソースコードは下記のようになっています。 <address> メー
Lucky bag::blog: IE でも擬似的に子供セレクタ
ある要素の直接の子要素に対してだけ CSS で指定をしたい場合、子供セレクタ div > p が便利。しかし、IE がこれに対応していなくて残念って感じだったんだけど、meyer 氏が IE でも擬似的に直接の子要素を指定できる方法を発見した模様。 Eric's Archived Thoughts: Universal Child Replacement 例えば、下記の (X)HTML があったとして、id="content" の子要素の段落だけ背景色を #ff8800 に変えたいって場合。 <div id="content"> <p>content の直接子供要素の段落。ここだけ背景色を変えたい。</p> <div id="foo"> <p>この段落は色は変えたくない。</p> <p>この段落は色は変えたくない。</p> </div> </div> 子供セレクタに対応しているブラウザであ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
