CSS Niteで喋ってきました
hamashunのセッション
先日のCSS Niteで、「Webの世界に情報発信しよう！」というタイトルで喋ってきました。
内容は簡潔に言うと、「ブログ書こうぜ」です。
当日のアンケートを見させてもらったんですが、おおむねいい感じの評判を頂けてたようでほっと胸を撫で下ろしました。
なんて言うか、正統派のプレゼンではなかったので、もっと好みが分かれるかなーとか思ってました。 特に寸劇とか寸劇とか寸劇とか。
スライドはUPしていますが、高橋メソッド風味なので（あくまで風味）、スライドだけ見てもあまり意味は無いっぽいです。 音声とか公開・・・されるのかな？
セミナーのような場所で喋るのは今回が初めてだったので、いろいろと勉強になり、また課題も見つけられました。
喋っている時の姿勢をもうちょっとシャンとした方がいいかなとか、間の取り方をもう少し緩急付けたいなーとか。
小山田さんのセッション
今回のCSS Niteは2本立てで、最初が僕、その後がヨモツネットの小山田さんでした。
小山田さんの講演内容はガチなCSSネタ。 displayプロパティの値inline-blockに関する内容です。
inline-blockはちょっとした工夫をすれば既に使えて、かつ結構便利、という内容でした。
スライドのサンプルコードでは、Firefox2に対応するためにdivを一つ増やしていました。 あくまでサンプルコードなのでdivを増やしていたんだと思うんですが、実際は div > ul とか、なんかうまい事やれればいいのかなとか思いました。 或いはFirefox2は諦めるとか。
打ち上げ
打ち上げは、いつもより少なめの人数でしたが、逆に話しやすくて良かったと思います。
「IAの話とか勉強会とかしたいよね」的な話で盛り上がったり、Firefox3.1βの情報をさっそく交換したり。
私信
IRCの件。 ぜひｗ
【追記あり】li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。
追記：トラバが送れないとの報告を受けて、文末に手動トラバを追加しました。
ナビゲーションなどをリスト要素でマークアップして、display: inline; で横並びにすると、li要素とli要素の間に謎の余白が現れます。
そして、この現象を解決する手段はいくつかあります（参考：リストをinlineで並べた時の余白｜CSS HappyLife）。
でも、この余白はそもそも何者で、なぜ現れるのでしょうか。
余白の正体
結論から言うと、この余白の正体は空白類文字です。 marginやpaddingの暴発ではありません。
では、なぜ何もない場所に急に空白類文字が現れるのでしょうか。 この謎を解くには、まずは空白類文字について調べる必要があります。
空白類文字 1
文書文字集合には、多様な空白類文字が含まれている。その多くは、特定の視覚的スペーシング効果を生成するために何らかのアプリケーションが用いる印刷術的要素である。 HTMLでは、次に挙げる文字だけが空白類文字であると定義される。
- ASCIIスペース ( )
- 水平タブ (	)
- 書式送り ()
- ゼロ幅スペース (​)
行区切り類もまた、空白類文字である。
Paragraphs, Lines, and Phrases (ja) 9.1 空白類 より引用
ここで注目すべきは、行区切り類もまた、空白類文字である。
という部分です。 そしてこの行区切り類の項目を見ると、次のように書いてあります。
行区切り類
1つの行区切りは、1つの復帰 (
)か、1つの改行 (
)か、1つの復帰/改行組であると定める。
Paragraphs, Lines, and Phrases (ja) 9.3.2 行区切り類の制御 より引用
復帰と改行、という和訳単語が出てきますが、これはそれぞれCRとLFの事です。 復帰/改行組というのはCR+LFの事です。
（参考：テキストファイル - Wikipedia）
（LF == 行送り == 改行 だと思うんですが、違ったらご指摘いただければと）
空白類文字 2
改行が空白類文字である事が解ったところで、再び空白類文字について調べてみます。 この空白類文字とは何でしょうか。
ばけらさんの用語集に簡潔かつ解りやすく載っていました。
HTML において、ASCII spaceと同様に扱われる文字です。
用語「空白類文字」@鳩丸ぐろっさり (用語集) より引用
ASCII spaceと同様だそうです。 なるほどですね。
・・・実はASCII spaceが解らなかったので、更に調べてみました。
ASCII文字の 32 番目の文字。16進数で言うと 0x20 。いわゆる半角空白のことです。
用語「ASCII Space」@鳩丸ぐろっさり (用語集) より引用
なるほど。 つまり、空白類文字とはHTMLにおいては半角スペースと同じ扱いなんですね。
ここまでのまとめ
行区切り類は空白類文字なので、改行は空白類文字である。 そして空白類文字とはHTMLにおいて半角スペース扱いである。 という事が分かりました。
これで、li要素を改行すると半角スペース分の余白が現れる理由が解りました。 やったね！
新たな疑問
・・・でもちょっと待ってください。 改行はHTMLのソースコードの中にたくさんあります。 li要素にしても、改行をしたら必ず余白が現れるわけでもありません。
空白類文字が現れる場合と現れない場合があるのは、なぜでしょうか？
改行をすると空白類文字が現れるのは、どうやらインラインボックス及び匿名インラインボックスのみのようです。
この辺りに関する仕様書の記述は見つけられなかったのですが、Web標準普及プロジェクトのドキュメントの中に近い物がありました。
上記の例にあるように、要素中に改行が混じるとやや複雑な形で表示されます。 これはインライン要素によって生成されるボックスは改行によって複数に分割されることがあるためです。 この分割された面にはborder, margin, paddingはその表示が行われません。
ブロックレベル要素とインライン要素 - Web標準普及プロジェクト 3.インライン要素 より引用
引用元にはli要素をdisplay: inline; で横に並べているサンプルがあるのですが、これを選択状態にすると、空白類文字がある事がわかります。
インライン要素によって生成されるボックスは改行によって複数に分割されることがあるため
、というのはli要素の内容と空白類文字が分割された事であり、この分割された面にはborder, margin, paddingはその表示が行われません。
、というのは空白類文字側の事なのではないでしょうか。
key-childさんからコメントいただきました。
関係ありませんでした。
結論
インライン及び匿名インラインボックス、匿名ブロックボックス内で改行をすると、空白類文字（半角スペース）が表示される。
空白類文字に関しては、もう少し色々とあるんですが、長くなりすぎたので今回はとりあえずこの辺りで。
空白類文字についての補足・及び言及への返信 | Blog hamashun.comへ続きます。
手動トラバ
トラバがうまく送れないという報告を受けたので手動トラバです。
JavaScriptでli要素を一行につなげる - colorhythm
ありがとうございます！