標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
CSS でよく使う装飾定義をコンポーネントとしてまとめる
2007-01-26T01:26:38+09:00 北村曉さんよりコンポーネントにまとめる際、それを或る一つのclass名に集約するという方向性についてご指摘いただきました。この記事をご覧いただく際、是非参照してください。 CSSでよく使う装飾定義をclass名でまとめることについて(徒書) また、いただいたフィードバックを元にもう一度考えを改めて記事を書きました。 『CSS でよく使う装飾定義をコンポーネントとしてまとめる』をもう一度 リニューアルの際に CSS の分割管理を実践したのだけれど、その分割した CSS の中によく使う装飾をコンポーネントとして class にまとめた component.css というのを作成しました。コンポーネントとしてまとめることで変化に強くなりメンテナンス性が上がるのだけではなく、同じような装飾をおこなうために何度も良く似たスタイル定義を行うということ
一行あたりの文字数を制限するリキッドレイアウト - 2xup.org
2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl
JSON feed を利用してエントリーに関連する del.icio.us ブックマークを表示 - 2xup.org
2006-12-25T21:18:10+09:00 面白いものを見つけたのだけれど、ブログに書いてもただの紹介記事に終わってしまいそうなものをタグ付けしてブックマークし、ブログ内の関連する記事のページに表示することにしました。ブログ記事につけたタグと同じタグのついたブックマークを表示できれば記事に関連するリンク集ができるし、自分自身へのフィードバックにもなって良いかも。ソーシャルブックマークサービス del.icio.us では JSON feed も提供されているので、それを利用することに。 JavaScript Object Notation - Wikipedia JSON Feed(川o・-・）＜2nd life) JSON Feedとか何とか(hail2u.net) JSONフィードとか何とか #2(hail2u.net) del.icio.us の JSON feed del.
CSS 分割管理の実践編
2006-12-13T09:47:51+09:00 数日前に行ったリニューアルでは、いくつか課題を設けました。ただただリニューアルしても張りがありませんし、ウェブデザインを行うものにとって自身のウェブサイトは自身の作品のようなものだし、好き勝手できるのも魅力なわけです。何回かの記事にわけて、リニューアルでおこなった作業をまとめていこうと思います。 前回、スタイルシートを分けて管理する方法をまとめるで CSS ファイルを分割管理するメリットや、どのように分割するか案を書いてみましたが、今回のリニューアルで実際に案を元に分割管理を実践し、結果はリストのようになりました。各ファイルの概要は案段階から変化がないので、そちら参照ください。以下のリストでは、テーマファイル以外の実際の CSS ファイルにリンクしています。 common.css component.css fonts.css scree
Japanese Traditional Colors
桜色 (さくらいろ) # 薄桜 (うすざくら) # 桜鼠 (さくらねず) # 鴇鼠 (ときねず) # 虹色 (にじいろ) # 珊瑚色 (さんごいろ) # 一斤染 (いっこんぞめ) # 宍色 (ししいろ) # 紅梅色 (こうばいいろ) # 薄紅 (うすべに) # 甚三紅 (じんざもみ) # 桃色 (ももいろ) # 鴇色 (ときいろ) # 撫子色 (なでしこいろ) # 灰梅 (はいうめ) # 灰桜 (はいざくら) # 淡紅藤 (あわべにふじ) # 石竹色 (せきちくいろ) # 薄紅梅 (うすこうばい) # 桃花色 (ももはないろ) # 水柿 (みずがき) # ときがら茶 (ときがらちゃ) # 退紅 (あらぞめ) # 薄柿 (うすがき) # 長春色 (ちょうしゅんいろ) # 梅鼠 (うめねず) # 鴇浅葱 (ときあさぎ) # 梅染 (うめぞめ) # 蘇芳香 (すおうこう) # 浅蘇芳 (あさすお
スタイルシートを分けて管理する方法をまとめる - 2xup.org
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
CSS Nite LP Disk 1 で行った microformats に関するセミナーの資料などを公開 - 2xup.org
2006-10-10T18:00:00+09:00 本日 CSS Nite LP DIsk 1 が行われました。現在会場の Opera ブースから更新しています。今回もたくさんの方にご来場いただいたようで、確かに会場はものすごい熱気でした。無料版の CSS Nite もそうですが、みなさんお熱い。『とったらんかい！』と言わんばかりの熱心な姿勢の方が多く、このような雰囲気の中、お話できて本当に良い経験になります。今回は長谷川恭久さんとのジョイントセッションでした。 CSS Nite 公式ブログ: CSS Nite LP Disk 1(CSS Nite 公式ブログ) 今回はこれまでの経験から、いくら簡単なことでも難しく伝えられると手を付けるのが遅くなったり、その簡単さに気づくのに時間がかかったりしてしまうので、microformats の魅力をできるだけ楽しく伝えられるように努力してみましたが
Transformer 機能を利用したプラグインで管理画面をカスタマイズ
2006-07-03T20:30:34+09:00 画像アップロード時に alt 属性を追加するプラグイン (Transformer) - 2xup imagealt プラグインの知らせのあと、Transformer を使えるように勉強していたところ、ちょうど『カテゴリーの出力先を指定できるようになったのは良いのだけれど、そのフィールドのラベルが出力ファイル名なのはねえ。』という意見があったので、それ plu ということで練習を兼ねて作ってみました。実は管理画面のテンプレートを書き換えて lib/MT/L10N/ja.pm に文言を追加すれば済むのだけれど、そういう変更はなんかチョット元のファイルを弄ってしまうのでアレですし…。そもそも Movable Type のコード自体をカスタマイズしてしまっているばかりにアップグレードが大変に感じてしまうのも嫌なので。あわせて 3.3 からプラグイ
スタイルシートを書く時のガイドライン - 2xup.org
2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ
flickr も microformats に対応 - 2xup.org
2006-05-04T02:57:06+09:00 いつのまにやら flickr の プロフィールページも microformats に対応していますね。hCard でマークアップされています。先日microformats に対応したサービスなどまとめで紹介した、Technorati の Contacts Feed Service や、Greasemonkey を利用すると hCard を閲覧したり、vCard に書き出してアドレスブックに登録できます。 hCard を用意してみよう！ せっかくなので、自分自身のブログやウェブサイトに hCard を用意してみると良いかもしれません。詳しい仕様は microformats の Wiki で確認できますが、address 要素を利用して、マークアップするサンプルを用意してみました。 <address class="author vcard">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちゃんと CSS するためのスタイルガイド入門