論理構造を文脈に読み換えながら class 名を考える - 我的春秋
POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. posh - Microformatsより 基本的にはより論理構造を意識した class名をつけることが、今日のお話の目的なんですが、semantic-class-names のリンク先にない新味は、論理構造を文脈に読み換えながら class 名を考えるという点。（ただし、普段から意識的に文書全体の構造に照らして class名をつけている方には、それほど新味はないかも。） 例によって
5W1H のマークアップ 1: When（日時） - 我的春秋
ちょっと思い立って、5W1H の XHTML マークアップの手段について、少しずつ整理してみることにしました。 理由や意義については、また別エントリーを立てるとして、とりあえず今日のところは、When?（いつ？）...つまり、日時のマークアップ手段から。 (X)HTML meta name="date" syntax <meta name="date" content="[W3C-DTF]" /> [W3C-DTF]: YYYY-MM-DDThh:mm:ssTZD（≒ ISO 8601。必要に応じて、秒・分・時・日・月は省略可。） [TZD]: ±hh:mm | Z（タイムゾーン。日本なら "+09:00"。UTC 協定世界時なら "Z"。） 追記: W3C-DTF のバリアントと (X)HTML における %Datetime について 北村さんよりご指摘をいただきまして（→ はてブ コメ
我的春秋: パンくずリストのマークアップ
ちょっと前に パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種（CSS HappyLife）というエントリーが盛況でしたが、今日はパンくずナビゲーションの論理構造面を補強する意味も込めて、(X)HTML マークアップの例を、サイト構造やサイトの目的に応じて、いくつか挙げてみました。CSS の話まで入れると長くなるので、今回は（も？）(X)HTML マークアップに話を絞ります。CSS については、特にセレクタまわりが結構 変わってしまいますが、ひとまず、HirasaWa さんのエントリーなどを参照してください。（気が向いたら、別エントリーを立てますけど、実際に書くかどうかは未定。） 階層型構造（tree structure） ［2006-02-11 追記］ 石川一靖さんより、「セマンティクスを重視するならa要素にrel/rev属性を加えてリンクの関係性を明示するのが
ink 要素をナビゲーションに利用することの注意点（改訂）：我的春秋
［2007-02-08 18:00: 内容を増訂しました。］ パンくずリストがベストとは限らない（WWW WATCH）で、link 要素を使ってページ間を関連づけるという方法が解説されています。本文でも指摘されているように、ブラウザの実装上の問題で、現実的にはナビゲーションとしては使えませんけど、セマンティックウェブという観点で見れば、むしろパンくずリストなどよりも、よほど重要な要素には違いないので、僕も興味深く拝見させていただきました。（「参考までに」で済ませてしまうのは、ちょっともったいないくらい。） 実装面について 機能として標準実装されている Opera に加え、Firefox 向けの可視化 Tips が FirefoxでOperaのようなlink要素を表示させる「Mozeraナビ=叢ナビ」 (インターネット帳面)と、link 要素を可視化してみる（double-team.org）
配色管理用の CSS をモジュール化する - 我的春秋
今日は再現性の高いスタイル（プロパティの集合）ごとに、CSS セレクタをグループ化して管理する事例として、ちょっと前から制作中のサイトで実践している、配色管理の方法を紹介してみようと思います。（とっくに似たようなことを実践されている方も、きっといらっしゃると思います。お気づきの点があれば、細かいことでもご教示・ご指摘いただけましたら幸いです。） （なんだか、CSS が主題のエントリーって、随分、久しぶりのような気がする..。） 配色管理モジュールの作成方法 色に関するスタイルをすべて、この配色管理モジュールに集約する。 別出した color.css は、@import で上位 CSS ファイル（もしくは HTML ファイル）から読み込ませるようにする。 セレクタは、同一スタイルごとにグループ化する。（注意: CSS セレクタ、グループ化の落とし穴） セレクタは、浅い階層の一般的なものを先に
我的春秋 コード共有のためのネーミングルール
最近、CSS の使いまわしなどを視野に入れ、一部で class名や id名の共有というテーマへの関心が徐々に高まりつつあるような印象です。microformats なんかも、その流れのひとつといえるでしょう。 Naming conventions table（And all that Malarkey） もう、class名やid名で悩まないんだからっ！！（CSS HappyLife） (X)HTML の id/class における命名規則（purprin さん CSS Flight プレゼンスライド） 名前の共有はコードの共有のための（複数人で同一コードを編集・転用する）重要なファクターのひとつですし、非常にいい傾向だとは思うんですけど、実際につけられている名前を見てみると、シブい顔をせざるを得ない事例が結構あるようです。 コード共有のためには避けたい命名事例 構造ではなく見栄えで命名して
制作現場の声が届かぬ IE@Microsoft - 我的春秋
変数名の命名規則 (zonelog) Neko？プログラミング言語？？（メモ：ブラウザのデフォルトCSS） (javaプログラマ日誌) HTML イズ ふりーだんｍ！！ (想始創愛) h1をはじめ、見出し要素に関する議論が盛んになっている件 (STOPN 'LISTEN) 【sIFR】…でletter-spacingを効かせる方法。 (BLOG dot USK dot CC) [Web]Re: Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか? (TRANS) CSS Nite LP, Disk 3 (hemiolia.com) 一歩先のWeb標準 ♯2 (withD（ウィズディー）) 一歩先のWeb標準 ♯1 (withD（ウィズディー）) CSS Nite shuffleが終了しました。 (CSS Nite公式ブログ)
CMS の見出しレベルに悩む - 我的春秋
（追記: タイトルをより内容に合うように変更しました。本文も若干修正しましたが、内容に関わる変更はありません。） 最近、CSS よりも、関心が XHTML に傾きがちな管理人です。(^ ^;) 今日は、目下、裏でせっせと制作中の MovableType サイトのコーディングからのネタです。 このココログもそうですけど、ブログツールを含む何らかの CMS を使っていると、「幾つめの見出しレベルからスタートしたらいいんだ？」、「別のサービスから引っ越したら、見出しレベルが１つズレちゃった」、「文書構造をカスタマイズしたので、これまでの見出し要素のレベルを調整しないといけないよな..」。そんなことで困った経験とか、過去にありませんか？ CMS 固有の悩み 実は見出し要素（h1, h2, h3...）のマークアップって、CMS を使っていると、思いのほか厄介だったりします。どう厄介かというと、普段
S i M P L E * S i M P L E 炎上後のすばらしい対応 - 我的春秋
先日、マズい CSS Tips を紹介してしまって荒れた、百式でお馴染みの田口元さんの S i M P L E * S i M P L E のお話。といっても、批判ではなく、むしろ危機管理の好例としてのお話です。実際、最初にエントリーを見たときには、僕も目を疑ったのですが、荒れた後の対応のすばらしさに、いたく感銘を受けました。いっそ、diff （差分を取るための Unix コマンド）でも取っておきたかったくらい。(^ ^;) 追記で謝罪、読者にも注意を喚起 追記（2006-11-27）: たくさんの方からコメントいただきありがとうございました。アクセシビリティ、SEO等の観点からこの手法にはいろいろ問題があることがわかりました・・・軽率な掲載でしたが勉強になりました・・・。ご利用される方はコメント欄をご覧の上、欠点がわかった上でご利用ください。 批判を封殺せず、むしろ読者に参照を促す 自分
abbr は本来 機械のための要素 —マークアップは誰（何）のためのものか？ - 我的春秋
さきの２つのエントリーと関連して。 略語に振り回される今日この頃 abbr の title 値を CSS でポップアップ abbr を使わずに直書きするのが最善？ ANOTHER PIECES（id:xcezx さん）の「abbr 要素 その2」というエントリーで、次のようなご指摘をいただきました。（id:xcezx さん、ありがとうございます。個人的にこういう前向きな批判や議論は大歓迎です！） 「CSSを処理しないテキストブラウザや音声読み上げブラウザでは、やはり略語のフルスペルは表示されないよね。」というのがユーザビリティ的な観点から、満点をあげられない理由。 ユーザビリティを考えるなら、小賢しいテクニックなど使わずに、"XHTML (eXtensible HyperText Markup Language)" とかした方がよっぽどいい気がする。 結論からいえば、この指摘は大変ごもっと
abbr の title 値を CSS でポップアップ - 我的春秋
折角、caramel*vanila の lomo さんが、前のエントリー（略語に振り回される今日この頃）にフォローアップして下さったこともあるので、僕の方でもちょっとだけ＋αをつけてみます。 略語に対してつける <abbr> 要素には、その原語なり原表記なりを title 属性の値に記述するのが普通です。モダンブラウザのデフォルト設定なら、<abbr> で括られた個所にマウスを乗せると、title 属性の値がツールチップの形で表示されます。 でも、ツールチップでは文字が小さくて見にくいですし、またマウスを乗せない限りは、何の略語であるのかが、結局わからないままです。そこで、その title 属性値（つまり原語）を CSS だけを使ってWebページ上に表示してみましょう。 原語（title 属性値）を括弧で括って略語の後に表示 :after 擬似要素を使うので、この方法だと残念ながら IE（
CSS Nite LP, Disk 1 レポート（その１） - 我的春秋
CSS Nite LP Disk 1 に行ってきました。 Web 関係でこのテのイベントに出席するのは初めてですが、さすがに花形業界だけあって、参加者も多くて、皆さん関心が高いですね。（ただ、個人的な印象としては、参加者の皆さん、質疑応答の時とか、少々大人しすぎるような気も..。(^ ^;)）少し遅れての入場になってしまったんですが、トップバッターの境さんがトラブルで遅れて来られるとのことで、入場したときには Mozilla Japan の瀧田さんがプレゼンをされてました。以下、発表順に僕の個人的な感想を残しておきます。 CSS Nite LP, Disk 1 レポート（その２） CSS Nite LP, Disk 1 レポート（その３） 瀧田佐登子: Webブラウザの歴史とMozillaの標準化への取り組み 瀧田さんのプレゼンは、途中からの（というより、ほとんど最後の15分だけの）聴講に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
我的春秋: タグクラウドのマークアップ