3 posts tagged “web標準の日々”

１日目の３セッション目はX3「これからはじめるCSSレイアウト術。読めるソースが優良といっても過言ではないのだ」を受講。
講師はウィルシステムの伊藤学さんです。
ワークショップを交えながらCSSの概念や記述についてコツを解説され、非常にわかりやすい内容でした。
以下まとめです。
------
CSSはCascadingStyleSheetの略です。
Cascadingを辞書で引くと、「段々になっている滝」という訳されています。つまりは階層構造のことをさしています。

ブラウザーはデフォルトでCSSを持っていますので、まずはこれらのデフォルトCSSをリセットしてあげる必要があります。
頭に『＊』をつけるユニバーサルリセットが一般的ですが、最近、海外では要素毎にリセットするタイプが多く見られるようになりました。ユニバーサルリセットは要素に関係なく反映されてしまうため、リソースを喰うから、必要な要素だけリセットしようという考えのようです。
http://meyerweb.com/　などリセットソースを配布しているサイトもあります。

続けてセレクタについて
・親子関係
・グルーピング
・スタイルシートの順位
・個別性
というものがあります。

親子関係とは
p.note em { color: red; }　の場合p.noteが親要素、emが子要素となるというもの。
なぜ「親子」なのかというとhtml headの部分を「祖先タグ」body以下を「子孫タグ」というからだそうです。

グルーピングは同じ内容のもを『,』で区切って一括設定すること。

スタイルシートの順位は
デフォルトCSS＜ユーザーCSS＜制作者CSS
という順で適応されます。

また!importantがある場合は
デフォルトCSS＜ユーザーCSS＜制作者CSS＜制作者CSS＋!important＜ユーザーCSS＋!important
の順になります。

そして一番重要なのが個別性になります。
これは、CSSの優先順位を位置づけるもので、点数として計算できます。

•style 属性がある場合は、1をカウント (= a)
•セレクタに含まれている id 属性の数をカウント (= b)
•セレクタに含まれている id 以外の属性と、擬似クラスの数をカウント(= c)
•セレクタに含まれている 要素、擬似要素の数をカウント (= d)

といった計算方式があるそうですが、わかりにくいとのことで益子さんが簡単な計算方式を考えられたそうです。

* (0点) < 要素タイプ (1点) < class/属性 (10点)< id (100点) < style= (1,000点)

として計算します。
この式に当てはめると
p.note em { color: red; }　は　p（要素タイプ/１点）、.note（class属性/10点）、em（要素タイプ/1点）で合計12点になります。
が、同じCSSでも
div#content p.note em { color: blue; }とした場合、div（要素タイプ/１点）、#content（id/100点）、p（要素タイプ/１点）、.note（class属性/10点）、em（要素タイプ/1点）で113点となってしまいます。
そうすると、12点の赤字よりも、113点の青字の方が優先されます。
なんかCSSが効かないという場合、この1点の差で効かない場合があります。
ですから、CSSはできるだけ省略せずにbody（あるいはdivから）書くことが望ましいです。

CSSを設計するにあたり、モジュール化、バリューデザインというものを考える必要があります。
モジュール化とはパーツ毎に分けること、バリューデザインとは作業を効率化しデザインの価値を高めることを言います。

一枚のスタイルシートに全てのCSSを書き込むのではなく、
baseのCSS、layoutのCSS、classをまとめたCSSという具合に分割し、それらをインポート用のCSSに読み込ませてから、htmlに読み込ませるといったものがモジュール化です。

CSSを設計する場合
・カラムレイアウト
・セレクターリセット
・モジュール化
の3点を押さえましょう。

実際にCSSを作るにあたり大事なポイントは以下になります。

・親子関係はしっかり
・要素はできるだけ省略しない
・インデントで見やすく
・適宜コメントアウト&目次
・グルーピング
・全部入りリーフページをつくろう

もちろん(X)HTMLをしっかりと書くことも重要です。
divばかりのxhtmlにしないように気をつけましょう。

そのためにはまずdiv要素を考えずにマークアップしていき、一つにまとめられる部分をdivでまとめます。
divは輪ゴムのようなものと考えてください。

次にid属性とclass属性ですが、id属性は固有名詞、class属性はグループ名やモジュール名になります。
つまり名札のようなものです。

CSSを記述するにあたり、見やすいように書くことが大事です。
省略せず、階層構造が分かるように書くこと、またインデントを効果的に使い見やすく整理することも大事です。

さらにCSSの頭に見だしや目次をつけることでわかりやすすがぐっと違ってきます。

/*
======Contents=======
last-update：　17.jun 2007;

1.univaersal reset[2007.07.15]
2.~~~~~
3.~~~~~
====================
*/

と言った感じで、修正日の日付をいれるとわかりやすいです。
また、修正を行った行にも同様に日付を入れると良いでしょう。

また共通している部分は一つにまとめてしまいましょう。
省略せずに書くことは、共通部分が見つけやすくするためでもあります。

サイト内でもっともテンプレートを使うのはリーフページ（末端ページ）になります。
ならば、全ての要素をリーフページに入れることで、第二のデフォルトページを作りましょう。

カラム分けはテトリスの要領で。
背景に色をつけると、どこが崩れているのか一目でわかります。
IEではwidthの値が変わってしまう、ボックスバグがあるので注意してください。
まずIE以外のブラウザーで設計し、途中途中でIEで確認するのが良いでしょう。

自分の為にも、他人の為にも見やすいソースとバージョン管理をしていくべきです。
要素タイプのdivについては、慣れてきたらつけなくてもOKですが、1点の違いで変わってきてしまいます。
仕様書も一度はちゃんと読むようにしましょう。
------

メンテナンス性というのはいつも気になっていました。
CSSの最初に目次などを入れるというのはすごく良いアイディアだと思うので、今後実践してみたいと思います。
たまにCSS効かないなーってのはこの個別性のせいだったんですねー。（＾＾；；
全部の要素を書くのは見た目ももったりしてめんどくさそうですが、やっぱりいろいろ考慮すると書いた方がいいんですかねぇ・・・。
とにかくわかりやすく勉強になる講義でした。

講演の資料はこちらで公開されています。
http://www.freesia.org/2007/07/webx3.html

１日目の２セッション目はX2「名前のウェブとXHTML文書のプロファイル」を受講。
講師は神崎正英さんです。

最初は「名前のウェブ（仮）」というタイトルだったので、クラスやIDの名前の付け方とかに関する講義かなーと思ったのですが、情報の伝達についてのお話から最後はRDFに至り、凄すぎて半分魂が抜けかけていました。
以下、分かる範囲でまとめ
-----
まずはじめに西垣通氏の『ウェブ社会をどう生きるか』という本のお話がでました。
その本の中では情報は「生命情報」「社会情報」「機械情報」というものがあると書かれているそうです。
「生命情報」は個人個人のとらえ方のようなもので、個体差があるため完全に伝えることはできません。
「社会情報」は「生命情報」を言葉や文章という形にして、人々が共通の情報としてもてるようにしたもののことです。
「機械情報」は言葉の記号表現だけをとりだしたもので、いわゆるデーターと言われるものにあたります。

情報はまず生命情報として発生し、言葉や文章となることで社会情報になります。
それらがデータ化されて蓄積され必要に応じて取り出せるようになります。
機械情報を元に社会情報が再現され、再現された社会情報は受信者に渡ることで、受信者の生命情報となります。
ですから、情報が伝わるためには、まず社会情報として適切に再現されないといけません。
そこで名前というものが重要になってきます。

社会情報は様々な名前によって構成される、まさに「名前のウェブ」です。
「ウェブ標準」とは、WWW層においての社会情報を適切に伝えるための基準のこと。
名前の要素は「主語」「述語」「目的語」の３点セットで考えられます。
たとえばCSSなら「セレクタ（主語）」「プロパティ（述語）「値（目的語）」と言った感じになります。
また、Web文書は「グローバルな名前」「文書ツリーの要素の名前（相対的な名前）」「任意の名前」として表現されます。

グローバル名

• 名前空間URI＋要素型名
• 文書URI＋フラグメント識別子（ｉｄ属性もしくはXPointer）
• 仕様で定義されたrel属性値

文書ツリーの要素の名前

• DOM
• XPath
• CSS（子孫セレクタ）

任意の名前

• class属性値（一般には通じない）・未定義のrel属性値
  
• meta要素のname属性値
• その他文中に出現する様々な名前（地名・人名等）

ウェブ上で名前をつけることにより識別が可能になり、それらの名前を使ってデータアクセスができるようになります。
また情報コンテンツの表現と操作が可能になります。

XHTMLの場合、「xhtml:title」のように仕様など共通の了解のある名前と、「class＝"fn"」のように限られた範囲でしかわからない名前があります。
ではなぜ、”fn”をtaitleのように共通認識をもてる要素としないのか。
それは、あらゆる役割を要素型として定義するには無理があるためです。
また、最小限の共通部分をグローバルな要素型として定義し、@classなどで個別の役割を細分化させるためでもあります。

表現したい文章構造は人によって異なります。
基本はシンプルに。そこに拡張機能を加えていく方が、柔軟で互換性が高くなります。
またシンプルであるということは記述が簡単であるということです。それは普及の要因につながります。

それでも、任意でつけた名前をグローバルに共有したいという場合・・・。

XHTML文書で用いる名前を拡張する方法は以下があります。
１）新しい要素型を定義する
２）XHTMLモジュールを追加する
３）名前空間を利用した語彙併用
４）XHTMLプロファイル
５）＠ｃｌａｓｓ、＠relのみ

この中でもっとも現実的なのが４）のXHTMLプロファイルになります。

@profile属性はHTMLの意味を各自が拡張していけます。
プロファイルを用意することで、ローカルな名前をフォーマルに変えることができるのです。
ただし、基本的にはメタデータ用の名前で機能拡張向けではなく、また、共有プロファイルの場合、意味定義の恒久性はプロファイルの管理者に依存することになってしまうという短所があります。

XHTMLからメタデータを抽出する汎用ルールとしてGRDDLというものがあります。
GRDDLを適用するにはいくつかの方法がありますが、まずは整形式のHMLになっていることが前提となります。
だからXHTMLはきちんと書きましょう。

&は&amp;と書く。（リンクを張るときに&がそのままのことが多い）
属性値は必ず引用符で囲む。
空要素は/>を忘れない。

といったものはよくあるエラーです。
また属性と属性の間にスペースがないなどValidatorが通ってしまうエラーもあります。
拡張子を.xmlとして、ブラウザーで読み込むと比較的簡単にチェックができます。
------
その先もいろいろ続くのですが、申し訳ない、私にはこれ以上まとめるのは無理。（＾＾；；
講演データはここで見られます。
http://www.kanzaki.com/works/2007/pub/0715dws.html
あとはCSSNiteで音声データを配信するのをお待ちください。

よく使う名前を共有して使おうという考えはしっくりくるし、Web標準にかなっていると思いますが、いかんせんそこに至る過程が私には難しすぎました。

７月１５日、１６日とCSSNiteさんの主催で「Web標準の日々」というWeb系イベントが開催されました。
２日間で72セッションが行われ、最高で8セッションを受講することができます。

１日目の1セッション目はV1「明日から使えるタイポグラフィ」を受講。
講師はデジパ株式会社の両見英世さんです。
タイポグラフィとは何かからはじまり、フォントについて、それらを使うときの注意点などのお話をされ、最後にワークショップとして「コミュニケーション」をタイポグラフィで描くという内容でした。
以下に覚えている内容をまとめました。
-----
「文字」とは線や点を使って形づくられるもので、言葉を伝達し記録するコミュニケーションツールです。
タイポグラフィはこれら文字のサイズや字間などを調整する技術で、これらをデザインに組み込むことにより、感情や雰囲気を伝えたり、あるいは感じさせないようにすることができます。

たとえば「わかりました」という文字でも
「わかりました！」「わかりました・・・」「わかりました！」「わかりました・・・」
というふうに約物をつけたり、サイズを変えることで様々な感情を表現することができます。

またフォントや大きさ、ウェイト、感覚、色を使うことで情報の雰囲気をさらに強調して伝えることもできます。
たとえば
「ゆったりとした空間」よりも「ゆ　っ　た　り　と　し　た　空　間」
「涼」よりも「涼」
といった感じ。

そしてもっとも重要なのは「感じさせない」ということ。
人は「読みやすい」とは思わなくても「読みづらい」といは思うものです。
ですから、文章を読むときに不都合がないようにすることが大事なのです。
つまり、「読みやすいとは思わないけど、読みにくいとも思わない」　それが「感じさせない」ということです。

文章を読みやすくするためには
・文字の色と背景色の十分なコントラスト
・十分な文字サイズ
・視線移動が容易となる行送り
がポイントです。

フォントを使い分けることで、印象をコントロールすることができます。
フォント自身がもつ雰囲気が、受け手への印象をコントロールします。

セリフ体なら「正統・格調・まじめ・伝統・信頼感・品・高級感」
サンセリフ体なら「モダン・ポップ・無機質・力強さ」
明朝体なら「伝統的・高級感・信頼性・洗練」
ゴシック体なら「力強さ・男性的・現代的・カジュアル」
と言ったイメージを持っています。

他にも等幅書体やプロポーショナル書体、長体、平体、斜体、イタリックといったフォントに関しての説明もありましたが、メモがおいつかなかったので配信待ちです。（汗）
フォントを変形するときには細かいディティールに気をつけましょうということもおっしゃられていました。
また、タイポグラフィをするにあたり、数値に頼るのではなく最終的には目視し、自身の感覚で選択していくことが必要とのこと。
これは数値では錯覚に対応しきれないためです。

タイポグラフィの役割を理解した上で感情を表現していくことが不可欠となっています。
そのためには内容を理解してからデザインに取りかかることが大事です。
-----

抜けてるところもかなりあると思いますので、配信されたらチェックしてくださいね。

「読みやすく」という意識はしていたものの「感じさせない」という考えは今まで持っていなかったので衝撃的でした。
確かに自身を振りかえっても「白背景に#ddddddのグレー文字で10ピクセルなんてサイテー、読めん」とは思うけど、それが「アイボリーの背景に#333333の濃いグレー文字で14ピクセル」になっても普通に読むだけですものね。
そして、1級のデザイナーさんたちは文字を変形した後の微妙な線の太さの違いなどまで気を遣われているんだなぁと、感嘆。
ズボラーな私ですが、そういう細部まで気を配るようにしていきたいと思います。

※講義の中でフォントを使う上ではライセンスの問題に触れられて「文字で語る」（http://glyph-on.jp/）という特別なライセンス契約をしているサイトの名前があがっていたのでメモで置いておきます。