Title: 考えない CSS
Author: cho45
Description: 2007 新春 CSS 勉強会

*自己紹介

こんにちは cho45(さとう) です。

http://lowreal.net/ でなんかやってます

よくよく考えると

ここにいられるのも CSS のおかげかも

マジメに触りはじめたのは高校2年ぐらい

最初は border スゲーって思ってました

それから Strict 厨になったりして

CSS *だけ*でおもろいことできないかなぁとか (だけ == 画像使わない) ※意味ないです

IRC やりはじめたり

そういうのを経て今にいたります

ただ最近あんまりずごーんとカスってないので……


*最初に

自分は日記／ブログのデザインぐらいしか頭に入ってないので、

その他たくさんのケースについてそぐわないことがたくさんあると思われます

(何を考えながらやってるか教えて欲しいです)

あと自分は

プログラミングを始める以前に CSS でした。

なのでプログラミングから CSS へっていうのも

いまいちよくわかりません

なんか役に立たない予感がやばい


*考えない CSS 考える CSS

どこに頭を使ってるか

CSS 書く時何を考えてるか

あたりをざっくり

やりたいと思います

というか CSS の何がわからないのかがよくわからないので

言いたい事を言いたいと思うます


*なんで CSS なのか

そもそもなんで CSS なのか

font 要素でなんでだめなのか？

内容とデザインとの分離

なんで？

さまざまな環境で情報を得られるようにするため

環境に依存するものの分離

見た目は環境に依存します

たとえば

普通に見るディスプレイ

携帯の画面

ゲームの画面 (テレビ)

画像を表示できない文字ブラウザ

これらのものでそれぞれ情報を得られるため

内容（構造）と見た目を分離しています

そして分離された見た目の部分が CSS

内容／構造記述が (X)HTML です


*CSS のハイパーテクニック

みんなの知らない CSS ハイパーテクニック！！！！１：w

なんてのはあんまり役にたたない

IE で見てげんなり (よくある)

まじある

あるあるっっw　 


*例えば

>||
position: relative;
||<

らへんのことキワキワにやっても

うまくいかなくて無駄という嫌な思い出

(ただし何がどうだったか覚えてないです。だめすぎ)

仕様書読みながら、そゆのをやる

そんな時期が僕にもありました

よくある簡単なことの組み合わせが CSS


*基本

ボックスモデルが頭に入ってればいい気がする

width に margin, padding は含まないとか

margin は潰されるとか

http://www.y-adagio.com/public/standards/tr_css2/box.html#box-dimensions

<img src='http://www.w3.org/TR/REC-CSS2/images/boxdim.gif' alt='Image illustrating the relationship between content, padding, borders, and margins.'/>

仕様に素晴らしい図解がある

実際に書くときは、フローがどうとかあんまり考えていないです


*実装

仕様に一回ぐらい目を通すべきだけど

CSS なんて書く側からすれば実装が全てです。

つまり、ひたすら試行錯誤 (テスト) をしまくる

CSS のブラウザ別バグリストとかってあるんですけど

バグリストでバグ探すより

リロードしながら思いつく解決方法を試したほうが

はやい。


*CSS の試行錯誤

書いて保存して

ブラウザに切り替えて

リロード

また他のブラウザに切り替えて

リロード

リロード

リロード

リロード

リロード

リロード

リロード

リロード

リロード

リロード

リロード

リロード

リロード

リロード

リロード

リロード

リドード

めんどうくさい。

オートリロードつかおう


*オートリロード説明

エディタの保存時にひっかけてブラウザを全部リロードかけます

ここで詳しくしてもしかたないので

-http://del.icio.us/tag/autoreload
-http://b.hatena.ne.jp/t/autoreload

とか、あと Google で検索とか。。。。。

お手軽オートリロードツールも作ってます (まだ日記に書いてない)

-http://lowreal.net/2007/CSSBullets/
-http://lab.lowreal.net/trac/browser/CSS%20Bullets/trunk

エディタのフック方法がわかる人ならすぐに

(一瞬実演)


*手順

http://lowreal.net/logs/2005/10/22/1

+800x600 で適当に画像つくる
+CSS で実装可能かを考える。
+画像切り抜きながら CSS 書く。@Gecko
+IE で見てみる。
+Opera で見てみる。
+あとは見ても見てないフリをする。

でしたが、

オートリロードで全部 (Fx, IE, Opera, Safari) 一気に確認

ホントに便利なので、

いやホントにマジで本気で、お勧めです


*最近の手順

+画像切り抜きながら CSS 書く (オートリロード)

変なことになるとすぐに新しい方法を考える

場合によっては画像の切り抜きから直す。

発想の転換が必要なことが結構ある


*発想の転換

背景に設定できる画像は一つの要素のつき一つ

有効に活用しないといけない。

画像点数を最小に

-何をどの要素の背景画像に設定するか
-どう頑張っても CSS では無理なこともある

特に完全なリキッドデザインするときに重要

(普通繰り返される要素は背面にもってく)


*リキッドレイアウト

リキッドレイアウト主義者です。

リキッドレイアウトじゃないとウェブデザインじゃないんじゃとか

考えていた時期もありました (今も半分ぐらい思ってます)

結構めんどいですけど……

学校の課題とか殆どソリッドレイアウトですけど……


*リキッドレイアウトのとき

そもそもデザインするときに

-どこを繰り返すか／フェイドアウトさせるか
-引き延ばしたときに違和感がでないか (普通出る)
-画面が小さい環境でどうなるか (まじむずい)

とか考えてないと困ったりします

例えば今の lowreal.net のスタイルだと

#top (h1) の画像が落ち込むようにドロップシャドウかかってますが

それが繰り返しになっています

MISS WORLD というスタイルだと中間部分が繰り返しになってます

この繰り返す部分をうまく背景に設定できない場合が多々

フォトショのレイヤー構造そのまま CSS に落とそうとしても普通無理

この辺考えるのでいつも必死

一本ここに線入れたい！とかがネックになって3時間ぐらいハマったりとか

そして諦めて違うようにしたりとか

でも寝て起きたら「できんじゃん！！」とか思いついたりとか

よくある……


*ソリッドレイアウト

逆に、ソリッドレイアウトが許されてもいいかなと思うケース

-写真／イラストサイトなど
-その他十分なコンセプトがあるもの
-あるいは全くコンセプトがないもの (学校の課題とか)

写真サイトでも http://www.pixeldiva.co.uk/ はリキッド (個人的に衝撃的だったサイト)

文章系のサイトではソリッド以外ありえなくね？と思ってます

「仕方ないからリキッド」じゃなくて、「仕方ないからソリッド」


*マルチカラム

あとマルチカラムってあんまり好きになれないです。

一時期マルチカラムを CSS で実装する方法を一日中一週間ぐらいやってたことがあって

当時は position: absolute と float の簡単な方法ぐらいしか思いつかなくて

とかやってたんですけど、途中でふと「サイドバー」っているのかって

疑問がでてきたり、どうでもいいですね

ところで float 系と position 系とありますけど (position はあんまり使われない)

float 系は width が「見た目の width と違う」ことが多くなるので

その子孫の table 要素 に width: 100% とかやると悲しいことになったり (table 要素って親要素の幅を無視しますよね？)

もう一個ラッパ的な要素が欲しくなったり、(Strict 厨はそういうの追加しない)

float 系でも普通のやつとネガティブマージンのやつはその時々で変える必要があったり

めんどい。マルチカラムめんどいよ

でも CSS やるぞ！！って時はマルチカラム楽しいですよ、ね


*HTML の構造化と CSS

CSS の「カスケーディング」という特徴から

CSS はまず良い構造あってこそのもの

現実的にはむしろ良い構造を崩す事もあるけど

構造の統一／要素の意味を考える


*カスケーディングで思い出した

>||
<div id="content">
	<div id="content-hoge" class="hoge">
		ここの色
	</div>
</div>
||<

>||
#content .hoge {
     background: red;
}

#content-hoge {
     background: yellow;
}
||<

二分ぐらいハマったケース

6.4.3 選択子の固有性の計算 - http://www.y-adagio.com/public/standards/tr_css2/cascade.html#specificity


*クラス名のつけかた

未だに他人のサイトのソースみてて「あー」って思うこと

>||
<span class="red">ここ重要ですぅ</span>
<!-- 強調したい？ -->
||<

とかって、アレですよね。

>||
<font color="red">ここ重要ですぅ</font>
<!-- 1.0 に見えるソース -->
||<

意味的にあんまり変わらないです。

span 使って class つけて CSS 分離したらいいってもんでもなくて

見た目と構造が分離が目的なのに、目的見失ってしまうと

ちょっとかっこわるいかな、と思います

本当にその要素の内容が、意味的に red ならもちろんいいんですけど

>||
<span class="red">一月</span> 二月 ...
<!-- 金額的な赤字という意味の red これは問題ない -->
||<

これがどうなるの？っていうと

前の例の場合あとで強調を緑にしたいと思って

>||
.red { color: green; }
||<

になったら、わかりにくいですよね

せっかく書くなら良い HTML 書きましょう！

強調したいなら

>||
<span class="important">意味に気をつける</span>
<em>意味に気をつける</em>
<em class="important">意味に気をつける</em>
||<

とか、するのがいいと思います

書きっぱなしでデザインに依存してしまうような HTML の場合は

わりと単なる気持ちの問題になります

もし microformats で使えそうなものがあるなら

それ使うのがいいと思います (そのコミュニティで同意がとれているクラス名なので)

そんなに怖い目で見ないで＞＜


*無限のキャンバス (CSS と関係ない)

web ブラウザの描画領域は無限

それをどうとらえるか

紙のように完全に縦横幅を固定してしまうのか

幅を固定してしまうのか

全て自由にするのか

無限の、そして可変のキャンバスを相手にするのと

有限の、そして不可変のキャンバスを相手にするのとでは

かなり「関わり方」が違うと思う (DTP を Web の大きな違い)


*自分の CSS 関連における最終目標

無限のキャンバスで美しい構造／美しい CSS によるデザインをやりたい

と思ってた

最近センスがなさに心から絶望して挫折気味 (世界観が広がった事による副作用)


*便利ツール

カーソル位置の色をコピーするのが地味に便利

mala さんが開発環境カンファで言っていたのを真似

-Windows: http://subtech.g.hatena.ne.jp/cho45/20060912/1157993524
-Mac OS X: http://subtech.g.hatena.ne.jp/cho45/20061102/1162441711

Windows 版は AutoHotKey のやつですマジ便利

Mac 版は普通に obj-c です。OS X は gcc 使えるのマジ便利。リファレンスみやすいし……

適当なキーに割り当ててます。

OS X のやつは QuickSilver で起動してます (&#x21E7;&#x2318;C)

あと CSS のプロパティを自動でソートするのが便利です

http://lab.lowreal.net/trac/browser/config/sortcss

(一瞬実演)


*ブラウザ間のアレ

気軽に書ける CSS といえば UserCSS かな、と思います

GM がアレで隠れてますけど Fx では Stylish ていう素敵拡張があるのでお勧め

自分のサイトへのリンクをハイライト
>||
a[href*='lowreal.net'],
a[href*='subtech.g.hatena.ne.jp/cho45'],
a[href*='d.hatena.ne.jp/cho45'] {
	background: yellow !important;
	color: #000 !important;
}
||<

はてダ編集画面の滅多につかわんフォーム消す
>||
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("http://d.hatena.ne.jp/cho45/edit") {

table.table-config,
#backup {
	display: none;
}
}
||<
<img src="http://f.hatena.ne.jp/images/fotolife/c/cho45/20070117/20070117163301.png" alt=""/>

とか、「普段日常的に使う CSS」なんてどうですか（どうですか？）


*CSS 勉強法

自分は CSS 書く時勉強と思った事はないのですが

それはいいとして

-http://cssvault.com/
-http://www.cssreboot.com/
-http://www.cssimport.com/
-http://alimika.alib.jp/satomican/

あたりからたどれるサイトのソースを読みまくりました

あと書く。たまに仕様書で確認する。

思ったより地道な事やってた、かもしれないです

コツとかよくわかりません。


*alternate CSS のススメ

link rel="alternate stylesheet" のやつです

デフォルトで読み込まれず、

Fx の場合はメニューから切り替えできます

他のブラウザだとスクリプト書かないといけないですけど

「一つの構造で」「いくつものデザイン」

っていうのは制限があるので勉強になるかもしれないです

構造が洗練される。CSS で「どうすればできるか」を考えるようになる

余談で

某スーパーファミリーコンピュータな大学のサイトで

design switch とかいうので XSLT つかって構造まで変化させてますが

あれちがうよ！ まねしちゃだめだよ！

コンテンツの内容が変わらないのに構造が変化するのは変です

(デザインと内容を分離できていない)

雑誌でそのことについて語っちゃったりとか (見本になるとかどうとか)

もう＞＜

と Strict 厨が申しておりました

いいですよ……Strict とか意味ないので……well-formed ならいいですよ……


*最後

CSS は基本　空気みたいなもの

気がつくとそこにある

誰でも使う／誰でも使える

クロスブラウザふんふん以外は難しくない

float ふんふん以外は難しくない

表組アルゴリズムふんふん以外は難しくない

……

たまには @page 規則のことも思い出してあげてください

Fx は印刷関係よわすぎ (マルチメディアは Opera が強い)

以上です。ありがとうございました