hamashun.com

超々有名人である上ノ郷谷さんややまざきさん が、CSSを記述する際のガイドラインを書いてらしたので、マネしてみようかと思います。
以下は最も新しい制作物である、このサイトでの記述方法です。

昨日は、CSS Nite Vol.11に行ってきました。
今回は第1部がロクナナの中村享介さんによる、『優雅なWeb制作』。
第2部がお馴染みスイッチの鷹野雅弘さんの、『クロスブラウザを実現するCSSファイル管理』でした。
（現在第2部が、CSS Niteのサイトにフォローアップ掲載されています）

今日は、CSSのテクニック的な事を書こうと思います。
ネタはたくさんあるのですけど、いざWebに公開するとなると中々勇気が持てなくて、これまで余りそういった事は書きませんでした。
でもそれじゃあ折角Blogを公開している意味が無いので、今日からモリモリ書こうと思います。 へっぽこですけど、どうぞお付き合いください。

MacIE5.xに対するCSS Hackで、バックスラッシュハックという物があります。
例えば、

.div {
	color:#f00;
	/*\*/ color:#00f; /* */
 }

と、このように記述する事で、MacIE5.xは文字色が赤になり、それ以外のブラウザでは青になります。
今日は、その仕組みについて考えてみました。
やっぱり、特殊な技術を使うなら、『なぜそうなるのか』を知っておきたいと思うので。

ブログにコードを貼り付ける方法で悩むの巻
pre要素へのスタイル指定
Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
ソースを貼付ける50の方法
pre 要素のスタイル定義とマークアップ

Blogにコードを貼り付ける際のアレコレが、あちこちで話題に上っています。
これまでに余り情報を見つけられなかったので、とても参考になりました
折角なので、僕もひとつ書いてみたいと思います。

昨日のDaily Linkでもご紹介しましたTouchUpWeb プロジェクトですが、各所で物議を醸しているようです。
このプロジェクトを簡単に説明すると、
「あーもー、いつまで経ってもWeb標準普及しねえよ！ IEでしかまともに表示できないとか、それってどうなんだ！ えーいもうこうなったら力技で勝手に直してやる！」
という感じでしょうか。
少し難しく説明すると、
「Firefoxの拡張機能を使って、崩れているデザインを、専用のサーバからスクリプトを送信して正しく表示する」
となりますか。

そんな一見すると、中々面白そうなプロジェクトですけど、色んな方のBlogを見た所、現在は賛否両論様子見が入り混じっている印象です。

今回は、テーブル風のデザインを、テーブルを使わないで実現する方法を紹介します。
ただ、ここで断っておきたいのは、僕は「全てのテーブルを認めない」、とは思わないという事です。
例えば、価格の一覧表や電車の時刻表など、表として使う分には書式上でも構造上でも、全く問題が無いからです。

ではなぜ、テーブルを使わないテーブル風デザインを紹介するかと言うと、表としての意味は持たないけど表っぽいデザインにしたい場合の為です。
例として上げると、このサイトのWorkをSanctuaryデザイン（footerのリンクで切り替え可能です）で見て貰えば解りやすいかと思います。
では、実際にどのようなコードなのか解説したいと思います。

CSS Nite Vol.12に行ってきました。
今回はVOX、WordPress、Fireworks 8と、盛りだくさんの内容でした。
以下長文です。 まとめ能力の欠如が見られます。

• Class名とID名の命名規則(1)
• Class名とID名の命名規則(2)

Class名やID名を付ける時、それも2単語以上で構成される名前を付ける時には、どんな規則で付けていますか？
今日は、Class名とID名の命名規則に関して書いてみようと思います。

CSSを利用してテキストを隠し、代わりに画像を配置するテクニックを一般に画像置換と呼びます。
このサイトのナビゲーション部分もそれを利用しています。
でも、このテクニックには、注意するべき点がいくつかあります。
それはSEOスパムの問題であったり、画像を表示しない設定をしている環境での問題であったりするのですけど、今回は見た目の問題を取り上げてみたいと思います。

具体的にどういった問題なのかと言うと、いろいろなサイトを、特にFirefoxで見ていると、ナビゲーションをクリックした瞬間に、謎の点線が横（多くの場合左方向です）に延びているのに気づいた事はないでしょうか？
これは決して見栄えが良いとは言えません。
この問題は、CSSとXHtmlに数行追加するだけで解決する事ができます。

• CSS Nite LP, Disk 1に行ってきました（1）
• CSS Nite LP, Disk 1に行ってきました（2）
• CSS Nite LP, Disk 1に行ってきました（3）

昨日の続きです。
会場では青山ブックセンターが出店してて、講演される方の著書などを置いていました。
パラパラっと見てみたのですけど、やっぱり買う時は本腰を入れてチェックしたいので、特に買い物はありませんでした。

他にも、FirefoxやOperaの人がブースを出していました。
ニンテンドーDSのOperaは触ってみたかったのですけど、時間が無くて断念。 残念。

• CSS Nite LP, Disk 1に行ってきました（その1）
• CSS Nite LP, Disk 1に行ってきました（その2）
• CSS Nite LP, Disk 1に行ってきました（その3）

3日間もかけたレポートも、いよいよ最後です。
って言うか引き伸ばしすぎです。 ごめんなさい。

時間が結構押していたので、休憩時間は当初の予定から大幅に短縮されて約15分でした。
お腹が空くと眩暈がする体質の僕は、全力疾走で近場のコンビニへ行って、肉まんを胃に詰め込みました。
そして戻ったら、サービスで用意されたタリーズコーヒーが完売していました。 ショック。

mixi内の記事で申し訳無いのですけど、Webデザインコミュニティ内のタグ・用語 何て読んでます？？というトピックが中々に面白いです。
これはhrefとかpngとか、人によって読み方が違いそうな単語の、自己流の読み方を晒すトピックなのです。

僕もトピ内で一度書いてるのですけど、今日はマイナーなタグも探して、まとめ直してみようと思います。

• Class名とID名の命名規則(1)
• Class名とID名の命名規則(2)

前回のエントリでは、IDやClass名に使用する文字について書きました。
今回は、主にID名に関する内容です。

最近の傾向として、CSSを理解しない昔のブラウザは、何の対策もしないで放置するという流れがあるようです。
確かに今更IE3やNN4を使っている人は相当少ないですから、それもアリと言えばアリかもしれません。

でも、ほんの少しの手間で保険がかけられると思えば、やっておいて損は無いと思うんですよね。
デメリットも殆ど無いですし。
と言う訳で、今回は昔のブラウザを対象にしたCSS対策です。

先日の旧式ブラウザのCSS対策というエントリでは、Ver,4世代以前のブラウザでは、全ての外部CSSをカットするという手法を載せました。
しかし、真っ白い背景に真っ黒い文字だけというのは、さすがに寂しすぎると感じる事もあります。
そんな時は、Ver,4世代のブラウザのみを対象にして、最低限のスタイルを指定してみませう。

2007 05 15 修正および追記

子要素（ここでは画像）をfloatさせると、親BOX（ここではグレーの部分）の高さは親BOXの内容（ここではテキスト）に沿ったサイズになります。
その結果、このスクリーンショットのようになってしまいます。
子要素（画像）の下部にまで背景色を表示させたい場合などに不都合が生じてしまいますので、これを解決する方法を3種類ご紹介します。

なお、この現象はバグではなく、CSS2の仕様上で正しい動作となっています。

text-indentや他の方法でテキストを追いやって、代わりに画像を配置するテクニック、いわゆる画像置換やFIRと呼ばれるテクニックがあります。
これは音声ブラウザにおいても情報が読み上げられる事から、高いアクセシビリティを持つテクニックとされています。
主にナビゲーションなどで利用されていますが、最近では徐々に使われなくなってきているとか。
恐らくその理由は、CSSが有効で画像がオフの場合に、何も表示されないという点からだと思います。
まあ、そんな環境がどれだけあるのかは分かりませんけれど。

今回は、極力アクセシビリティを高めつつも、それなりにデザインを保てる方法をご紹介します。

Operaって、妙な所で妙な動きをしたりしませんか？
お前の技術が未熟だ、と言われればそれまでなんですけど、日本ではシェアも低くて情報も少ないかなあ、なんて。

そこで今回はOperaに使えるCSS Hackをご紹介したいと思います。
ただし、書式上は正しくない物なので、ご利用の際は用法容量を守ってお使いください。

WWW WATCHさんの角丸に関するあれこれを見ていて、そういえばcontentプロパティを使う方法があったなーと思い出したのでエントリします。
この方法を使えば、XHtml側に余計な要素を追加しないで、かつCSSのみで角丸が可能になります。

XHTMLやCSSに限った話ではありませんが、専門用語というのは難しいものです。
同じ意味を持つ単語でも、人によって英語を使ったり日本語を使ったりするので、CSSの勉強を始めた頃はよく混乱しました。

そこで今回は、その辺りを再確認も含めてまとめなおしてみました。
別にクリスマスイブが暇だった訳じゃありませんよ。 決して！

主に自分の為のメモ。
CSSのmarginでわかりにくいのが、縦方向の解釈。 上下に隣接するBOX同士でどう処理されるか、という部分ではないでしょうか。
CSSでサイトをコーディングしていると、あれっと思う事もしばしば。

もう、class名やid名で悩まないんだからっ！！｜CSS HappyLifeとRED LINE:class名、id名の付け方に触発されて、また丁度良いタイミングで職場の話題にも上っていたので調べてみました。
古いブラウザが_（アンダースコア）の付いたclass名、id名を認識しないのはなぜか？ という話です。

font-sizeプロパティの値にsmallなどキーワードを指定すると、ブラウザによって扱いが異なる場合があります。
具体的には、同じ値を指定していても、WinIE5.xやIE6の互換モードでは、FirefoxやIE6の標準モードよりも大きい表示になってしまいます。

今日はその辺りを調べてみました。
サンプルを交えた解説と、例によってウンチクもありますｗ

ふと気になって、バックスラッシュハックでググッたら、以前書いたエントリが一番目に出てきました。 やったね！
なので調子に乗って、関連した記事を書いてみようと思います。 The・2匹目のドジョウ。

内容は、バックスラッシュハックのバックスラッシュハックたる所以でもある、バックスラッシュエスケープです。
そうです。 ウンチクです（またかよ）。
いやでも、技術を使うなら、「なぜそうなるのか」という理由は知っておいた方が良いと思うんですよね。

CSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::が非常に便利だと感じたので、Shun流の処方箋もメモしてみます。
・・・・・・とか言っておきながら、STOPN' LISTENさんと重複している箇所もあったり。

滅多に見かけないプロパティに、directionプロパティというものがあります。
テキストの表記方向を、左から右に。 もしかは右から左に指定する際に使用します。

「おいおいボーヤ、テキストは左から右に書くに決まっているだろう？」と思うかもしれません。
しかし世界は広いもので、アラビア文字なんかは右から左に書くのです。
縦書きだったら、日本語も右から左ですね。

まあ確かに、殆ど使う機会の無いプロパティだと思います。
でも先日、とあるWebアプリで使われているのを見つけてしまったので、今回ネタにしようと思いました。

class名はどのようにして付けるべきか？
現在は「見た目ではなく内容に沿って付ける」という意見が一般的なようです。
ところが昨日、class は要素の分類 - Weblogという記事を目にしました。

そういう考え方もあるのかー、と思いつつ、この件についてちょっと視点を変えて考えてみました。

CSSハックとしても、かなり古い部類に属するTantek Box Model Hack。
バリデータを通過していながらも、近頃はIE5用の指定をまとめて別ファイルに移す、いわゆるPass Filterにお株を奪われていました。
しかし、そのPass Filterがバリデータを通らない事から、今再び見直してみたいと思います。

シェアがかなり少なくなってきたとは言え、規模の大きなサイトではまだまだ求められるのがMacIE5の対応。
確かに、iMacを買ってそのまま使い続けているライトユーザーなんかは、未だにIEなのかもしれません。

しかし、フルCSSでサイトを制作する際には壁となるのも事実。
今回は、就職してから今日までの一ヶ月で分かってきた事をメモしておきます。

行ってきましたXHTML+CSS (r)evolution, 2ndに！
最近はCSS niteにも行けてなかったので、久しぶりのイベント参加です。

XHTML+CSS (r)evolutionの講演は、名著Web標準の教科書を執筆された益子さんです。
Web標準の教科書（以下コロコロコミック）や雑誌Web creatorsの連載には、いつもかなりお世話になっているだけに期待も大です。

今回のお題はCSS3のカタチとナカミ。
CSS3の情報で日本語の物はまだまだ少ないので、これはかなり嬉しいです。

関連リンク

そろそろCSSハックの良し悪しについて考えてみる（書式編）

そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き

Re:CSS の用途をわざわざ (X)HTML に限ることはない

スターハックに端を発するアレコレ

スターハックに端を発するアレコレ まとめ編

フルCSSでサイトを制作する際に、まだまだ避けては通れないのがCSSハックです。
巷には色んなハックが溢れていますが、今回は良いハックと悪いハックを『書式』をキーにして考えてみたいと思います。

なお、ハックはあくまで最終手段であり、使わないにこした事は無いという事を、事前に書いておきたいと思います。
また、一部CSSハックと呼ぶには語弊があるテクニックもありますが、ブラウザ実装の差異に対する技術、といった意味合いで、この記事ではハックで統一しています。

関連リンク

そろそろCSSハックの良し悪しについて考えてみる（書式編）

そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き

Re:CSS の用途をわざわざ (X)HTML に限ることはない

スターハックに端を発するアレコレ

スターハックに端を発するアレコレ まとめ編

前回のそろそろCSSハックの良し悪しについて考えてみる（書式編）では、正しい書式である事に重点を置いて考えてみました。

しかし、実際の業務、それも複数人が関わる際には、そればかりを重視してもいられないというのが実情だと思います。
そこで今回は、管理のしやすさを中心に考えてみます。
なお、今回もハックと呼ぶと違和感を感じる部分があるかもしれません。
ブラウザ実装の差異に対する技術、といった意味合いで、この記事でもハックで統一しています。

関連リンク

そろそろCSSハックの良し悪しについて考えてみる（書式編）

そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き

Re:CSS の用途をわざわざ (X)HTML に限ることはない

スターハックに端を発するアレコレ

スターハックに端を発するアレコレ まとめ編

zcxv.netの松澤さんからそろそろCSSハックの良し悪しについて考えてみる（書式編）に対する言及トラバをいただきました！ ありがとうございます！
若干浮かれつつも緊張しております。 粗相のないようにしないと。
CSS の用途をわざわざ (X)HTML に限ることはない - Scribble - zcxv.net

関連リンク

そろそろCSSハックの良し悪しについて考えてみる（書式編）

そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き

Re:CSS の用途をわざわざ (X)HTML に限ることはない

スターハックに端を発するアレコレ

スターハックに端を発するアレコレ まとめ編

kuruman.orgのKurumaさんからCSSはHTMLだけのものじゃない (kuruman.org > Kuruman Memo)というツッコミを頂きました。 ありがとうございます！
非常に勉強になった反面、新たな疑問も生じたのでエントリ。

ここでのポイントは、Kurumaさんの記事タイトル通り、CSSはHTMLだけのものじゃないという事。

関連リンク

そろそろCSSハックの良し悪しについて考えてみる（書式編）

そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き

Re:CSS の用途をわざわざ (X)HTML に限ることはない

スターハックに端を発するアレコレ

スターハックに端を発するアレコレ まとめ編

Kurumaさんに再ツッコミ頂きました！ 飲み込みの悪い子でホントすみません。
おかげさまで何とか理解できました（できたはず）。

今回のエントリは、割と自分用のまとめ記事です。
文章化すると、再確認になっていいってじっちゃが言ってた。

サイトリニューアルについて色々と考えています。
目的というか目標をいくつか設定しているんですけど、その中の一つが「読みやすいデザイン」という事。
やっぱりBlogがメインコンテンツですしね。

と言う訳で、BlogやWebサイトの、テキストの読みやすさについて考えてみました。 文章の素人なりに。
素人の言う事ですから、あんまり真に受けない方が良いです。 多分。

Vistaの発売に伴って、font-familyにメイリオを追加しているサイトをいくつか見かけます。
でも、XPのFirefoxなんかで見ると、アンチエイリアスが効いてなくてジャギジャギに表示されてたりするんですよね。

他にも、font-familyの値としてメイリオとMeiryoなど、指定の仕方もサイトによってまちまちだったりします。
これはどういう事なのかな、と思ったので、少し調べてみました。

メモ的エントリ。
スタンドアローン版IE5.5で、CSSのコメントが一部位置にあると、そのブロックが無視されるぽいです。

.hoge,/* コメント */
.huga {
 color: red;
}

具体的にはこんな感じ。
セレクタをカンマで区切って複数指定する際に、カンマの直後にコメントを入れると発生するようです。
制作途中にちょっとしたメモを書いている時に発生しました。

ただ、何しろスタンドアローン版での問題なので、PC環境などによる物かもしれません。

Daily Link

Note:

今日は会社の新人さん歓迎会があったんですけど、そこで先輩から「最近のキミのBlog、はてブを意識しすぎてるんじゃないか？」とツッコまれました。

え！？ 自分では割とナチュラルって言うかむしろ、ちょっとビビッてるくらいっス･･････！
と思った所で、逆にそっち側に意識しちゃってたのかなー、なんて思ってみたり。 いやん。

ちなみに、飲み会はつつがなく終了しました。

概要

Conditional Comments（条件付きコメント）は、IEのHTMLサイドの独自拡張です。
独自拡張、と聞くと眉をひそめる人も多いですけど、まあちょっと聞いてください。 使いようによっては便利かもしれません。

使い方は簡単。 コメント内に、IEの振り分け用キーワードを記述するだけです。
該当のバージョンのIEはその内容をコメントではなく通常のデータとして解釈し、それ以外のブラウザは単なるコメントとして扱います。

単なるコメントとして扱うという事は、バリデータに通るという事です。
ですが、独自拡張という呼び方から誤解されがちです。

使いどころ

head要素内でCSSの振り分けに使われる事が多いのですが、あくまでコメントなのでbody要素内でも使えます。
サンプル
まあ、メインの用途はCSSの振り分けでしょうし、この記事でもそれを主に想定しています。
ただ、知識として一応。

メリットを考えてみる

• バリデータに通る
• CSSファイルを汚さずにブラウザの振り分けができる
• 対応ブラウザから外す場合も比較的ラク（ページ数などによる）

バリデータに通るのは、使う時の理由（言い訳）としては中々です。
CSSファイルはIE用のハックで汚れがちなので、それらをまとめて別ファイルにできるのも良い感じ。

デメリットを考えてみる

• メンテナンス性が心配
• HTMLが汚れる
• 独自拡張ってどうなん？
• つーか ピー なブラウザを作ってる奴に従いたくない

こんな感じでしょうか。
一つ目のメンテナンス性というのは、（特に）ページ数の多いサイトの場合、条件を変更したり、あるいはConditional Comments自体を削除する時が面倒という物です。
これはphpやTemplate Toolkitでincludeさせれば、わりと解決できます。
残りの3つは気持ち的な問題だと思います。 HTMLが汚れるとは言ってもバリデータは通過する訳で。
バックスラッシュハックがアリなら、Conditional Commentsもアリかな、と最近思っています。

スタンドアローン版IEでの対応状況

スタンドアローン版IEだとConditional Commentsは無視される、という話を聞くんですけど、何故か自宅の環境だと認識されます。
うーん、環境の違いでしょうか。
ソースは Lucky bag::blog: IE7 と CSS ハックと条件付コメント です。

まとめみたいなもの

こうして見てみると、こだわりや思想を別にすれば「案外良いかも」と思えてきます。
IE開発チームもハックよりConditional Commentsを使うべしとしているので、将来的にも一応安心。 一応。

とは言え、CSSハックもそうなんですけど、ブラウザの振り分けは最終手段にしたいですね。
それにしても、どうせならCSS側でも同じような事ができればいいのになあ（候補にはあったらしい？）。

補足：

サンプルページのConditional Commentsは、条件付コメント(Conditional Comments)実験ページを参考にしました。

デザイン的にフォントサイズを小さくしたいんだけど、そうするとクリック領域が小さくなって困る･･････。 そんな時に使えるTipsをご紹介します。

サンプル

まあ、仕組みは超簡単で、a要素にpaddingを指定するだけです。
同時に:hoverに背景色（background）を指定しておくと、視覚的に分かりやすくて良いかもです。

何故かSafari2でピーカブー・バグのような物が発生したのでメモ。
詳しい発生条件は不明なものの、やはりfloatが関係している模様。

IEと同じく、floatしている要素にposition: relative;を指定する事で修正できました。

CSS HappyLifeさんで、コーディング大会みたいなのやりたいなぁ～というエントリが公開されてから、物凄い勢いで反響が集まっています。
自分の実力を試せるのはもちろん、他の人のコーディングを見られるのも凄く勉強になりそうですよね。

これから仕事が忙しくなりそうな予感がしますけど、「なあに、かえって耐性が付く」という心意気で是非参加したいでっす。

CSS Nite Vol.18の懇親会で行われたiwaimさんのプレゼンで、headerの部分は本当にidでいいの？という問いかけがありました。
多分、多くの人が行っているclassとidの使い分けは、複数回登場するかしないかだと思うんですけど、それはどうやら間違った基準なようです。

仕様書は？

そもそも、仕様書の定義としては、二つの違いはどうなっているのでしょうか。

id = name [CS]
この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。
class = cdata-list [CS]
この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。

The global structure of an HTML document (ja)（HTML 4.01 仕様書邦訳）には、このようにあります（英語版は本人が読めないから勘弁な！）。
また、次のようにも書いてあります。

一方のclass属性は、ある要素について1つ以上のクラス名を割り当て、この要素が当該クラス/クラス群に属することが示され得る。

つまり、idは一意な名前を付ける場合に使います。
classがちょっとややこしい書き方（仕様書ってどうして解りにくい書き方なんだろう！）なんですけど、2つめの引用部分を見ると（そしてiwaimさんのプレゼンを見ると）、要素を分類する為に使える属性である事が解ります。

一意の名前と要素の分類。 これがclassとidの違いのようです。
わかりやすい例としてiwaimさんのスライドにも引用されていた、徳保 隆夫さんのTips/WebPage/class と id の違いとは？より引用します。

あなたの家で飼っている犬を、より細かな分類で雑種犬と呼ぶか、唯一無二の名前でポチと呼ぶか、そういう違いなのです。

あー、なるほど。 っていう感じです。
コーダーはclassでShunはid。 スターバックスはclassでスターバックスラテはid。 そういう事なようです。

となるとheaderは？

そう言われると、headerはclassな気がしてきます。 て言うか、そうなるとcontainerやmainColumnもclassになるような雰囲気です。
文書ツリーで親要素っぽい物にはidを振りがちですけど、むしろそれは逆なのではと。

header
│
│
├───h1
│
│
├───description
│
│
└───nav
　　　　├Home
　　　　├Blog
　　　　└Link

mainColumn
│
│
（略）

こんなツリーがあった場合には、「headerという分類に属するh1」とか、「headerに属するnavに属するBlog」という感じになるのかな。
つまり、idはこまかーい所まで突き詰めた名前で、classは大雑把な部分での名前とでも言いますか。

あ。 今ちょっと解りやすい例を思いついたかも。
classという袋の中に、idという品物が入っているみたいな？
これをheaderという袋の中に、h1やdescriptionなど各コンテンツという品物が入っていると置き換えれば･･････ほら！

ただしその他の点では？

ここまでは文書としてのclassとidの使い分けを考えてみました。
でも、特にidは文書としてだけではなく、プログラムで操作する時やアンカーを貼る時にもよく使います。
そうなると、headerにページ内リンクを貼る時にはちょっと困った事になります。

まあでも、idにせんが為に文書を変えたりするのは本末転倒だと思いますし、この辺りはアンカー用としてheaderにclassとidの両方を指定しても問題無いんじゃないかな、と思います。

ちなみに、Shunさんの職場ではidはプログラマの物。 classはコーダーの物。という区分けになっています。 これは業務を円滑にする為の判断なようです。
ただ、昨日のちょっとしたMTGでは「言ってくれれば状況によっては対応するよ」という話もありましたし、これが絶対という訳ではないようです。

まとめ

という訳で、一意の要素にはidを、グループ化する要素にはclassを。
更にWebサイトの機能として必要な部分にはidを、というのが一つの答えかな、と思いました。

おまけ

でもま、headerにidが間違いかと言うと、必ずしもそうとは言えないかと思います。
文書によっては一意かグループ化か、判断が難しい（人によって異なる）事もあるかと思いますし（例えば、ニュース記事での『東京都渋谷区に住む男性（無職 38才）』や『バールのような物』など、その記事内では一意な気もするけど、視野を広げるとグループとも取れる）。

実際の業務でどこまで追求するのか、という話もありますね。
経営側からすると、「どっちでも良いから早く仕事しる」って感じかもしれませんし。

どんなはてブコメントでもポジティブに受け取れるユーザーCSSを作ってみました！
昼食のたらもピザパンを食べながら！

この辺で試してみるとわかりやすかもしれません！

IEは未対応です！
苦情は受け付けません！ もちろん良い意味で。

Shunさんが働いているlivedoorは、「デザイン」、「マークアップ＆CSS」、「プログラム」がほぼ完全に分業されているので、それぞれの作業に集中する事ができます。
ただ、それにはデメリットもあると感じています。 他者の分野について触れる機会が少なくなってしまうんですよね。

コーダー改めマークアップエンジニア通称MEの視点からちょっと思ったのは、Blogのデザインを、もうちょっと遊んだら面白そうだなー、とか。
CSSだけでできるちょっとしたデザイン要素とか、CSSを使う立場じゃないと逆に思いつかなかったりするのかも？ と思ったりも。
なので今日は、そんなちょっとしたTipsをご紹介します。

リンクの下線をデザインする

サンプル
リンクの下線と言えば、良く見る直線が一般的ですけど、実は点線なんかも使えます。
これの仕組みはデフォルトの下線を消して、新たにborderプロパティで点線を指定するというもの。

もちろん、点線以外の線も使えますし、そもそも線以外のデザインもできます。 画像や背景色を使っても面白いかも。
その辺りの詳細は、実際にCSSを書く人と相談してみるのが良いと思います。 やっぱり良いモノって、良いコミュニケーショから生まれますよねｗ

フォームをフォーカスした時のデザイン

サンプル
このBlogのコメントフォームでもそうなんですけど、入力欄をクリックすると色が付きます。
このサイトはIEにも対応させるために（へっぽこな）JavaScriptを使っているんですけど、すみません使ってませんでしたorzIEを無視していいならCSSだけでもできます。

使うのは:focus擬似クラス。 コレをIE様は無視されあそばす訳ですね。
input要素やtextarea要素に、:focus擬似クラスでデザインを指定すればOKです。
これを工夫すれば、MacのSafari風のデザインを真似する事もできます。

ちなみに、Safariは「デフォルトのデザインが最も美しい」という自負があるからか（？）フォームパーツのデザインが効かない事が多いです。
これはこれで困ったちゃんですけど、確かにフォームに関しては、ユーザーが使い慣れたデザインがベストではあります。 デザインしすぎもよく無いんですね。

あとがき

今回はこの二つをご紹介しました。 タイトルに「その1」と付いていますけど、その2は思いついたり思い出したら、また書きますｗ

何やら偉そうにデザイナーさんへ提案のようなモノをしてしまいましたけど、逆に僕も他の分野の勉強もしないとなー、と思います。
IAやUIにも興味ありますし、簡単なJavaScriptを書けるようになったり単純なBBSを作れるようにはなりたい･･････。
うーん、1日が48時間あればいいんですけれどｗ

関連リンク

複数のclassをセレクタに指定する方法

複数のclassをセレクタに指定する際のメモ書き

複数のclassをセレクタに指定した際のIEのバグ

HTMLに複数のclassを指定する事、ありますよね。

<div class="sample code">

こんな感じの。
んで、CSS側で「sampleとcode、両方のclassに適合する要素」というセレクタを書くには、

div.sample.code {
 color: red;
}

こんな感じにすればOK。 もちろん仕様書にも書いてあります。
意外と見かけないから書いてみました。

関連リンク

複数のclassをセレクタに指定する方法

複数のclassをセレクタに指定する際のメモ書き

複数のclassをセレクタに指定した際のIEのバグ

先日の記事、複数のclassをセレクタに指定する方法の追記エントリです。
ちょっと条件が不明瞭なので、メモ書き程度にとどめておきます。
新たに判明した事実があったら、この記事を編集・追記します。

HTML

<div class="sample code">～</div>

CSS

div.code.sample {
 color: red;
}

このように、HTMLに書いたclassの順番とCSSで指定したclassの順番が異なると、IE6以下で指定がうまく適用されない事があるぽい。
ただし、サンプルのためのシンプルなファイルで試したら再現できなかったので、他にも条件があるのかも？

そもそも、現象が発生したのがスタンドアローン版のIEだったので、オフィシャル版でも同様なのか不明。

まあでも、HTMLの順番に習ってCSSを記述していった方が、可読性とかの意味でも無難だと思います。