2xup.org

Links for 2008-05-08 [del.icio.us]

2008-05-09T00:00:00-05:00

Biznology: Need Help with Movable Type? Just Twitter

Links for 2008-05-07 [del.icio.us]

2008-05-08T00:00:00-05:00

Links for 2008-05-06 [del.icio.us]

2008-05-07T00:00:00-05:00

NSFW: Not Safe For Work
Not Safe For Work なサイトにリンクするとき

Links for 2008-05-05 [del.icio.us]

2008-05-06T00:00:00-05:00

HTML::Split : おまえのログ
Monster-Munch PacMan Hoodie
ほしい

Links for 2008-05-04 [del.icio.us]

2008-05-05T00:00:00-05:00

Amazon.co.jp：スクリーマデリカ(紙ジャケット仕様): プライマル・スクリーム: 音楽
名盤リマスタ紙ジャケ
BLUE NOTE : Schedule
Roy Ayers がまたくる

Links for 2008-05-03 [del.icio.us]

2008-05-04T00:00:00-05:00

YouTube - Soft Focus - Kevin Shields - My Bloody Valentine
ケヴィンやせすぎ

Links for 2008-05-02 [del.icio.us]

2008-05-03T00:00:00-05:00

Art Files
from so2cjp
Shutter bug | VEMM展
これはいきたかった
Welcome to MiiSculptures
MovableType用TemplateSetExporter Plugin　Ver.0.50 (エムロジック放課後プロジェクト)
わいわい

見出しレベルを調整するモディファイアを追加する Movable Type プラグイン

2007-08-30T09:11:11-05:00

Movable Type 4 のデフォルトテンプレートでもそうなのだけれど、ブログ記事アーカイブテンプレートの見出しはブログ記事のタイトルが heading level 1 (h1) になっています。2xup.org でも、ドメインルート以外はそのページで一番大きな見出しにしたい部分、例えばブログ記事個々のページではブログ記事のタイトルを h1 としています。

しかしそれを前提にブログ記事を書いた場合、h1 がサイトのタイトルになる、もしくはブログ記事のタイトルが h1 以外になるページでは、ブログ記事に含まれる見出しの出現順序がおかしくなってしまう可能性があります。それを解消する為の Movable Type プラグインを以前に作成して利用していたのですが、先日の Hack-a-thon の時間を利用して公開できる状態にし、ダイナミックパブリッシングにも対応してみました。

使い方

hn_level というテンプレートタグモディファイアが追加されます。ブログ記事本文の見出しレベルを調整したい場合は、以下のように書きます。

<mt:entrybody hn_level="+|-N" />

設定する値は +|-N で、設定した値に応じて見出しレベルを調整します。例えば、ブログ記事本文に書いた heading level 2 (h2) をメインページテンプレートでは heading level 3 (h3) として出力した場合は、メインページテンプレートタグの MTEntryBody ファンクションタグを以下のようにします。

<mt:entrybody hn_level="+1" />

もうちょっと Movable Type 4 っぽく書くなら、テンプレートの最初に MTSetVar, MTSetVarBlock を利用して見出しレベルを調整する値を変数 adj_val に入れておいて、モディファイアでその変数を指定します。

<mt:setvar name="adj_val" value="+1" />
...
<mt:entries>
...
<mt:entrybody hn_level="$adj_val" />
<mt:entrymore hn_level="$adj_val" />
...
</mt:entries>

こうしておくと、hn_level モディファイアを設定するファンクションタグが他にもある場合、編集が簡単になります。

ダウンロード

HeadingLevelConverter プラグインをダウンロード (gzip: 5KB)

インストール

デスクトップで解凍した場合は plugins ディレクトリの中にある HeadingLevelConverter ディレクトリを Movable Type の plugins ディレクトリにアップロードしてください。

アップロード後、解凍する場合は mt.cgi のあるディレクトリ (以下[MT]) にアーカイブをアップロード後、解凍すれば plugins ディレクトリに HeadingLevelConverter ディレクトリが展開されます。

Movable Type 3.x で利用する場合

Movable Type 3.x で利用する場合は、HeadingLevelConverter/php/ にある modifier.hn_level.php を、[MT]/php/plugins/ に移動してください。

body 要素の最初の内包要素に上マージンがある場合の body 要素デフォルトのマージン処理

2007-07-31T06:30:41-05:00

各表示モードによる CSS 解釈の違いをまとめたドキュメントで『body 要素の最初の内包要素に上マージンがある場合の body 要素デフォルトのマージン処理』については僕自身がきちんと理解できていないためブログ記事内では解説やサンプルを引っ込めていたのですが、記載を残していた表へのフィードバックをいただきました (ありがとうございます！)。

body直下要素に上マージン(メモランダム)

さらに、body直下要素に上マージンその2：メモランダムを読んでしっかり理解できました。本当にありがとうございます！

サンプルも無くややこしい表現をしている状態でしたので、サンプルの共有、表の修正と詳細を用意します。

Windows IE の標準モードでは body 要素の最初の内包要素に上方向のマージンがある場合、表示域の上辺とその要素の上辺の間はマージンの折りたたみが発生せずbody 要素デフォルトのマージンに body 要素の最初の内包要素のマージンを加えた値となります (こちらはバグ)。Windows IE の後方互換モードと確認したその他のブラウザでは、マージンの折りたたみが発生し~~ているかのように~~、body 要素デフォルトのマージンか body 要素の最初の内包要素のマージンの値が大きい方の値になります (こちらは正しい)。~~確認したその他のブラウザでは、body 要素デフォルトのマージンの値が無効となり body 要素の最初の内包要素のマージンの値となります。~~ポイントを書き出してみます。

Windows IE とほかのブラウザで body 要素デフォルトのマージンが違う (参考)
Windows IE 標準準拠モードは間違った処理 (マージンの折りたたみを行わない)
Windows IE 後方 (過去) 互換モードと、その他確認ブラウザは正しい処理 (マージンを折りたたむ)

body 要素デフォルトのマージンより body 要素の最初の内包要素のマージンの値が大きい場合のサンプルも共有しておきます。

body 要素デフォルトのマージン

共有ドキュメントではユーザーエージェントのスタイルシートで設定された body 要素のマージンを body 要素デフォルトのマージンとしています。確認を行ったブラウザでは margin: 8px; と設定されているのがほとんどのようで、例えば firefox-html.css や webkit.css を見てみると body 要素へのスタイル指定は以下のようになっています。

body {
  display: block;
  margin: 8px;
}

Windows IE 6 でも調べてみました。表示されたものを目視で判断するのはやや不安なので、デフォルトスタイルシートとなるファイルを探してみたのですが、解らなかったので、Internet Explorer Developer Toolbar を利用して、body 要素に設定されているスタイルを抜き出してみました。

Windows IE 標準準拠モード時に設定された body 要素のデフォルトスタイル

ほとんどのブラウザが、body 要素の margin を 8px としているのに対し、Windows IE は上下に 15px 左右に 10px としているのにも注目です。ちなみにほとんどのブラウザが設定している 8px という値は、CSS 2.1 の仕様書の Appendix D Default style sheet for HTML 4 からだと思います (CSS 2 の場合は padding: 8px;)。

body {
  display: block;
  margin: 15px 10px;
}

Windows IE 後方 (過去) 互換モード時に設定された body 要素のデフォルトスタイル

ここでも後方互換モード時に html 要素に設定されたスタイルが body 要素に引き継がれているようになっているのがわかります。これについてはhtml 要素へのスタイル定義のサンプルが参考になります。

body {
  display: block;
  margin: 15px 10px;
  border-style: inset;
  background-color: #ffffff;
  overflow-x: auto;
  overflow-y: scroll;
}

まだ理解しきれていなかったのでサンプルを引っ込めていたのですが、あわせて表からもはずしておくべきでした。また、この項目のみ結果の書き方を変更しています。

表示モードごとの CSS 解釈検証結果表

標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有

2007-07-27T07:11:11-05:00

最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。

DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈をエミュレートさせる機能が働き、全く表示されないなんて事がないようにするということです。

バグなのか仕様なのか、ブラウザごとに表示が整わない場合、その原因はどこにあるのかをしっかり理解し具体的にイメージできるようになるのが目的 (本当はサンプルを作ってまとめるのが好きなだけだったり) として、これら大きくわけて2種類の表示モードに実際にどのような違いがあるのか。主に CSS の解釈の違いを様々なブラウザで確認してみました。まとめた各種資料と確認に利用したサンプルを共有します。ご自由にお使いください。

確認を行った環境

共有する各ドキュメント作成時に検証をおこなった環境です。手持ちの環境ではこれが精一杯ですので、ご協力いただけると嬉しいです。

Windows Vista
- Internet Explorer 7
Windows XP
- Internet Explorer 7
- Internet Explorer 6
- Firefox 2
- Opera 9.2
- Sarafi 3 beta
Mac OSX
- Safari 3 beta
- Safari 2
- Firefox 2
- Camino 1.5
- Opera 9.2
- Omni Web 5
- Internet Explorer 5

ご協力いただきたい主な環境を追記しておきます。

Windows 2000
- Internet Explorer 6
Mac OS 9
- Internet Explorer 5

どうぞよろしくお願いします(tnx id:ZIGOROu さん)！

各ブラウザの DOCTYPE スイッチ対応表

各ブラウザの DOCTYPE スイッチ対応表 (Google Docs & Spreadsheets を使用)

検証した各ブラウザで DOCTYPE 宣言の種類や有無など様々な状況でテストを行い、どの表示モードになるのかをまとめた表です。公開識別子の種類、システム識別子の有無、XHTML の場合は XML 宣言の有無などを確認できるほか、実際にそれらの宣言がどのように書かれているのかも確認できます。

表を見る時の注意点

縦に表を見るとブラウザごとに表示モードが色分されて確認できます。ほとんどが同じパターンになっているのですが、Windows IE 6 だけ後方 (過去) 互換モードになっているところがあります。これは DOCTYPE 宣言の前に半角スペース以外の文字を含む行が有る場合、後方 (過去) 互換モードになる。というバグが原因です。結果、同じ XHTML 文書でも表示モードが混在してしまいます。

表示モードごとの CSS 解釈検証結果表

表示モードごとの CSS 解釈検証結果表 (Google Docs & Spreadsheets を使用)

各表示モードの状態で CSS の解釈の違いを検証し、まとめた表です。白抜きの丸が仕様に沿った解釈としています。

表示モードごとに CSS や HTML の解釈を確認するためのページ

表示モードごとの CSS 解釈検証結果表を作成する際に利用した検証用の文書です。お手元の環境で実際に表示モードごとの CSS の解釈の違いを確認できるほか、まとめてダウンロードを行いローカル環境やご自身のウェブサーバー、イントラネット環境にアップロードして利用できるようにしています。各項目ごとに以下の文書を用意しています。

XHTML 1.0 Strict 文書
XML 宣言を省略した XHTML 1.0 Strict 文書
DOCTYPE 宣言の無い謎のマークアップ言語で書かれた文書

XML 宣言を省略した XHTML 1.0 Strict で宣言した文書は Windows IE 6 で DOCTYPE 宣言の前に半角スペース以外の文字を含む行が有る場合、後方 (過去) 互換モードになるというバグが存在する為です。共有する各ケースの文書を Windows IE 6 で標準準拠モードの確認をする場合は、XML 宣言を省略した XHTML 1.0 Strict 文書を利用する必要があります。

以下のセクションでは各確認用ページへのリンクと、確認する際の注意点をまとめます。

幅・高さの計算

指定した幅 (width) と高さ (height) の外側に border と padding が足される content-box (正しい解釈) と、指定した幅と高さが border と含めてしまう border-box があります。Internet Explorer では後方 (過去) 互換モードで border-box で解釈するので、Windows IE 6 では注意が必要です。

text-align でブロック要素を揃える

text-align は指定されたブロック要素の内部にある全てのインライン要素を水平位置を揃えるプロパティです。ブロック要素の水平位置は揃えません。Windows IE は標準準拠モード・後方互換モード共、Mac IE は後方互換モードでブロック要素の水平位置も揃えます。

左右に auto のマージン

ブロックレベル要素をセンタリングするには、センタリングしたい要素の左右に値が auto の margin を設定します。Windows IE は後方互換モードで値が auto の margin が無効になります。

標準のフォントサイズ

font-size プロパティの初期値は medium で medium, small などの絶対値指定のフォントサイズはブラウザで設定したフォントサイズを対象に算出されます。つまり初期値 medium はブラウザで設定したフォントサイズと同じになります。後方互換モード時 Windows IE, Opera, Mac IE 5 では標準フォントサイズがブラウザで設定したフォントサイズ (medium) ではなく small 相当になります。

非置換インライン要素に幅と高さを指定

非置換インライン要素 (span, strong など) に幅と高さを指定しても通常は無効になりますが、後方互換モード時の Windows IE、 Mac IE では、指定通りになります。

属性値の大文字・小文字区別

例にある class, id 属性の値は大文字／小文字を区別します (box, Box BOX は各々違う値)。Mac IE 以外のブラウザで後方互換モードの場合、属性値の大文字／小文字を区別せず、同じ値として扱います。

単位必須の数値に単位が無い場合

単位必須の数値に単位が無い場合、通常は無効になりますが、確認した全てのブラウザで後方互換モードの場合、px として処理されます。

# の無い16進数 (6桁・3桁) での色指定

# の無い16進数 (6桁・3桁) での色指定は無効になる環境がほとんどです。ショートハンドで指定する場合、値の指定順序で処理が違ったり、後方互換モードでは指定した色で処理したりする環境もあります。表示モードごとの CSS 解釈検証結果表と合わせて確認してみてください。

値が pre の white-space プロパティの処理

値が pre の white-space プロパティの処理は指定した要素内の改行、タブ文字、連続空白をそのまま表示します。後方互換モード時の Windows IE はこの指定が無効になります。

高さ単位が % の要素の算出対象

単位が % の値で指定した要素の高さは、その指定した要素の包含ブロックの高さに対する割合で算出されます。もし包含ブロックに高さの指定が無い場合、単位が % の値で指定した要素の高さは auto として処理 (内包するコンテンツによる) されます。後方互換モードの場合、Safari, Firefox, Camino, Mac IE で算出対象が表示域となります。

高さ単位が % の要素の算出対象 (body 要素の最初の内包要素)

body 要素の最初の内包要素に単位が % の高さを指定した場合、検証した全てのブラウザの後方互換モードで算出対象がブラウザの表示域になります。

html 要素へのスタイル定義

html 要素にも通常の要素と同じようにスタイル指定可能です。Windows IE の後方互換モードでは、CSS の解釈とは別にブラウザで見た目上始まる最初の要素が html 要素ではなく、body 要素になります (ルート要素は html 要素)。

結果、html 要素に指定していたスタイルは、body 要素に指定したスタイルかのように処理 (継承しないプロパティも同様に処理されるので、継承ではなく引き継ぎ?) され、html 要素に指定したスタイルと同じプロパティで body 要素にも指定がある場合 body 要素に対する指定を優先します。もし body に指定したプロパティがショートハンドの場合、無指値の処理は通常と同じようにリセットされます。

body 要素の最初の内包要素に上マージンがある場合の body 要素デフォルトのマージン処理

別のブログ記事に詳細とサンプルファイルへのリンクを用意しています。

body 要素の最初の内包要素に上マージンがある場合の body 要素デフォルトのマージン処理

スライド形式の資料

スライド形式の資料をダウンロード (.zip アーカイブ約3.1MB)

DOCTYPE スイッチの概要と、各表示モードの解説。実際に各ブラウザで確認した内容をいくつか取り上げています (.pdf ファイル)。

ファイルをまとめてダウンロードする

共有ドキュメントをまるごとダウンロード (.zip アーカイブ約3.2MB)

検証用ファイル集やスライド形式の資料など共有ドキュメントをまとめてダウンロードできるようにしています。検証用ファイルはお手持ちのサーバーやローカルやイントラネットの環境に、そのままアップロード等を行い各資料を確認できるようになっています。

『ドメイン名の由来を書いてみる』にお寄せいただいた回答

2007-05-07T06:10:05-05:00

すでに答えがある質問だからか、はたまた連休終盤だったからか、たくさんの方が回答してくださいました。お礼を兼ねて、こちらで紹介させていただきます (ドメイン名の由来を書いてみるのトラックバックからもたどれます)。特に締め切りは設けてないので順次追加していきたいと思います。僕自身が読んでクリップした順番になっています。漏れていたらごめんなさい報告ください。またリンクされて困る方もご連絡ください。

[おまけ] 2xup の読み方あれこれ

2xup の読みは『ニカケルアップ (略して二ペケ)』です。ブログ開設当初は、プリンスが元プリンスとされていた時のアレのような認識を持っていただきたいという希望があったのも事実です。2005年くらいには、ブログの概要にも記載していたのですが、あまり認識されていなかったようで、実際に顔を見て会話する中で、サイトの名前を呼んでいただく際に声が小さくなる場面に何度も遭遇しました (きちんと公開しておくべきでした)。

ドメイン名の由来を書いてみるを書いて、ほぼはじめて公式に 2xup 読み方を公開したわけですが、コメントを通していろんな読み方で親しみを持ってくださっていたと知り、嬉しくなりました。せっかくなので、こちらで紹介させていただきます。

ツーエックスアップ (多数)
ニエックスアップ
ニペケアップ
二倍アップ
二倍うp
つーあっぷおるぐ
ニクサッポルグ
ニクサップ
にばつあっぷ
つーなっぷ
かみのごうやさんのブログ
2グザップ
ニチャップ・オリジン (斬新！)
アルスーピコ (新しい読み方の提案。thanks! katsuo さん)
ツヴァイグザップ (新しい読み方の提案。thanks! 哀さん)
ドゥグザップ (新しい読み方の提案。thanks! 哀さん)
ツーサイアップ

新しい読み方の他に、私はこう読んでいた。なんていうのも引き続き募集したいとおもいます。素敵なお答えをいただいた方には、缶コーヒーくらいおごります。

ドメイン名の由来を書いてみる

2007-05-05T11:46:50-05:00

Hop or Die! でも話題になったのだけれど、サイトで利用しているドメイン名には各々由来があって、それは好きな音楽だったり、好きな言葉だったり。自分の名前をもじったりなんてのもあって本当に面白いものです。まあドメインは財産だというくらいだから、些細なことでも何かしら理由があって決めるものだと思うし、そうした理由はなかなかサイト上で知ることができなかったりもするので、ますます興味があるわけです。

みなさんのドメインの由来も聞いてみたい

せっかくなので、みなさんのドメイン名の由来をブログしてみませんか。ドメインを持っていない人はアカウント名でも良いですよね。

『ドメイン名 = サイト名』という場合も多いとおもいますが (ニペケもそうです) サイト名と違って、ドメイン名にはサイト名以上におもしろい意味があるんじゃないかと思っています。

もし、この企画に参加してもいいなあと思ったらブログ等に記事を書いて、この記事にトラックバックもしくはコメントするなり、この記事をブックマークしてブックマークコメントでお知せいただけると嬉しいです。たくさん集まればまとめ記事なんてのも用意しても良いかなあと思っています。origin_of_domain なんていう共通のタグを付けてもおもしろいかもしれませんね。

ちなみに 2xup の由来はというと、もともとは上野と上ノ郷谷という二人で活動していたデザインチームの名前で、その名前は二人の Family name の頭文字が『上』であることから『上×2』イコール『2xup』なのでした。ちなみに読みはデザインチームとして活動していた頃は『ツーバイアップ』。僕一人になって、ブログを初めてからは、どなたかのコメントがきっかけで『ニカケルアップ (略してニペケ)』となりました。自分自身で掘り返してみても歴史ありですなあ。

みなさんのドメイン名の由来。楽しみにしています！

Twitter で lomo さんに提案してもろたのですが、いざこうして読み方を公開してみるといろんな読み方をしてくれている人がいるようなので、ついでに 2xup の新しい読み方も募集してもよいなあ。

意外にも反響が多くてビクソ！ウレスイ！トラックバックやコメント、リファラ、ブックマーク経由でクリップしていますので、あとでリストしてみよ！

Hop or Die! 参加レポート

2007-05-05T02:30:59-05:00

真琴さんの東京訪問に合わせて、先日5月3日に行われた『実践 Web Standards Design』(ホップ本) 著者のみなさんを囲んでのビーリング会、Hop or Die! に参加してきました。すでに参加者された方のブログでレポートが上がっていますが、とても楽しかったです。

会場は六本木 (ギロッポン) にある、ベル・オーブ。iwai さんセレクトの素敵なお店でした。参加者は以下の面々。初めましての方もいらっしゃいましたが、真琴さん作成のステキなネームカードのおかげで盛り上がりながら乾杯前にまずはごあいさつ。イェス。

市瀬裕哉さん (3ping.org)
福島英児さん (Lucky Bag::blog)
望月真琴さん (hxxk.jp)
kzさん (miniturbo.org)
katsuoさん (pruto.jp)
Kazuhito Kidachiさん (@kazuhi.to)
iwaimさん (行動記録)
小久保浩大郎さん (hemiolia.com)
A.Kawashimaさん (Emotional Web)

おいしいベルギーベールで乾杯した後は、ホップ本出版までのあらすじや好きな音楽、ビールの話。楽しくなりそうな企画の話などで盛り上がり、サイン会も行われました。表の奥付には著者3名のサインを。裏の奥付には参加者のみなさんにこの会を記念してサインしていただきましたが、ほぼ全員が同じ本を持って、各々サインするために渡し合うという異様な雰囲気でもありました。特に印象に残っている話としては、参加者の持つドメイン名の由来。各々きちんとした理由があって本当におもろいですね。ドメイン由来をみんなでブログするとか楽しいかも (サイト名よりおもろい理由がある事が判明)。

お仕事がらサイト上でしかしらない人と合う機会が多くありますが、いつも思うのはサイトで文章やデザインを通して人となりを感じていることもあり、なんだか初対面なのにずっと知っていたかのように感じる事。特に Hop or Die! の参加者のブログは特に熟読しているので、それをよけいに感じました。みなさん Web 関係だけでなくいろんな事に興味をもっていて、実際にお会いして話してみると、ブログをより身近に感じます。

真琴さんにおすすめしていただいたゾウのビールを飲んだので、空き瓶をいただいて帰る事にしました。おもいつきでしたが、この瓶にも参加者のみなさんにサインしていただきました。素敵な思い出の品、自宅のデスクに飾っております。そして『ケツは飾れない』をこの日の名言にしていただいて本当にありがとうございました。次は巣鴨だ！

正しくHTMLを書こうと心がけている人に5つの質問に答える

2007-04-11T05:16:30-05:00

der Gegenwart さんの正しくHTMLを書こうと心がけている人に5つの質問に僕も答えてみます (5問なので) 。

HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む）

採用しているDTDとその理由をお答えください。

何故正しくHTMLを書いているのですか？

W3CとWHATWG、どちらに期待してますか？

あなたにとってHTMLとは何ですか？

ほとんど Vim で作業しています。あとは mi を使います。と、これはテンプレートの作成で、実際に XHTML 文書にしているのは Movable Type だったり
できるだけ新しい DTD を利用したいのと、後方互換も考えて XHTML 1.0 Strict を主に採用してます
汎用性。しかしまだ勉強中であります
W3C。現状維持ってことで良いと思います。でも WHATWG についてはしらべなきゃ
文書に意味付けを行う言語

回答もどしどし集まっている模様だす。

「正しくHTMLを（中略）5つの質問」に対する回答一覧

4月5日は CSS Naked Day

2007-04-04T20:11:11-05:00

Twitter でも昨日の夜から『はだかになった』というさえずりが増えていておもいだしたのですが、今年も CSS Naked Day がやってきました。思い出すまで本当の裸ブームなのかと思い、しばらく裸身でうろうろしてしまいました。さっそく 2xup.org も CSS を脱いで裸んぼです。

今年の CSS Naked Day ロゴはなんかつるっとしていますね。僕も今年はなにかとつるっとしたい。

実践 Web Standards Design

2007-02-21T02:05:00-06:00

HTML にしても CSS にしても、最近やはり基本からもう一度学び直さなければいけないなあ。と感じることが多くなりました。知っていると思い込んでいる事がどれだけ多いか…。基本を学んでいく上では新しい発見!というものはゼロに等しのかもしれませんが、今以上に知識を広げたいのであれば、今より良い視点を持ちたいならば、基本をおさらいする事ほど大事なことはありません。知っていると思い込むことほど格好わるいことはありませんものね。そんな考えの元勉強中の今まさに、僕自身が必要としている書籍、『実践 Web Standards Design』(ホップ本というらしい) が発売されるようです。

柔軟でしっかりした考え方と判りやすい説明で愛読しているブログ 3ping.org の市瀬裕哉さんを中心に、仕様面にとても深い知識をお持ちの hxxk.jp 望月真琴さん、ブログでも CSS を最大限に活かした様々な面白い Tips を紹介なさってる Lucky bag::blog 福島英児さんという素敵な方々の共著とあって、手にする前から期待しております。これは個人的にも教科書としていつも手元に置いておきたいと思います。書籍の詳しい構成は著者各々のブログで紹介されていますので、購入時の参考にされてはいかがでしょうか。

実はこの実践 Web Standards Desigには、2xup.org の記事のなかからスタイルシートを書く時のガイドラインを掲載いただいたようで、事前にその旨を真琴さんからご連絡をいただいた際は『すごい書籍が出版されるなああ (著者情報のみで) ！』とドキドキしていたのでした。最近、wu さんとチャットする機会があり、まもなく著書が出版されると伺い『もしや？』と思っていたのですが、共著だったと知り、しかも e-luck さんもご一緒だと知って『どんだけすごいねん！』と一人 PC の前で突っ込んでしまいました。著者の方々にお会いできたら、ぜひサインをいただきたい一冊です。2007年2月23日頃から書店に並びはじめるそうなので、ぜひチェックしてみてください。

『CSS でよく使う装飾定義をコンポーネントとしてまとめる』をもう一度

2007-01-27T05:51:03-06:00

CSS でよく使う装飾定義をコンポーネントとしてまとめるの続き

前回の記事で、コンポーネントする方法としてひとつの class に集約するという方法をとっていましたが、それではそもそも見た目重視のマークアップになってしまい HTML の構造化と、CSS で見た目制御するということについて本来の目的と離れた方向性であるというご指摘をいただき、考えを改めてみました。

単にclass名を変更するだけでは状況は大差ないような気がします。問題は、「よく使うスタイル定義の組み合わせ」をコンポーネントとしてまとめるのはいいとしても、それを或る一つのclass名に集約することなのではないかと思います。

HTMLのclass属性はスタイルシートのセレクタとしても利用されますが、より汎用的には、要素を分類するためにあるものだと考えます。なので、class名を付けるときは見た目に則したものではなく、「文書中でどのような役割を持つのか」という文書構造に則した名前をつけるべきかと思います。

CSSでよく使う装飾定義をclass名でまとめることについて - 徒書より

こちらの意見には本当に納得といいますか、なんというか、きちんと構造化された HTML を書くには CSS で装飾する事を先行して考えるのではなく、まずは HTML できちんとした文書を用意し、それに装飾を加えるという考えを持たなければ…。と考えていたのにCSS でよく使う装飾定義をコンポーネントとしてまとめるではまったくそれを意識できない内容になっていることを情けなく思いました。

ポジティブな視点で言うと、パブリッシュして本当に良かったと言えます。情報の発信・取得に関して意識していることでも書いたように、提案だけでなく実践して共有したり、知っている。と思い込まないという意識を持っていたおかげで北村さんをはじめたくさんの方にフィードバックをいただき、大切な事に気づくことができました。

2xup.org の HTML をもう一度見直し、書き直した現在の component.css へのリンクも用意しておきます。左側に寄せた画像の右側にテキストを流し込む部分に関しては、tobetchi さんにいただいたフィードバックを含め、もう一度考え直してみたいです。

http://2xup.org/common/styles/component.css

順不同、序列リストをインライン表示

順不同リスト (ul) または序列リスト (ol) をインライン表示させたい場合はその装飾を与えたいリストに対して以下のような装飾を定義します。

{ 
  display: inline;
}

リスト項目 (li) のマージンなどの指定は、分割管理しているテーマ CSS で行います。また、入れ子になったリストをインライン表示させたい場合は、以下のような装飾を該当するリストに与えます (2xup.org タイトルの下にあるナビゲーションを例にします)。

ul.meta li ul {
  display: inline;
  margin: 0;
  padding: 0;
}

順不同リストをタブナビゲーションのように表示

順不同リストをタブ型のというか、横並びでテキストではなく領域でクリックできるメニューとして利用したい場合は、装飾を与えたいリストに対して以下のような装飾を定義します。2xup.org でも、タイトルの次にあるナビゲーション、個別記事ページのコメント・トラックバックへのリンク部分で利用しています (2xup.org タイトルの下にあるナビゲーションを例にします)。

ul#navigation {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul#navigation li {
  float: left;
  margin: 0;
  padding: 0;
}

ul#navigation li a {
  display: block;
  margin: 0;
  padding: 0;
}

* html ul#navigation li a {
  display: inline-block;
}

この装飾には合わせて俗に言う clearfixを定義します。2xup.org のソースコードなどを参考にしてください。

俗に言う clearfix

俗に言う clearfix も同じように、該当する部分のセレクタを対応させる方法で行いました。このスタイル定義を利用すると <div style="clear: both;"></div> や、<br clear="both" /> という浮動体に隣接する流れの制御を行う為だけに利用される要素の必要なく、制御することができます。装飾は以下のようになります。

ul#navigation:after {
  content: ".";
  visibility: hidden;
  clear: both;
  display: block;
  height: 0;
}

ul#navigation {
  zoom: 1;
  margin-bottom: 3em;
}

この装飾の定義は構造のマークアップなしでフロートをクリアする方法を参考にしました。zoom というプロパティは Internet Explorer の独自拡張のようで、こちらはNew clearing method needed for IE7? への Lachlan Hunt 氏のコメントを参考にしました。

元々考えていたメンテナンス性とかは？

実は一つの class に集約するよりも、class 付けを行った方が後で修正が発生した場合のフローが簡単になりました。よく使う装飾の基本的な部分は既に component.css に定義されているので、まずはそれを頭からとっぱらい構造化された HTML を用意することができますね。あとは構造化された HTML をどのように装飾するのかを考え、それに合わせてコンポーネントとして装飾をまとめた CSS ファイルの各定義にセレクタを対応させていけば良いわけです。装飾に関するデバッグを行う際もこちらの方が作業は簡単に感じました。

今回もいただいたフィードバックのおかげで良い勉強になりました。これからもパブリッシュを続けたいと強く感じました。

CSS でよく使う装飾定義をコンポーネントとしてまとめる

2007-01-25T10:26:38-06:00

北村曉さんよりコンポーネントにまとめる際、それを或る一つのclass名に集約するという方向性についてご指摘いただきました。この記事をご覧いただく際、是非参照してください。

CSSでよく使う装飾定義をclass名でまとめることについて(徒書)

また、いただいたフィードバックを元にもう一度考えを改めて記事を書きました。

『CSS でよく使う装飾定義をコンポーネントとしてまとめる』をもう一度

リニューアルの際に CSS の分割管理を実践したのだけれど、その分割した CSS の中によく使う装飾をコンポーネントとして class にまとめた component.css というのを作成しました。コンポーネントとしてまとめることで変化に強くなりメンテナンス性が上がるのだけではなく、同じような装飾をおこなうために何度も良く似たスタイル定義を行うということが解消できるのではないかというのがねらい。

『CSS でよく使う装飾定義をコンポーネントとしてまとめる』をもう一度で componet.css の内容を変更しました。以下のリンク先のものは古くなります。最新版を参照願います。また、最新版はこのページの内容を参照しておりません。

~~http://2xup.org/common/styles/component.css-old~~

よく使うといっても、各ブラウザのデフォルトスタイルの差異を無すのと同時に各要素の基本的な振る舞いを定義した CSS ファイル (NUKAMISO - ぬかみそ CSS) があるので、そんなにコンポーネントが用意されているわけではありません。そう、いまのところ必要な分だけ。必要になれば追加すればよし。また、デザインはテーマ CSS ファイルで行えばよいので、各コンポーネントは完全な装飾を提供しません。この辺りの詳細は CSS を分けて管理する方法を考え実践した様子をまとめた記事に書いています。

また、リンクしている CSS ファイルはそのままご利用いただいてもかまいませんし、カスタマイズの骨子としていただいてもかまいませんので、利用の際にも以下の記事を参考にしてください。

実はまだ内容は足したり消したり、見た目を意識しすぎてしまっているのが気になるので class の名前を変更したり、中身をぐりぐり入れ替えたりと暇を見つけては変更しているのだけれど、ひとまずはこの辺で一度、一部をのぞいてできる事とやり方をまとめておきます。気づいた事があれば是非コメントなどでフィードバックをいただければと思います。

順不同、序列リストをインライン表示

順不同リスト (ul) または序列リスト (ol) をインライン表示させたい場合に値が inline の class 属性を付与します。順不同リストでのサンプルは以下になります。

<ul class="inline">
  <li>list 01</li>
  <li>list 02</li>
  <li>list 03</li>
</ul>

要素の中でテキストを画像に回り込ませる

2xup.org でもよく利用しているテキストを画像に回り込ませたい場合に利用します。例えば段落に値が image と left の class 属性を付与すると、その要素にコンテナされた画像は左側に寄り、同じ段落に含まれるテキストは画像の右側に流し込まれす。また、class の値が image と right の場合はその要素にコンテナされた画像は右側に寄り、同じ段落に含まれるテキストは画像の左側に流し込まれす。

画像を左寄せにテキストは画像の右側に

<p class="image"><img src="sample.png" width="150" height="150" />例えば段落に値が image と left の class 属性を付与すると、その要素にコンテナされた画像は左側に寄り、同じ段落に含まれるテキストは画像の右側に流し込まれす。</p>

そもそも画像を段落に含むべきなのか、また class の値とかどうなんでしょう。と悩みもまだあります。是非フィードバックいただきたいです。

順不同リストをタブナビゲーションのように表示

順不同リストをタブ型のというか、横並びでテキストではなく領域でクリックできるメニューとして利用したい場合は、値が tab の class 属性を付与します。2xup.org でも、タイトルの次にあるナビゲーション、個別記事ページのコメント・トラックバックへのリンク部分で利用しています。

<ul class="tab">
  <li><a href="http://2xup.org/about" title="著者について">about</a></li>
  <li><a href="http://2xup.org/log/" title="2xup.org">archives</a></li>
  <li><a href="http://feeds.feedburner.com/2xup" title="Subscribe to this blog feed">Subscribe to This Blog Feed</a></li>
</ul>

リスト項目 (li) にアンカー (a) が内包されている必要があります。序列リスト (ol) で同じ装飾を行う考えは今の所ないので外しています。

その他の定義やあれこれ

この他には俗にいう clearfix や display: none; とかしているのや検索フォーム周り、サイトでよく使うテキストの装飾なども含んでいます。clearfix に関して参考になるページへのリンクを用意しておきます。

またこの記事を書く少し前までコンポーネントとして用意していた定義リスト (dl) で定義用語 (dt) と定義記述 (dd) を並列に並べるものは、幅などに制限があるため component.css では定義せず、テーマ CSS で定義するようにしました。~~表のように見せたいという時は~~書く内容が表ならば、表 (table) を使うべきですね。

この方法で参考になるサイトへのリンクも用意しておきます。どちらも例と説明がしっかりしていて良い見本になりました。