最新の記事 5 件

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

この記事が属するカテゴリー
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) |はてなブックマーク

「Web標準テキスト(2) CSS」という本が出ます

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

2008 年 1 月 12 日に技術評論社より刊行される「Web標準テキスト」シリーズ 3 冊のうち、「(2)CSS」の執筆を担当させていただきしました。「Web標準テキスト」シリーズは、大藤さんが執筆された「HTML/XHTML」、古旗さんが執筆された「DOM Scripting」、そして僕が執筆した「CSS」の3冊で構成されており、それぞれ基礎から丁寧に解説しています。書店で見かけたら、是非とも手にとってご覧になってみてください。

Web標準テキスト(1) DOM Scripting 表紙
Web標準テキスト(2) CSS 表紙
Web標準テキスト(3) HTML/XHTML 表紙

「Web標準テキスト(2) CSS」について

今回執筆させていただいた「Web標準テキスト(2) CSS」は、これから CSS を学びたい方や、オーサリングソフトの WYSWYG だけでなくハンドコーディングを行えるようになりたい方、もう一度基礎を確認したい方など、どちらかと言うと初心者寄りをターゲットとして、CSS の基礎から段組レイアウトまでを分かりやすく解説しています。

例えばセレクタを解説する項目では、必ずしも正解がひとつではないセレクタのユースケースとして、あるサンプル文書内の特定要素を選択する際に、最低限考えられるセレクタをいくつか挙げ、それぞれの詳細度とともに解説していたりします。そんな感じで、比較的基礎部分にページを割いているので、マニアックでディープな Tips 関連などは避けていますが、知っておくと役に立つかもしれない情報は載っているかと思います。

謝辞

こうして無事に刊行の運びとなったのも、ひとえに編集者さまの力添えのおかげです。この場を借りて今回の書籍に関わってくださったすべての方々にお礼を申し上げたいと思います。また、執筆中は何かとIMで相談にのって頂いた 2xup.org の goya さん、ありがとうございました。

刊行までのアバウトな流れ

  1. ホップ本が脱稿して間もない 2007 年 1月のはじめに執筆のお話をいただく
  2. いやー、ホップ本がまだ校正中なんす
  3. 技術評論社にて直接お話を伺う
  4. これは自分のためにもやっておいた方が良くね？という結論が俺の中で出たので快諾する
  5. なんだかんだでゴールデンウィークから執筆を開始するも、なかなか進まない
  6. なにこのプレッシャー。おなか痛い
  7. 7月末脱稿予定が 1 ヶ月延びる
  8. 締め切りの 8月末に RS ウィルスにかかって一週間寝込む
  9. 10 日遅れで本文脱稿
  10. 本業に忙殺されて 30 点弱ほどの未作成の図版を 1 ヶ月ほど忘れる
  11. 涙目で図版作成
  12. 校正。初校より再校の方が赤が多いって、俺バカスｗｗｗ
  13. 校了！
  14. 久々の更新なのに宣伝乙！←今ここ
  15. この刊行までの流れは書かない方が良かったんじゃないかと後悔する

2007-12-27T23:27:07+09:00 | コメント (9) | トラックバック (1) |はてなブックマーク

CSSによる段組レイアウトのフレームワーク

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

CSS による段組レイアウトを実現するには、float プロパティか position プロパティのどちらかを使った方法を選択することになると思うのだけれども、 float 派の自分としては position を使った方法の利点・欠点を知っておかなければと思ったんで、float で作ったのと同じように position でも段組レイアウトを作ったみた。せっかくだから、それらレイアウトをまとめた 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 読み込ませないようにしている。

.clearfix {
  display: inline-block;
}

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

* html .clearfix {
  height: 1%;
}

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

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


/* 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 としている。

.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 じゃなくなるんで、それが嫌ならコンディショナルコメントとかで別にリンクした方が良いかもしれない。

.clearfix {
  zoom: 1
}

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

2007-05-27T01:39:02+09:00 | コメント (1) | トラックバック (1) |はてなブックマーク