Ocher
Posted at 2005/06/15 (Wed) 18:02 +09:00 in CSS
マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C2セッションにて「CSS完全攻略!!!3ブラウザ対応のWebサイトのつくり方」を聴講。日本におけるCSS提唱オピニオン・リーダーの一人、アンカーテクノロジー神森氏がプレゼンター。
いやぁー内容濃かったですね。あまりにスピーディーでちょっと置いてかれそうなところもありました。実際の内容はセッション題とはやや趣向が異なり、どちらかというとDreamweaverでのCSS Tipsみたいなノリでした。ま、Macromedia主催なので。その中で、超高速フルCSSサイト構築法が紹介されていました。（*勝手に命名）
- 作り方大公開（らしい）
- 画面デザインを領域に分け、名前を決めておく。
- 見出しレベルを確認。
- Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。
- 見出し付けを行う。
- メニュー項目のリスト化。
- DIVで各領域を確定。
- 上から順にCSSを定義。（ソースの出現順に。）
順を追って簡単に説明。
- 画面デザインを領域に分け、名前を決めておく。
#Header、#Contentbody、#Layoutbody、#localnavi、#Footerなど、まずは領域に名前をつけ、各々の領域にはIDを振ることを想定しておく。
- 見出しレベルを確認。
Web上のリソースは大半がテキスト。このテキストはそもそも第三者が読むことを想定した（された）文章である以上、構造化されていなければならない。
と、まずはリソース文書が構造化されていることを前提とする（外注・内注問わず、発注者側の問題であるが...）が、実際の見出しレベルを把握する。
- Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。
作業はデザインビューで行う。なぜなら、テキスト貼り付け＆EnterでひたすらBOX要素<P>が作られていくからだ。コードビューへコピペをすると、後で段落のマークアップをする手間が発生してしまう。この段階では見出し要素やメニュー項目などの区別は気にせず、ひたすらリソースをDreamweaver上へ乗っけることに徹する。
- 見出し付けを行う。
既に確認済みの見出し項目をマークアップする。
- メニュー項目のリスト化。
Globalナビ、Localナビ問わず、メニュー項目を<ul>でリスト化する。
- DIVで各領域を確定。
あらかじめ想定しておいた領域の定義付けをはじめる。[DIVタグを挿入]（右図参照）を活用して、まずはとにかくDIV囲みを一斉に行い、その後IDやclassの指定を行っていく。
- 上から順にCSSを定義。（ソースの出現順に。）
最後に上から順にCSSを定義していく。
これら1～7の手順で作成していくと、大変スムーズなCSS定義が可能となります。ふむふむ実際に作業を想定していると....なんとスピードだけに留まらず、その他にもありがたい恩恵を享受できるではないか!
- ヌケ・モレなどの戻り作業が発生しにくい。
- キレイに整理されたCSSが完成。
- Web標準に準拠したHTML文書ができちゃう。
- ということは、必然的にアクセシビリティが高くなるし、高い品質を保証するHTML文書となりうる。etc....
なんだか、とっても魔法のような構築法だと思いました。終わり。
Posted at 2005/05/25 (Wed) 14:18 +09:00 in CSS
フォントサイズはユーザーのディスプレイ環境に大きく影響されます。現在主に普及しているディスプレイの規格だけでも、
- 15型SVGA（800*600px） & 71ppi
- 15型XGA（1024*768px） & 85ppi
- 17型SXGA（1280*1024px） & 96ppi
- 17型UXGA（1600*1200） & 118ppi
という具合。ディスプレイの解像度ppi
（画面のきめの細かさ）とディスプレイの表示領域の組み合わせが複数パターン存在する以上、サイト制作者が意図した「絶対指定（px）のフォントサイズ」も所詮相対的な単位ということになってしまいます。あなたのディスプレイで具合のいい小さなフォント（8pxや10px）は、まったく可読性のない小ささで見えてしまうユーザーもいるのです。
CSSのfont-sizeプロパティのとりうる値は、
- absolute-size
- xx-small | x-small | small | medium | large | x-large | xx-large
- relative-size
- larger | smaller
- length
- in | cm | mm | pt | pc | px | em | ex
- percentage
- %
ですが、特にlength値を指定する場合は、em（エム）で指定してあげるのが一番良いと思います。line-height、margin、paddingの指定もemで統一してあげれば（emの幅をもったスペース/アキのことをエムスペースと呼びます）尚良し！
この場合は制作者サイドのメリットも。サイズやアキを指定する際は、1em（標準値）、0.8em、1.2emと1を基準にして調節できるため感覚的にわかりやすい。制作者にもユーザーにも優しいサイズ指定が可能となりますね。
Posted at 2005/05/21 (Sat) 17:38 +09:00 in CSS
アクセシビリティについて勉強するには、みんなのウェブがおすすめ。もちろんWCAGやJIS X 8341-3に目を通すのもいいけど、結構面倒くさい感じもありますので、比較的読み易い（個人的にはかなりですが）みんなのウェブがベストかと。必ずしもJIS X 8341-3に準拠しているわけではないですが、非常に良くまとまっています。アクセシビリティについて一度まとまったDocumentを読みたい方にはまずこちらからいかがでしょうか？と、某知識人の受け売りで。
Posted at 2005/05/17 (Tue) 21:58 +09:00 in CSS
ページのどこにどのCSSのclass,IDが割り当てられているかを視覚的に表示してくるbookmarklet、
CSS Debugを発見。特に他のサイトを参考にしてサイトデザインする時など、CSSレイアウトの構成が一目でわかるので大変便利です。（※IEでは動作しません。）
ここのページのMy PhotoにFlickr badgeを埋め込んでいますが、既に指定されているCSSを自分のサイトのデザインルールに合わせるときなどは、どのIDやclassをいじってあげれば良いかすぐに判りカスタマイズが楽になります。ちょっとした時間の節約になりますね。やっぱり時間は貴重だもの。
ON/OFFが切り替えられるトグル機能が付いた、CSS Debug Toggleの方がちょっといいかも。私はこちらを使ってます。
Posted at 2005/05/16 (Mon) 00:11 +09:00 in CSS
OS毎のデフォルトフォントは、WindowsはＭＳ Ｐゴシック、MACはOS Ｘからヒラギノ角ゴ Pro W3、それ以前のVerはOsakaとなっています。よって、MAC OS Xではヒラギノを用いたい場合には、
p {font-family : "ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Osaka;}
*「ＭＳ_Ｐゴシック」のアルファベットは全角、あいだは半角スペース
とするといいでしょう。基本ですが、フォント名の指定では、一番左に書かれたものが優先順位が高く、指定されたフォントがユーザーのシステムにない場合に、二番目のフォント、三番目のフォント・・・とうふうに表示されます。フォント名に半角スペースが入る場合にはシングルクォーテーション（' '）かダブルクォーテーション（" "）で囲む必要があります。
過去に作成したフォント回りのスタイルシートを暇があったらOS X用にいじってあげてもいいかもしれませんね。
Posted at 2005/04/16 (Sat) 20:40 +09:00 in CSS
なかなかリスト要素の扱いは慣れないわけで。今までけっこう使用を避けてました。レンダリングされるスペース具合がなんとなく掴めなくて。
なるほどMozillaとIEでは、ulのmarginで制御しているか、ulのpaddingで制御してるかの違いがあるようです。これだけに限らず、レンダリングの差を吸収するために、一端レンダリングの初期状態(タグに固有のデフォルトmarginなど)をリセットしてから、レイアウトやデザインのスタイルを上書きするというアプローチがあるようです。個人的にはかなり新発見で感動しました。こうすれば良かったんだね！
こちらで公開されているCSSをアレンジして利用させていただいてます。
Posted at 2005/04/15 (Fri) 11:02 +09:00 in CSS
CSS ではパターンマッチ（Pattern matching）の規則を用いて，ツリー構造内の要素に適用されるスタイル規則を決定します。セレクタと呼ばれるこれらのパターンは，単純な要素型名のみのものから，複雑な前後関係（例えば子供や子孫，兄弟など）を照合できるものまで多岐にわたります。パターン内に示された全条件がある要素に当てはまるとき，そのセレクタと要素はマッチ（match）していると言います。
今一度CSSの基本に立ち戻ってみると、恥ずかしながら発見が！！HTMLを論理構造とプレゼンテーション要素に分類して、後者をCSSにて規定するサイト制作を心掛けていはいたものの、まだまだCSSを理解していなかったことに気づく。。。
タイプセレクタ、子孫セレクタ、クラスセレクタ、IDセレクタはよく使っていたが、子供セレクタ、隣接セレクタ、属性セレクタなどはかなり便利そうです。私の場合では、クラスセレクタを激減させられそうです。やたらPタグのクラスが多かったし。記述のように、隣接するブロック間の垂直マージンを調整したい場合には隣接セレクタが最適って、あるある！
Weblog archives
This page was last modified on (in secs).