yumcom.net

長いです。スミマセン。
17日（土）、CSS Nite Begginersに行ってきました。

サブテキストとして「現場のプロから学ぶ XHTML+CSS」が出版されており、
それを読んできた方がより内容が理解できますよーとのことでした。
購入したものの、ほとんど読まないまま持参したのですが、
内容はだいたい本に書かれていることプラスα、という感じだったので、
まぁ問題はありませんでした。
でも、いろいろ知らなかったことも聞けたし、いろんなデモも見せてもらったので、
なかなか見る機会のない、"人のやり方"を目にすることができて、それは収穫でした。

---

以下、知らなかったこと・改めて「なるほど」と思ったこと・気になったことなどのまとめ。
自分用の覚え書き的なものなので、誰がどの話をしたのかなどは省略します。

「それ教えたわ！」ということがあるかもしれません。先生ごめんなさい。

■ XML宣言を書くことが増えてきている。
書いた場合、IE6では後方互換モードになっちゃうので、ハックで対応。

■ CSSのメディアタイプ指定の意味　（わかっているようでわかってなかった）
印刷用CSSを用意する、というのは media="print" を指定すること。
でも、見たとおりに印刷されないと不安になるユーザーもいるので、印刷用ページを設けて、それをそのまま印刷させる方がベター。

■ スタイルの優先順位を確認するための、詳細度の計算方法
・ユニバーサルセレクタ　→　0
・タイプセレクタ　→　1
・クラスセレクタ・属性セレクタ　→　10
・IDセレクタ　→　100
例）　p.note　なら 1+10=11　#right p なら 100+1=101
　　　なので、#right p > p.note　（#right pが優先される）

■ positionプロパティについて
上下位置を指定するときに使う。
position:absolute は position:relative を指定された親要素の左上を基準とするため、動かしたいハコに absolute を指定し、その基準となるハコに relative を指定する。

■ ページのセンタリング方法三種
・全体を1つのIDで囲んで、その左右margin を auto にする（いつものやり方）
・各コンテンツbox（#header, #container, #footerなど）の左右margin を auto にする
・各コンテンツに共通のクラスを指定して、そのクラスの左右margin を auto にする
ま、どういうくくりで指定するか、というだけで、やっていることは結局一緒なのですが。

■ cleafix
複数カラムのレイアウトにする場合、float 指定した要素は親要素の高さに含まれない。
その問題をCSSだけで解決する方法。（実際のコードは省略）

■ 要素の不可視化
1. コンテント領域の大きさを0にする（width:0; height:0;）
2. はみ出した部分を消す（overflow:hidden;）
※display:none や visibility:hidden は使わない。音声ブラウザで読み上げられない。

■ ロゴのマークアップ、2つのやり方
・サイト中のロゴを<h1>にする
・トップロゴは<h1>、個別ページのロゴは<p>または<div>にする
→ページ単体で考えて一番大きい見出しを<h1>とすべき、という考え方

■ <ul>と<ol>の使いどころ
・<ul>要素...ナビゲーション
・<ol>要素...パンくずリスト

■ ナビゲーションのスタイリング
・CSSの background で画像を入れ、テキストインデントで文字を飛ばすやり方
→スパムとされる可能性がなくもないので、現在では img要素を使うことが多い。

■ フォームのマークアップ
・<fieldset>でくくってグルーピング。その場合、<legend>でラベリング。
・<label>要素の for属性と<input>要素の id属性を対で用いると、項目名をクリックするだけでボタンにcheck、テキストボックスにカーソルが入る。

■ JavaScriptライブラリ
・IE7.js：IE5、IE6で利用できないCSSプロパティが利用できるようになる。ヘッドに<link>要素で読み込むのみ。
・IE8.js：IE7以下で多数のCSS3のセレクタプロパティが利用できるようになる。

---

以下は、鷹野さんによる「XHTML+CSSキホンのワークフロー」セッションの中で行われたデモ。
Dreamweaverを使って、テキスト原稿をXHTMLファイルにする手順です。

　1. 原稿がテキストファイルの時点で、各要素を1行おきにしておく。
　2. ドリで開いたhtmlファイルに原稿をコピペする。→各行が<p>タグでくくられる。
　3. デザインビューにして、タグを変えたい行にカーソルを置き、「フォーマット」を変えると、<p>タグが置き換えられる。
　4. 画像に置き換えるものはカットしてから画像挿入。代替テキストにペースト。
　5. コードビューにして<div>タグを埋め込んでいく。
　6. CSSを書いていく。

マークアップ、という視点でいくと、こういうやり方が理想的なのかな、と。
今後はもっと、文章構造を意識したコーディングをしていきたいと思いまする。

---

おまけ：各講師によって紹介されたアプリケーションいくつか（Mac向けばっかりだった；）

・Poladroid：ドラッグ＆ドロップでポラロイド写真風のJPG画像を作成する
　　　　　　　http://www.poladroid.net/
　　　　　　　Mac：10.4 以上、Windows：XP以上
　　　　　　　ドネーションウェア
・skEdit：強力な補完機能を有するコーダー向けテキストエディタ
　　　　　　　http://www.skti.org/
　　　　　　　Mac：10.4 以上
　　　　　　　シェアウェア（$34.95）
・CSSEdit：Webブラウザとも連動する超便利なCSSエディタ
　　　　　　　http://www.macrabbit.com/cssedit/
　　　　　　　Mac：10.4 以上
　　　　　　　シェアウェア（€29.95）