Lucky bag::blog: CSS アーカイブ

カテゴリー別アーカイブ CSS

長い子孫セレクタをインデントする

この記事が属するカテゴリー: CSS

子孫セレクタをうまく使うことで、スタイルのためだけに ID やクラスを付与することなんかを避けることが出来るわけだけど、状況によっては深い階層の要素を指定するために子孫セレクタがとんでもなく長くなる場合がある。例えば、最近見た他人が書いたコードで一番長かった子孫セレクタなんかは、こんな感じ。

#content-body div.collapsing-block.pseudo-collapsed .collapsing-btns .toggle-collapse {
  property: value;
}

基本的に、セレクタ内には空白文字を挿入することが可能なんだけど、改行やインデントも空白文字のひとつに含まれる。そこで、長いセレクタに改行、インデントをうまく使うことで、視認性を高めることができるかもよってのが今回のアイデア。上記の長い子孫セレクタに改行・インデントを取り入れてみると、こんな感じ。

#content-body
  div.collapsing-block.pseudo-collapsed
    .collapsing-btns
      .toggle-collapse {
  property: value;
}

キモイっちゃ、キモイ書き方だけど、階層構造も分かるし、主体となる要素（子孫セレクタの一番最後のセレクタ）も一目で分かるし、意外と視認性が高いと思ってるんだけど、意外とこんな書き方をしている人っていない。あまりにも長いと感じる子孫セレクタは、こうやって書いてみると良いかもしれないよ :)

これは去年、某雑誌にも寄稿したことがあるネタなんだけど、リハビリ代わりに書いてみた。今年はもうちょっとここを更新していきたいなあと思っている次第。

2008-01-10T01:47:52+09:00 | コメント (3) | トラックバック (0) |

CSS による段組レイアウトを実現するには、float プロパティか position プロパティのどちらかを使った方法を選択することになると思うのだけれども、 float 派の自分としては position を使った方法の利点・欠点を知っておかなければと思ったんで、float で作ったのと同じように position でも段組レイアウトを作ったみた。せっかくだから、それらレイアウトをまとめた CSS フレームワークを公開します。

CSS による段組レイアウト

ちなみに、各レイアウトの詳細な説明はありません。それについては、いつか何かで解説します。また、このフレームワークは自由に使って頂いて構いませんが、それによって生じる問題についてのサポートは行いません。

ただし、こういう状況では崩れるよという報告や、逆にこうすると良いよというアドバイスが頂けるのであれば、ぜひお願いします。という非常に調子の良いたくらみ。わはは

サンプルの文書構造

一応、2 カラムと 3 カラムを用意。それぞれの文書構造は以下のような感じで、どちらもメインコンテンツが先に来るような構造。

<body>
<div class="container">
  <div id="head">…</div>
  <div class="content">
    <div id="mainContent">
      <div class="section">…</div>
    </div>
    <div id="subContent">
      <div class="section">…</div>
    </div>
  </div>
  <div id="foot">…</div>
</div>
</body>

3 カラムの方は、サブの後にエクストラを追加しただけ。

<body>
<div class="container">
  <div id="head">…</div>
  <div class="content">
    <div id="mainContent">
      <div class="section">…</div>
    </div>
    <div id="subContent">
      <div class="section">…</div>
    </div>
    <div id="extraContent">
      <div class="section">…</div>
    </div>
  </div>
  <div id="foot">…</div>
</div>
</body>

div 多くね？とか container ってｗワロスｗｗｗ、とかは心の内に秘めておいてください。ちなみに、ターゲットとしているのは IE 6 以降のモダンブラウザあたり。

position を使った際の問題点

可変幅で position 使って段組レイアウトした場合、ポジショニングした要素が通常フローから外れているために、フッタ部分とポジショニングされた要素が重なってしまう場合がある。この辺は、「floatとpositionの使い分け」を参照。なので、フッタ部分の幅をメインと同じにしてサイド部分まで伸びないようにしたパターンも追加しておいた。

あと、レイアウトが崩れる訳ではないのだけれども、Mac IE では position を使ったパターンが、ウィンドウ幅によっては無駄なマージンが右側に発生して横スクロールバーが出てしまうかもしれない。まあ、それはマック IE のバグなのだけれども、可変幅・固定幅ともに発生するんでちと微妙。バグの詳細はMac版 Internet Explorer 5 の CSS バグと回避方法日本語訳の「隠れた margin」あたりで。

その他のレイアウト

今後、時間があればレイアウトのパターンを追加していきます。メインとサブが共に可変幅のものとか、カラム数を増やしたものとか、エラスティックレイアウトとか。あくまで予定は未定ですけれども。

2007-08-03T12:51:11+09:00 | コメント (4) | トラックバック (2) |

CSS が valid でなければいけない理由って何ですか？

この記事が属するカテゴリー: CSS

って質問されたら、これだ！っていう答えが思いつかない。valid ではない CSS ってのは、単純な記述ミスとかではなくて、例えば Safari の複数背景画像や Opera の opacity なんかの先行実装、もしくは -moz 系などの独自実装を使うことで invalid となっているケース。

(X)HTML で invalid だと、パーサが処理出来ないとか内容が表示されないとかクリティカルな issue が発生するかもしれないけれど、CSS では意図して invalid なコードを書くケースってのがあると思う。それが良いか悪いかは別にしてね。

んで、タイトルの問い。仕様に沿った記述をすべきっていう真っ当な回答があるんだろうけど、なんかこう膝を打つような回答って何だろ。あなたが書く CSS は valid ですか？ valid であろうと心がけていますか？そうあるべき理由って何ですか？

2007-06-08T00:06:21+09:00 | コメント (7) | トラックバック (5) |

俗に言う clearfix と言われるコードのバリエーション色々

この記事が属するカテゴリー: CSS

clearfix ネタに乗っかってみる。

.clearfix:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}
.clearfix {
  _height: 1px;
  min-height: 1px;
  /*￥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる部分の規則集合はほぼ一緒だったりする。だけど、その後（上記コードの強調部分）ってのは結構色々とバリエーションがあったりするんで、自分が知っているパターンをいくつか紹介してみる。

それぞれの説明やどれが良いとかは省略。そのコードを説明しているサイトにリンクしておくんで、興味があるようでしたらそちらを参照してください。ちなみにリンクしたそのサイトがそのコードの orgin ではないかもしれません。以下の全てのコードは :after 擬似要素使って content 生成する規則集合部分は省略（つまり、上記コードの強調部分のみという事です）。あと、あくまで便宜上セレクタを .clearfix としているけど、使う場合は対象セレクタに適宜置き換えて適用させるのが吉。

xmlns 属性を使ったパターン

属性セレクタを使って IE6 以下に display:block 読み込ませないようにしている。

CSS clearfix

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

IE7 向けハックを使ったパターン

*:first-child+html が IE7 しか読み込まないことを利用している

ClearFix - CSS - Snipplr


/* WinIE7 only */
*:first-child+html .clearfix{
  height:1%;
}

/* WinIE6 and below */
/*\*/
* html .clearfix{
  height:1%;
}
/**/

/* MacIE only */
/*\*//*/
.clearfix{
  display:inline-table;
}
/**/

inline-table を使ったパターン

inline-table の指定はマック IE 向け。ひとつ前のやつは inline-table をマックにのみ読み込ませているけど、こっちは逆で最初に inline-table の指定を読み込ませて、その後にマック以外に block としている。

IE7 display fix | drupal.org

.clearfix {
  display: inline-table;
  min-height:1%;
 }
/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
 }
.clearfix {
  display: block;
 }
/* End hide from IE-mac *//

zoom を使ったパターン

ちょっと番外っぽいけど、IE 向けに zoom プロパティを利用する。valid じゃなくなるんで、それが嫌ならコンディショナルコメントとかで別にリンクした方が良いかもしれない。

Clearing floats without structural markup in IE7 | And all that Malarkey

.clearfix {
  zoom: 1
}

いくつか書き出してみて気づいたけど、結構きりがない。とりあえずここまで。

2007-05-27T01:39:02+09:00 | コメント (1) | トラックバック (1) |

こんなセレクタが CSS にあれば便利なのにと思うセレクタ

この記事が属するカテゴリー: CSS

CSS を書いていると、こんなセレクタがあれば便利なのになぁと思うものがある。例えば、 F 要素を含む E 要素にマッチさせるセレクタ。img 要素を含む li 要素は list-style-type: none; みたいな。そんなセレクタをオレオレ仕様で無駄に考えてみる。

F 要素を含む E 要素ってのを結合子を使った文脈セレクタ系で実装しようとすると、子供セレクタを逆にして E < F とか。さしずめ親セレクタってな感じか。

li < img {
  list-style-type: none;
}

あー、これは無いな。子供セレクタと区別しにくいし、対象要素が宣言ブロック {…} の直前ではなくて遡るってのは何となくカスケーディングという思想に反するかな。

そうなると擬似クラス系か。CSS3 のセレクタで、最新版の草案では無くなっちゃったんだけど、ひとつ前の版には内容擬似クラス（Content pseudo-class）ってのがあった。:contains("foo") という形で、引用符で囲っている引数は内包している文字列が対象となっていた。テキスト内に foo が含まれる場合にマッチするってな具合。これをもとに要素なんかを引数に使えるようにしてみるとか。

li:contains(img) {
  list-style-type: none;
}

お、これなら良いかも。どうでしょ。とか妄想する日曜の夜。

2007-04-22T21:52:37+09:00 | コメント (4) | トラックバック (1) |

web creators 5月号の記事をちょこっと書いた

この記事が属するカテゴリー: CSS Misc

web creators 5月号の巻頭特集「プロパティ別スタイルシートデザイン帖」にちょこっとだけ書いた。ほんとにちょっとだけなんで、相当探さないと分かんないかもしれないけど。今後も機会があれば書かせて頂く予定です。

んで、せっかくだから記事で使ったサンプルを公開しておく。なんだかさっぱり分からないかもしれないけど、そんな人は web creators 5月号を読んでください。そんで、もっと色々と勉強したいと思ったら、拙著「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」を買うといいと思います（ぉ

「プロパティ別スタイルシートデザイン帖」で使ったサンプル

2007-03-29T22:17:53+09:00 | コメント (0) | トラックバック (1) |

固定幅ベースの elastic レイアウトサンプル

この記事が属するカテゴリー: CSS

elastic レイアウトと言っても、固定幅ベースか可変幅ベース（とは言っても min、max-width による半固定だけど）のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。

文字サイズの変更に追随する elastic レイアウト

作ったのは 600px（640×480向け）、780px（800×600向け）、960px（1024×768向け）の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比 1:1.618 で区切っているのには特に理由はない。

幅の指定を em で指定しているんだけど、この値はブラウザのデフォルトフォントサイズを 16px と想定しているんで、ここら辺を変更している場合の幅は当然だけど変わってしまう。それと、サイズ変更した際に値の丸めが発生するんで、微妙に値を小さく指定していたりする。サイズ変更時にブラウザによってはカラム落ちする箇所があるかもしれない。いや、ないかもしれない。

elastic レイアウト関連

つか、そもそも elasticレイアウトって何？って方は、goya さんや aratako0 さんの記事が分かりやすいかと。

また、Elastic layouts ― Tyssen Design では、elastic レイアウトを採用しているサイトがいくつか紹介されているんで見てみると良いかもしれない。ちなみに、そのサイトも elastic レイアウト。

2007-03-12T21:16:07+09:00 | コメント (0) | トラックバック (0) |

重い画像を読み込む際のインジケータをCSSで表示

この記事が属するカテゴリー: CSS

えっ、当然ブロードバンドっすよ、何か？みたいな世の中なんで、果たしてどれくらい効果があるのか分からないのかも知れないんだけれども、ちょっとばかし重たい画像があったとして、その画像の読み込み中に味気ない空白を見つめているよりは、読み込み中を表すインジケータのアニメーション GIF を用意して img 要素の背景画像に指定しておけばナローバンドな環境にも配慮できるでしょ？（超意訳）みたいな小技が maratz.com » archive » Image Preloader で大分前に紹介されてたのを見つけたんでやってみた。

重い画像を読み込む際のインジケータをCSSで表示のサンプル

img {
  display: block;
  background: #fff url(progressbar_long.gif) center center no-repeat;
}

全然、分かんね。Ctrl+F5 とか連打しても、なんか動いてないような気が。

背景画像に指定しているアニメーション GIF: AJAX Activity Indicators から拝借

2007-01-27T17:05:40+09:00 | コメント (6) | トラックバック (0) |

ピュア CSS なプレゼン用スライドショー

この記事が属するカテゴリー: 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-03" class="section"> <!-- 3ページ目  -->
…
</div>

div.section 単位でひとつのスライドとして、それに対して :target 疑似クラスを使って、表示・非表示をコントロール。ターゲットされた div.section はブロック化され、z-index によって前面のレイヤーに配置される。

div.section {
  display: none;
}

div.sftarget, /* for IE */
div:target {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

即席で作ったんで構造的に再考する必要がありそうだけど、作り込めばそれなりに使えそうなものになるかも。tabindex や accesskey あたりをうまく使えば、キーボード操作だけでページ遷移できるかな。

2006-11-03T00:09:09+09:00 | コメント (4) | トラックバック (1) |

CSS3 の target 疑似クラスで脚注を動的に表示する

この記事が属するカテゴリー: CSS

文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。

Selectors 6.6.2. The target pseudo-class :target

そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target | HTML Dog の JavaScript を利用している。（Opera はダメっぽい、教えてエロイ人！）

<p>文章…<a href="#">アンカー</a>…</p>
<ol>
<li>脚注内容</li>
</ol>

とりあえず、普通にハイライト表示させるだけでも、どこに飛んだのか分かりやすくなる。

脚注をハイライトさせるだけのサンプル

ハイライトさせるだけではつまらないんで、ol 要素でマークアップした脚注内容を非表示にしておき、脚注へのリンクをクリックすることで、脚注がウィンドウ内右上に表示させるようにしてみた。表示した脚注を閉じるには、脚注内の[脚注元へ]をクリック。

脚注を動的に表示させるサンプル

/* 脚注を非表示 */
ol.note li {
  display: none;
}

/* ターゲットされた際に画面右上に表示 */
ol.note li:target {
  border: 3px dotted #888;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  width: 15em;
  background-color: #f0fff0;
}

これをもとにユーザースタイルシート作って「はてなダイアリー」とかの脚注をコントロールしちゃうぞーとか思ったら、はてなの場合は、ターゲットとなる要素が脚注自体ではなく、脚注番号だった。もう全然無理。

2006-10-29T00:42:59+09:00 | コメント (5) | トラックバック (2) |

使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite

この記事が属するカテゴリー: CSS

タイトル長っ！まぁ、そのまんまなのだけれども、今使用しているブラウザが、CSSのセレクタ（CSS3も含む）にどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利っぽい。

Start testing... をクリックでチェックが開始され、各セレクタの結果が緑色であれば対応、赤色であれば未対応ってな寸法。ただ、ひとつのセレクタに複数のテストを行うんで、そのうちのひとつでも引っかかると failed になっちゃう。

未対応の例

上記画面は、IE7 RC1 でのチェック結果だけど、対応しているはずの属性セレクタで failed となる。セレクタ名の部分をクリックすると、どういったテストが行われて、結果がどうなっているのかソースを確認できるんだけど、どうやら属性が空の場合や属性の記述が不完全の場に、IE7 はうまくパースできないみたい。ちなみに Firefox だと問題ない。

ってな感じで、セレクタの対応表みたいなんをいちいち見るよりも細かいことが分かるんで、これは素晴らしいデス。

2006-10-11T00:10:36+09:00 | コメント (0) | トラックバック (4) |

背景画像に使える透過 GIF

この記事が属するカテゴリー: CSS

斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた！

使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。

あと、Photoshop で開いてパターンに登録しておくのも良いかも。

2006-09-05T20:47:51+09:00 | コメント (8) | トラックバック (3) |

個人的に気に入ってるユーザースタイルシート

この記事が属するカテゴリー: CSS

今んとこ、ガチで不動のレギュラーメンバーな自分のユーザースタイルシートを晒してみる。userstyles.org で見つけたやつとか、自分で書いたやつとか。ちなみに、ユーザースタイルシートの管理は　Firefox の拡張 Stylish で。

livedoor Reader 用

各記事タイトルの下にある"元記事"って部分を URI に置き換えて表示

@-moz-document domain("reader.livedoor.com") {
  div.item_info {
    text-indent: -3em;
  }
  div.item_info a {
    visibility: hidden;
  }
  div.item_info a::after {
    visibility: visible;
    content: attr(href);
   }
}

Gmail 用

迷惑メールの未読数を見えなくしてボールドを解除する

Gmail - hide bold spam count | userstyles.org

@-moz-document url-prefix(https://mail.google.com),
               url-prefix(http://mail.google.com) {
  #ds_spam b {
    visibility: hidden;
  }
  #ds_spam b::before {
    content: "迷惑メール";
    visibility: visible;
    font-weight: normal;
  }
}

ラベルを目立たせる

GMail Label Names Bold | userstyles.org

@-moz-document domain(mail.google.com) {
  .ct {
    color: blue !important;
    font-family: verdana;
    font-size: 9pt !important;
    font-weight: bold !important;
  }
}

広告を非表示にする

@-moz-document domain("mail.google.com") {
  .rh {
    display: none;
  }
}

del.icio.us 用

ブックマークのポスト時間を表示

@-moz-document domain("del.icio.us") {
  span.date[title]::after {
    content: attr(title);
    padding-left: 1em;
    color: #555;
  }
}

タグクラウドを見やすくする

del.icio.us nicer tagcloud | userstyles.org

@-moz-document domain("del.icio.us") {
  #delicious .bundles .one {
    font-size: 75% !important;
  }
  #delicious .bundles .ten {
    font-size: 140% !important;
  }
}

他にも、はてなとか check*pad 向けにいくつかあるんだけど、ほとんどが広告を消すやつだったりするんで自粛 ;-P

2006-08-07T23:38:38+09:00 | コメント (2) | トラックバック (2) |

グリッドレイアウトのための背景画像

この記事が属するカテゴリー: CSS web&blog

ウェブページをグリッドレイアウトするのであれば、あらかじめ CSS で背景画像にルーラーみたいな画像を指定しておけば制作時に便利じゃね？ってアイデア。

つうことで、自分が使いやすいと思う方眼画像をちゃちゃっと作ってみた。

gif画像（ご自由にどうぞ）: grid.gif (GIF 画像, 200x200 px)
実際に適用してみたサンプル: グリッドレイアウトのための背景画像のサンプル

ルーラーの最小単位は 5px で、それより若干濃い線が 10px 、さらに濃い線が 50px、んでもって薄いグレーの背景が 100px 単位って具合。カチッとしたレイアウトをしたいんであれば、確かにこのアイデアは良いかもね。

2006-07-19T17:05:31+09:00 | コメント (3) | トラックバック (3) |

カラー関連の情報を CSS 内に記述

この記事が属するカテゴリー: CSS

CSS ファイル内に Color Glossary を記述しておくってのは、複数人で CSS を管理する際はもちろん、自分にとっても明快なんで、とても良いアイデアだと思う。

Garrett Dimon / CSS Maintenance Tip: Use a Color Glossary

Glossary をもとに CSS ファイル内を検索・置換で色の変更なんかも簡単にできるし、メンテナンス性が高まるのは言うまでもない。こういった記述は、自分（またはグループ）が分かりやすいように関連づけて明記しておくのが良いと思う。例えば、ヘッダの色とか、見出しの色とかのパーツ単位でも構わないんじゃないかと。

んでもって、ウチの場合はちょっと拡張して、CSS 内に下記のようにカラーネーム、Hex 値と RGB 値の記述をしている。

/*================ColorScheme================*/
/*                                                                                         */
/*  MainColor => honeydew3 = #C1CDC1 = rgb(193,205,193)   */
/*  SubColor =>  honeydew4 = #838B83 = rgb(131,139,131)   */
/*  BalanceColor => honeydew  = #F0FFF0 = rgb(240,255,240) */
/*                                                                                        */
/*================ColorScheme-END============*/

部分的にデザイン変更で Photoshop 使って材料を作ろうってときでも、上記情報があれば「あの色はなんだっけ？」なんて悩むこともない。もちろん、色情報以外にも、目次を作っておくとか、入れ子の階層構造を明示しておくとか、ちょっとした事だけどやっておくと楽になるって事は結構ある。色々と試行錯誤して自分なりの工夫を探してみると、あとあと助かるかも知れない。

2006-06-20T19:33:09+09:00 | コメント (5) | トラックバック (4) |

IE7 を含むモダンブラウザ向けの CSS ハックまとめ

この記事が属するカテゴリー: CSS

Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。

バージョン 6 以下の IE
IE7
それ以外のモダンブラウザ（Safari、Opera、Firefox）

ブラウザごとのハック

全てのサンプルは body 要素を指定の対象としている。

バージョン 6 以下の IE にのみ適用: * html body; サンプルページ
バージョン 7 の IE にのみ適用: *+html body; サンプルページ
バージョン 7 を含む全ての IE にのみ適用: *+html body, * html body; サンプルページ
IE7 を含むモダンブラウザにのみ適用（バージョン 6 以下の IE を除外）: html>body; サンプルページ
IE7 を除くモダンブラウザにのみ適用: html>/**/body; サンプルページ

ちなみに、上記 IE7 向けのハックは、あくまで beta2 でのものなんで、正式版では使えなくなっている可能性もある。分からないけど。

その他、ブラウザ振り分けに使えそうなハック

対象要素に属性があれば、属性セレクタを使ったハックなんかも使える。例えば、下記のような要素を対象としてみる。

<p class="foo" id="bar">...</p>

IE6 以下を弾きたければ、CSS3 の属性セレクタを使って p[id$="bar"]{...} とすれば良いかもしれない。さらに IE7 も弾きたければ、否定擬似クラスを使って p[id$="bar"]:not([class="hoge"]){...} とか。ただ、これだと Opera9 も弾かれちゃうんで、CSS3 の Media Queries 使って @media screen and (min-width: 0) {p[id$="bar"]{...}} って感じで上書きさせれば大丈夫。

2006-06-11T00:07:58+09:00 | コメント (9) | トラックバック (17) |

CSS3 の否定疑似クラスの使いどころ

この記事が属するカテゴリー: CSS

CSS3 の否定疑似クラス :not() って、使う機会があまり無さそうとか思ってたんだけど、Bite Size Standards で属性セレクタと組み合わせた使用例が紹介されてて、なんかそのピンポイントで指定できてる感がクール！つうか、そうか、そういう使い方かぁ。

input[type="text"]:not([size]) { 
    width: 15em;
}

上記コードを解説すると、type="text" な input 要素で size 属性が指定されていないものは width: 15em; ってことになる。うーん、これをユーザスクリプトで指定しておくのも良いかも。size が指定されてなくて入力欄の幅が狭いのって意外とストレス感じるし。

自サイトでも、クラスや ID をわざわざ付与してなくても否定疑似クラス使って指定できるもんって他にもありそう。例えば、(X)HTML の方で width や height を指定していない img 要素に対して、 img :not([width]):not([height]) で一括して統一した width と height を CSS の方で指定するとか。

そんな事をボンヤリと考えていたんだけど、それほど面白いアイデアが浮かばなかった。なんか、他に「これは！」って使い方ないかな。

参考

2006-05-04T18:00:18+09:00 | コメント (2) | トラックバック (0) |

Validator は完璧じゃない

この記事が属するカテゴリー: CSS web&blog

(X)HTML や CSS やフィードなどが、仕様に準拠しているかチェックしてくれる Validator がいくつかある。こういったチェックツールってのはケアレスミスなんかを発見するのにスンゲェ便利なわけだけど、盲目的にチェック結果を信じてしまうのはよろしくない。

例えば、一個前のコメントで書いたけど、CSS Validator にもバグがある。単位なしの整数値を line-height の値に指定するとエラーを吐く。line-height: 1.0; などと小数点付きの実数値で指定するとエラーを回避できるんだけど、小数点なしの整数値でも Valid 。仕様書を見ても、小数点なしの整数値は不正だなんて書いちゃいない。

Firefox の拡張「Html Validator for Firefox and Mozilla」でも、ins 要素にブロック要素を内包させてるとNotice: inserting implicit <...> なんて警告されちゃう。ins 要素は完全にインライン要素なのかって勘違いしちゃったりする人がいるかも知れない。（関係ないけど、木達さんがやりたいって言ってたこの拡張の日本語訳を密かに期待してたりする。）

ミスを発見するために使っているのに、上記のようなエラーに振り回されて間違った知識を得てしまうのは本末転倒だよね。もし Validator でエラーが出て自信がなければ、まず仕様書で確認してみることが一番安全なんじゃないかと。

Validator いろいろ

ついでにいくつか Vlidator をまとめてみる。ちうか、これ意外にもまだまだあるんだろうけど、こうして見てみるといろいろあるね。

2006-04-19T15:54:54+09:00 | コメント (4) | トラックバック (1) |

line-height の値には単位なしが良いとされる理由

この記事が属するカテゴリー: CSS

CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。

単位ありと単位なしの違い

手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size を px 指定してみた。

line-heights-sample.html

サンプルの上段には line-height の値に単位をつけて指定。

p {
  font-size: 16px;
  line-height: 1em;
}
p em {
  font-size: 24px;
}

サンプルの下段には line-height の値に単位をつけずに指定。

p {
  font-size: 16px;
  line-height: 1;
}
p em {
  font-size: 24px;
}

サンプルを見てみると、p 要素自体の行ボックスの高さは同じなのに、その子要素である em 要素の行ボックスの高さに相違がみられる。つまり、子孫要素への継承のされ方が違っているって事になる。実際に line-height 値がそれぞれどうなってるのかを表すと下記のようになる。

line-height の値に単位をつけて 1em とした場合

p {
  font-size: 16px;
  line-height: 1em = 16px;
}
p em {
  font-size: 24px;
  line-height: 16px;
}

line-height の値に単位をつけずに 1 とした場合

p {
  font-size: 16px;
  line-height: 1 = 16px;
}
p em {
  font-size: 24px;
  line-height: 24px;
}

em やパーセントなどの単位ありで指定すると、まず line-height 値に font-size と掛け合わせた計算値が使用される。この場合、p 要素のフォントサイズは 16px なんで行ボックスの高さも 16px になる。んで、この計算値が子孫要素にそのまま継承されてしまう。つまり、子孫要素である em 要素の行ボックスの高さも 16px となってしまう。

一方、単位なしで指定すると、line-height 値には同じく font-size と掛け合わせた計算値 16px が指定される。そして、子孫要素である em にはこの計算値ではなく指定値である 1 が継承され、em の font-size と掛け合わせた数値 24px が行ボックスの高さになる。

「CSS の「inherit」で継承されるのは Computed value 以外にありえない（と思ってる） - IT戦記」で言及して頂きましたが、「指定値が継承される」という言い回しは CSS2 の line-height の仕様に従っています。CSS 2.1 の仕様に従うのならば、「指定値と同じ計算値が継承される」ってな感じの言い回しになるかと思います。ということを一応、追記しておきます。amachang さん、ご指摘頂きありがとうです。

単位なしで指定しておいた方がお薦め

上記の結果を見ると、単位ありで指定してしまうと、その要素の子孫要素で行ボックスの高さが意図していないものになってしまう可能性がある。親要素に単位なしの値で line-height を指定することで、子孫要素でいくら font-size を変えようが、それに合わせて行ボックスの高さを要素ごとに計算してくれるわけだから、出来るだけ単位なし (number) で指定しておくことをお薦めする。

2006-04-10T12:48:03+09:00 | コメント (9) | トラックバック (6) |

CSS だけで Mac OS X の Dock 風ナビゲーション

この記事が属するカテゴリー: CSS

Paul Armstrong Designs - Weblog - CSS

マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。

対応ブラウザ

Firefox 等の Gecko 系
Internet Explorer 7 beta 2

テキストをズーム

CSS だけで Mac OS X の Dock 風ナビゲーションのサンプルその 1

テキストにマウスオーバーでズーム

li {
  font-size: 1em;
}
  li:hover {
    font-size: 2em;
  }
    li:hover + li {
      font-size: 1.5em;
    }
      li:hover + li + li {
        font-size: 1.3em;
      }

当然のことながら、隣接セレクタは直後の要素へ対する指定しか出来ないんで、マウスオーバーしている要素の直前の要素は変化しない。それでも比較的それっぽく見える。調子に乗って、アイコンを使ってもっと Dock っぽいサンプルも作ってみた。

アイコンをズーム

CSS だけで Mac OS X の Dock 風ナビゲーションのサンプルその 2

アイコンにマウスオーバーでズーム

#dock li {
  float: left;
  list-style :none;
}
  #dock li img {
    width: 64px;
    height: 64px;
  }
    #dock li:hover img {
      width: 128px;
      height: 128px;
    }
      #dock li:hover + li img {
        width: 96px;
        height: 96px;
      }
        #dock li:hover + li + li img{
          width: 80px;
          height: 80px;
        }

img 要素を使ってるんだけど、画像サイズを width、height 属性での指定では無く、CSS でサイズ指定することで大きさを変化させている。あまり深く考えずに作ったんで、可変の原点が上側だけどなかなか良い感じ。

2006-03-08T00:05:53+09:00 | コメント (4) | トラックバック (3) |

IE 7 用の CSS ハック

この記事が属するカテゴリー: CSS

この記事で紹介しているハックとは別のソリューションを「IE7 を含むモダンブラウザ向けの CSS ハックまとめ」と言う記事で紹介しているので、合わせてご覧になって見ると良いかもしれません。

Internet Explorer 7 の Beta 2 Preview が公開された。んで、公式的にはバグを取り除くんで現存する CSS ハックは使えなくなるよってことだったんだけど、早速 IE 7 向けの CSS ハックが報告されている。

iBloom Studios | Articles | The IE7 CSS Hack

カラクリとしては、IE7 が対応していない :lang() 疑似クラスを使うって方法らしい。下記のような (X)HTML を例とする。

<body lang="ja">
<div id="contents">
<p>foo</p>
</div>
</body>

これに対して、まずベースとして IE7 を含む全てのブラウザ向けの指定を行う。例えば背景色を赤とする。

#contents {
    background-color: red;
}

その後に IE7 を含む全てのバージョンの IE 以外のブラウザへの指定を !important でオーバーライドさせる。例えば背景色を緑。

*:lang(ja) #contents {
    background-color: green !important;
}

ただ、このままだと Safari も :lang に対応していない。そこで、Safari で不完全に対応されている CSS3 の :empty 疑似クラスを使って Safari 向けの指定を行う。

#contents:empty {
    background-color: green !important;
}

これらによって、バージョン 7 を含む IE では背景色が赤、それ以外のブラウザでは背景色が緑となる。らしいですよ！スイマセン、まだ IE7 は落としてないんで自分で試してない :-P。テストページが上記ネタもとには用意されているんで、IE7 Beta 2 Preview を入れてみた方は実際に確認して見たら良いかも。

2006-02-01T19:06:40+09:00 | コメント (0) | トラックバック (2) |

CSS の習得度レベル 5

この記事が属するカテゴリー: CSS

あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P

CSS 習得度レベル 1

色とか簡単に変えられるらしい事を知っている
CSS を使うのはフォントサイズの指定くらい
CSS を使うメリットが良く分からない
レイアウトには table 要素を使えば良いと思う
まず、何から覚えれば良いのか分からない

CSS 習得度レベル 2

外部 CSS ファイルのメリットを知っている
ある特定の要素にスタイルを適用するには (X)HTML の方に ID かクラスを割り当ててから CSS で指定する
CSS ハックでブラウザごとに指定を振り分けられるらしい
基本的なプロパティは覚えてきた
ブラウザごとに見た目が違ってしまう理由が分からない
フルスクラッチで CSS 書いてレイアウトした事が 1 回はある

CSS 習得度レベル 3

いくつかのスタイルを作った経験がある
隣接セレクタや子供セレクタなどを含む全てのセレクタを使用した事がある
冗長的な記述を避け、適宜ショートハンドを利用してシンプルにする
ブラウザによる解釈の違いがある程度頭に入っている
いくつかの CSS ハックを使ってみた上でメリットやデメリットを理解している
メンテナンスしやすいように自分なりのノウハウがある
CSS の Specificity を理解している
一通り仕様書には目を通したことがある
DOCTYPE スイッチの Standards mode とQuirks modeで解釈が変わる事を理解している

CSS 習得度レベル 4

自分なりのフレームワークを用意している
自分が書いた CSS は、他人でも一読すればすぐに理解できる
仕様書の内容は全て頭に入っている
px、em、mm、pt などの単位それぞれが、相対サイズ、絶対サイズ、長さ、パーセントのどれに属しているか完全に理解している
属性セレクタを含む全てのセレクタの記法が完璧に頭に入っている
複数のブラウザで検証しなくても、頭に描いているレイアウトを組める自信がある
オリジナルなハックを発見して広めたことがある

CSS 習得度レベル 5

あらゆるメディアタイプのプロパティと値を全て覚えている
CSS に関することなら知らないことは何もない
そもそも仕様を作る方の人間だ

2006-02-01T00:38:23+09:00 | コメント (4) | トラックバック (7) |

印刷用 CSS で背景画像を印刷させる方法

この記事が属するカテゴリー: CSS

media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。ヘッダに画像を使って CSS で文字を非表示にしているウェブサイトの場合、ユーザーがそのサイトのヘッダ画像を含めて印刷したいのに、タイトルが味気ないテキストだけで印刷されるのを不満に思うとしたら、どう解決すれば良いのかってことで下記リンク先のバッドノウハウ。

wg:Printing CSS background images (sort of)

カラクリを大雑把に言うと、印刷用 CSS の指定で当該箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定するって感じ。以前紹介した「letter-spacing を使って背景画像置換」を使って、テキストを非表示にするんだけど、これって IE だと 1 バイトの文字はうまくいくけど、2 バイト文字だと完全に文字が隠れないんで実は使えない。なんで、サンプル作ってみたけどヘッダ部分の h1 には 1 バイト文字使ってる。

印刷用 CSS で背景画像を印刷させるサンプル

うーん、そもそも最近 image replacement （背景画像置換）やんないから使うことは無いな。

2005-12-27T19:42:28+09:00 | コメント (8) | トラックバック (2) |

CSS3 の Selectors と CSS3 Advanced Layout Module

この記事が属するカテゴリー: CSS

Selectors 最終草案 (Last Call Working Draft)
CSS3 Advanced Layout Module 草案（Working Draft）

Selectors

増えているものや削除されたものがあるみたいね。とりあえず、メモとして現状 CSS3 で追加されたセレクタを全て抜き出してみる。

E[foo^="bar"]: foo 属性値が文字列 bar で始まる E 要素にマッチ
E[foo$="bar"]: foo 属性値が文字列 bar で終わる E 要素にマッチ
E[foo*="bar"]: foo 属性値が部分文字列 bar を含んでいる E 要素にマッチ
E:root: ドキュメントのルートである E 要素にマッチ
E:nth-child(n): 親の中で n 番目の子である E 要素にマッチ
E:nth-last-child(n): 親の中で最後から数えて n 番目の子である E 要素にマッチ
E:nth-of-type(n): 同じ要素名を持つ兄弟の n 番目の E 要素にマッチ
E:nth-last-of-type(n): 同じ要素名を持つ兄弟の最後から数えて n 番目の E 要素にマッチ
E:last-child: 親の中で最後の子である E 要素にマッチ
E:first-of-type: 同じ要素名を持つ兄弟の最初の E 要素にマッチ
E:last-of-type: 同じ要素名を持つ兄弟の最後の E 要素にマッチ
E:only-child: 親の中で唯一の子である E 要素にマッチ
E:only-of-type: 親の中で唯一の要素名を持つ E 要素にマッチ
E:empty: 子（テキストノードも含む）を全く持たない E 要素にマッチ
E:target: 参照 URI のターゲットとなる E 要素にマッチ
E:enabled
E:disabled: 有効または無効であるユーザインターフェース要素 E にマッチ
E:checked: チェックされているユーザインターフェース要素 E にマッチ（ラジオボタンやチェックボックス等）
E::selection: ユーザによって選択 / ハイライトされている E 要素の一部にマッチ
E:not(s): 単純セレクタ s にマッチしない E 要素にマッチ
E ~ F: E 要素が先に出現している F 要素にマッチ

CSS3 Advanced Layout Module

まだ未読だけど、最初の 3.Template-based positioning を見ただけでもなんか色々と凄そうね。グリッド配置が自由自在って感じ？。あと、タブっぽいやつも簡単そう。Example のソースは、なんとなく萎える感じだけど。

2005-12-21T15:16:04+09:00 | コメント (2) | トラックバック (2) |

プロパティから CSS 仕様書へのリンク集を作ってみた

この記事が属するカテゴリー: CSS

CSS プロパティの仕様が確認できる OS X の Dashboard 用ウィジェット「SeeSS」が便利そう。例えば、ある CSS のプロパティについて、仕様書ではどう定義されてるんだっけってな場合に、仕様書の目次から辿ってっつうのがちょっと面倒だったりする。そこで、各プロパティ名から W3C の CSS 仕様書の当該部分へのリンク集を作ってみた。まぁ、「Appendix F. Full property table」のシンプル版って感じ。

一応、邦訳版へ勝手にリンクした物も作ってみたんだけど、不都合があった場合には削除するかもしんない。あと、リンク切れや漏れがあるかもしれないんで、なんか見つけたらコメントでご報告いただけたらありがたいっす。

2005-11-26T15:43:52+09:00 | コメント (3) | トラックバック (2) |

CSS で counter を使って自動連番を振る際の注意点

この記事が属するカテゴリー: CSS

content プロパティを使って、CSS2.1 の counter による自動連番の挿入っつうマニアック気味なちょっとした実験で気付いたことがあったのでメモ。どうやら、ブラウザによっては、counter のリセットを明示しなくても良いものや、リセットしないと連番にならないものがあるっぽい。

サンプルを作成して実験

下記のような定義リストを用意して、これの dt 要素（記事タイトル部分）の頭に上から連番で番号を振っていきたいと思ったとする。

<dl>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
</dl>

とりあえず、::before 疑似要素使って content プロパティで counter を生成すりゃ良いのかなって思ったんで、下記のような CSS を適用して counter に対応しているブラウザで確認してみた。

dt::before {
  content: counter(article) ". ";
  counter-increment: article;
}

example01

ブラウザでの確認

現時点で counter に対応しているブラウザは Opera と Firefox 1.5 あたりだと思うんで、そこら辺で検証。今ちょっと Firefox 1.5 RC 外しちゃってるんで代わりとして Flock を使用した。

Opera 8.5 での表示
Flock 0.5pre （Firefox 1.5 と同じ Gecko 1.8b5 ベース）での表示

counter をリセットをする

Gecko 系の方はうまく連番になってくんない。どうやら、counter のリセットを明示してあげないとダメらしい。

dl {
  counter-reset: article;
}

example02

このように指定する事で、Flock でも無事に連番なってくれた。と言うか、実はこれが正しい挙動で Opera がリセットしなくても連番になるのが正しくないのかもしれない。うーん、ちょっとここらへんは詳しくないんだけど、とりあえず counter をリセットしとくのが無難っつう事か。

2005-11-19T02:16:18+09:00 | コメント (4) | トラックバック (0) |

CSS だけでフォトギャラリー

この記事が属するカテゴリー: CSS

CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでしかチェックしてないんで、まともに動かない環境もあるかも知んない。

gallery.html

(X)HTML は下記のように、画像を順不同のリストで並べている。

<ul id="gallery">
  <li><a href="#empty-anchor"><img src="01.png" /></a></li>
  <li><a href="#empty-anchor"><img src="02.png" /></a></li>
  <li><a href="#empty-anchor"><img src="03.png" /></a></li>
  <li><a href="#empty-anchor"><img src="04.png"" /></a></li>
  <li><a href="#empty-anchor"><img src="05.png" /></a></li>
  <li><a href="#empty-anchor"><img src="06.png" /></a></li>
  <li><a href="#empty-anchor"><img src="07.png" /></a></li>
  <li><a href="#empty-anchor"><img src="08.png" /></a></li>
  <li><a href="#empty-anchor"><img src="09.png" /></a></li>
  <li><a href="#empty-anchor"><img src="10.png" /></a></li>
</ul>

ポイントとしては、z-index を使ってレイヤーの階層を明示してあげないと、サムネールと拡大画像とかがぐちゃぐちゃになっちゃってヒドスな状態になる。ちなみに、:active や :focus の疑似クラスを使って拡大画像を固定させるんだけど、Opera とか Safari あたりはクリックを離すと active と focus の状態を維持してくんないので拡大画像が固定されない :-(

2005-11-05T17