標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
見出しレベルを調整するモディファイアを追加する Movable Type プラグイン
2007-08-30T23:11:11+09:00 Movable Type 4 のデフォルトテンプレートでもそうなのだけれど、ブログ記事アーカイブテンプレートの見出しはブログ記事のタイトルが heading level 1 (h1) になっています。2xup.org でも、ドメインルート以外はそのページで一番大きな見出しにしたい部分、例えばブログ記事個々のページではブログ記事のタイトルを h1 としています。 しかしそれを前提にブログ記事を書いた場合、h1 がサイトのタイトルになる、もしくはブログ記事のタイトルが h1 以外になるページでは、ブログ記事に含まれる見出しの出現順序がおかしくなってしまう可能性があります。それを解消する為の Movable Type プラグインを以前に作成して利用していたのですが、先日の Hack-a-thon の時間を利用して公開できる状態にし、ダイナミック
Hop or Die! 参加レポート
2007-05-05T16:30:59+09:00 真琴さんの東京訪問に合わせて、先日5月3日に行われた『実践 Web Standards Design』(ホップ本) 著者のみなさんを囲んでのビーリング会、Hop or Die! に参加してきました。すでに参加者された方のブログでレポートが上がっていますが、とても楽しかったです。 hxxk.jp - ホップオアダイ 実践Web Standards Design 会場は六本木 (ギロッポン) にある、ベル・オーブ。iwai さんセレクトの素敵なお店でした。参加者は以下の面々。初めましての方もいらっしゃいましたが、真琴さん作成のステキなネームカードのおかげで盛り上がりながら乾杯前にまずはごあいさつ。イェス。 市瀬裕哉さん (3ping.org) 福島英児さん (Lucky Bag::blog) 望月真琴さん (hxxk.jp) kzさん (mi
ドメイン名の由来を書いてみる
2007-05-06T01:46:50+09:00 Hop or Die! でも話題になったのだけれど、サイトで利用しているドメイン名には各々由来があって、それは好きな音楽だったり、好きな言葉だったり。自分の名前をもじったりなんてのもあって本当に面白いものです。まあドメインは財産だというくらいだから、些細なことでも何かしら理由があって決めるものだと思うし、そうした理由はなかなかサイト上で知ることができなかったりもするので、ますます興味があるわけです。 みなさんのドメインの由来も聞いてみたい せっかくなので、みなさんのドメイン名の由来をブログしてみませんか。ドメインを持っていない人はアカウント名でも良いですよね。 『ドメイン名 = サイト名』という場合も多いとおもいますが (ニペケもそうです) サイト名と違って、ドメイン名にはサイト名以上におもしろい意味があるんじゃないかと思っています。 も
CSS でよく使う装飾定義をコンポーネントとしてまとめる
2007-01-26T01:26:38+09:00 北村曉さんよりコンポーネントにまとめる際、それを或る一つのclass名に集約するという方向性についてご指摘いただきました。この記事をご覧いただく際、是非参照してください。 CSSでよく使う装飾定義をclass名でまとめることについて(徒書) また、いただいたフィードバックを元にもう一度考えを改めて記事を書きました。 『CSS でよく使う装飾定義をコンポーネントとしてまとめる』をもう一度 リニューアルの際に CSS の分割管理を実践したのだけれど、その分割した CSS の中によく使う装飾をコンポーネントとして class にまとめた component.css というのを作成しました。コンポーネントとしてまとめることで変化に強くなりメンテナンス性が上がるのだけではなく、同じような装飾をおこなうために何度も良く似たスタイル定義を行うということ
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.
一行あたりの文字数を制限するリキッドレイアウト - 2xup.org
2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl
Web デザイナーが知っておくと良いかもしれない DTP 脳
2006-12-16T04:05:56+09:00 よく聞く意見として、Web デザイナーは DTP 的感覚を捨てるべきだ。といったものがありますが、僕は一概にそうは言えないと思っています。もちろん Web は紙媒体と違う点が多く、表示が環境に依存する部分があるので考え方に変化の必要な部分もありますが、それらは脱するというよりは、むしろ理解を深めていくべき点なのかもしれません。 ならば、どういった意識を持つのかというと、Web も DTP と同じように、文書に意味付け、構造化を行うという共通点があります。 HTML は文書に意味付けを行う言語 そもそも HTML とはなんぞや。という質問に『文書に意味付けを行う言語』という解答をすることがあります。例えばその文書の中で一番大きい見出しには h1 を。その一番大きい見出しの次に大きい見出しには h2 を。という風に単なるテキストに意味付けを行
CSS 分割管理の実践編
2006-12-13T09:47:51+09:00 数日前に行ったリニューアルでは、いくつか課題を設けました。ただただリニューアルしても張りがありませんし、ウェブデザインを行うものにとって自身のウェブサイトは自身の作品のようなものだし、好き勝手できるのも魅力なわけです。何回かの記事にわけて、リニューアルでおこなった作業をまとめていこうと思います。 前回、スタイルシートを分けて管理する方法をまとめるで CSS ファイルを分割管理するメリットや、どのように分割するか案を書いてみましたが、今回のリニューアルで実際に案を元に分割管理を実践し、結果はリストのようになりました。各ファイルの概要は案段階から変化がないので、そちら参照ください。以下のリストでは、テーマファイル以外の実際の CSS ファイルにリンクしています。 common.css component.css fonts.css scree
Japanese Traditional Colors
桜色 (さくらいろ) # 薄桜 (うすざくら) # 桜鼠 (さくらねず) # 鴇鼠 (ときねず) # 虹色 (にじいろ) # 珊瑚色 (さんごいろ) # 一斤染 (いっこんぞめ) # 宍色 (ししいろ) # 紅梅色 (こうばいいろ) # 薄紅 (うすべに) # 甚三紅 (じんざもみ) # 桃色 (ももいろ) # 鴇色 (ときいろ) # 撫子色 (なでしこいろ) # 灰梅 (はいうめ) # 灰桜 (はいざくら) # 淡紅藤 (あわべにふじ) # 石竹色 (せきちくいろ) # 薄紅梅 (うすこうばい) # 桃花色 (ももはないろ) # 水柿 (みずがき) # ときがら茶 (ときがらちゃ) # 退紅 (あらぞめ) # 薄柿 (うすがき) # 長春色 (ちょうしゅんいろ) # 梅鼠 (うめねず) # 鴇浅葱 (ときあさぎ) # 梅染 (うめぞめ) # 蘇芳香 (すおうこう) # 浅蘇芳 (あさすお
省略語と頭文字語から定義リストを生成する Movable Type プラグイン
2006-11-30T01:56:25+09:00 エントリー本文と追記に abbr (省略語) や acronym (頭文字語) があった場合、それらの語句を定義した定義リストを生成する Movable Type プラグインを作ってみました。各々の要素でコンテナした語句が定義語 (dt)、title 属性の値は定義語の概要 (dd) になります。ヒントは lomo さんの記事から。 頭文字語と略語から定義リストを生成 - Auto-Glossary(caramel*vanilla) 今回は abbr (省略語) や acronym (頭文字語) でやりましたが、microformats とか、何か他にも面白い事ができそうな予感。 ダウンロードとインストール 利用の際は自己責任でお願いします。ぜひ修正案などもお伝えください。 2xup repos - Movable Type Plugin
XML 開発者の日に参加しました
2006-11-27T22:19:54+09:00 2006年11月24日(金)に日本印刷会館で行われた 第九回XML開発者の日で『microformats に触れてみよう』というお話をさせていただきました。内容は、CSS Nite LP Disk 1 でお話させていただいたものを少し変更したものです。 会場の雰囲気にすごく緊張してしまったのですが、発表させていただいた自分自身にも良い刺激になりました。資料を公開しておきます。資料に利用した写真は、前回同様、jun さんに撮影していただいたものを使わせていただきました。 xml-developers-day.pdf (約5MB / PDF版) xml-developers-day.zip (.zip に圧縮したもの) 会場では、先日サンフランシスコに行った miyagawa さんがリモートプレゼンツール Breeze + Skype で参加
Photoshop でつややかな表現をわりと簡単に実現する
2006-05-05T20:05:06+09:00 Illustrator などを利用してベジェ曲線で書いた絵に Photoshop を利用してつややかな表現を加える方法は何通りもあり、すでにたくさんのノウハウが存在しますが、それなりのものならほんの少しの作業で実現できます。いつも違う方法でやってしまいあとで苦労する事があるので、自分自身の忘記録も兼ねてその Tips をまとめておきたいと思います。Photoshop CS で作成したデータですが、サンプルファイルも用意しているのでもしよろしければダウンロードして使ってみてください。 サンプルファイルをダウンロード(tsuyayaka-sample.psd) サンプルファイルはせっかく角丸の四角形で作成したので、Feed Icon として利用できるように、オレンジで描いたレイヤーと、アンテナ部分を描いたレイヤーも追加してあります。 レイヤー
スタイルシートを分けて管理する方法をまとめる - 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 の魅力をできるだけ楽しく伝えられるように努力してみましたが
スタイルシートを書く時のガイドライン - 2xup.org
2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://2xup.org/repos/doc/slide/css_nite_vol9/