みりばーるさん＠てんぽより。いろいろと「らしくないなー」と感じたのですけど、夏バテ？いや、ワシが理解できていないだけですか。みりばーるさんなら、<body> 要素の直下にあたるブロック要素すべてに同じ背景画像を指定して、影（ライン）が連続しているように見せる、ふうなストロングスタイルなテクニックを書いてくると勝手に想像していました。というわけで、このテーマを暗き淵の底より考えるとどうなるか？というネタを一発（氏だとテクニックで、ワシがやるとネタなのは何故）。
HTML の段階では <div> 要素はゼロです。読み込まれたブラウザが IE かつ CSS が効いていると、いつのまにか二重 div になってるという、夏向きな恐ろしい小技。書いといてナンだが現実に使われることはほとんど無いと思う。そういった意味では、背景画像のための <div> 要素を減らす工夫というのも、あまり受け入れられないような気がする（ HTML に書き加えたほうが圧倒的に楽だから）。
今や、ブログツール大盛況のおかげで、ひとつの HTML で複数スタイルを使いまわすことは少なくなってきた。HTML と CSS は 1 対 1 の関係になりつつある。うまく言えないけど、HTML の唯一性が低くなってきているのだと思う。よく解釈すれば多様化か。背景画像のためだけにある（ような）要素というのも、これからは徐々に認知されていくのだろうなあ。
拙作がエントリされました、仕事早いです。ということで、昨日のつづきなど。前後しますが、画像を極力（中略）デザインする大会は、壱茉さん＠JamGraffitiの企画です。大会の開催、ありがとうございます。
まずは、インデントスタイルのコンセプトなど。大会公式 HTML を読み、スペースと見出しのバランスのみでも、美しいデザインが出来ること
をテーマにしようと決めました。生ソースからポイントになる部分を探し、.section ブロックが繰り返し出現すること、かつ、同じクラス名で入れ子になっていることから、この構造を生かすスタイルにしようと心がけました。他に目立つ部分があったとしても、それはネタです。製作時間は 1時間ほど。おもに Firefox で確認しながら調整し、Internet Explorer（6）で 3秒間チェックしました。いつも悩むのが「どこまでで完成とするか」という問題ですね。この CSS にはひとつだけコメントアウトされたルールが残してあります。これも適用しちゃうと「やりすぎかなあ」と消したのですけど、そこいらへんが自分の色々な意味でのボーダーラインではないかと思いました。
さて、ここを見てくださってる方は感じてるかもですけど、春木屋テイストあふれた作品だと思います。まず、インデントスタイルというネーミングなのに text-indent がまったく使われていない(爆)、「ボーダー封印しました」とか言ってるけど、実はもともと線を引くのがへたであるなど。
また、世界に向け、いい加減なヤツさを露呈してしまいました。
To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.
Noriya さん＠Primary Planet 経由 A blog? with Σαιτω - 2007 Naked Day に参加します。去年も気づくのが遅れて数時間のみ裸だった。CSS 使いとか自称してるワリには、脱いでもあまり変わらない。伊達の薄着つうことで。
他力ストリップモード（キャッシュなので、いずれ消えます）。
何人くらいの方に目撃されたかわかりませんが、春木屋がマメ字！というエープリルフールネタを仕込んでおきました。4月1日に初めて訪れた場合のみ、別の CSS をリンクするというありがちな手だったのですけど、その時に書いた CSS が自分的にちょっと面白かったのでご紹介。
幅 700px のボックスがあったとして、ごく普通にセンタリングする場合、すべての要素を<div>要素で囲み
body {text-align: center;}div#hoge {text-align: left;width: 700px;margin: auto;}てな具合にやりますね？まあ、ブラウザ界の駄々っ子をあやすための苦肉の策なんですけど、この text-align をいじらずに同様の表示をするスタイルです > no text-align centering
body {margin: 20px 0;padding: 0 50%;}div#hoge {margin: 0 -350px;}誰かがすでにやってる予感もしますが。左右の詰めを合計 100% 取るって飛躍がステキだ。この方法の良いところは、センタリングに限らず、右から 25% 位置にオフセット
body { padding: 0 25% 0 75%; }だとか、中心から左へ 100px ずらした”センタリングもどき”
div#hoge { margin: 0 -450px 0 -250px; }みたいなこともできること。
関連：省エネセンタリング
てんぽ:みりばーるさんのエントリの本質からは外れていますが正確には初期包含ブロックがbodyに見えるというだけです
という部分の謎に迫ってみます。えー、資料のPDFは読んでいませんので、一般的な HTML 文章（<body>の中に<p>がひとつ以上あって、その最初のパラグラフだけに position:absolute のスタイルづけがされている）の想定。
<body> の位置を変えてみて <p> が連動した描画がされなければ、そのフローからは外れている＝そのブロックは包含ブロックではない＝初期包含ブロックではない、という三段論法（絶対配置だけに位置のみを見ればいいので簡単）。例えば、<body>にマージンを指定した CSS を書いてみる（test 1）。資料の”ブラウザ”が具体的に何を指すのかは不明だが、Firefox では <p> は <body> から飛び出して描画され、連動していない。<body> が position: static;（初期値）なので、その祖先要素 <html> が初期包含ブロックである、という予想がたつ。
また、初期包含ブロックを <body> としてしまうと、それより外にある要素にスタイルづけした場合に、どこを基準にして描画されるのか？という疑問もからもアプローチしてみよう。（前出と同じ HTML に CSS のみ書き換えたもの test 2）。やはり、この場合でも初期包含ブロックは <head> のように見えるが、 <html> となる。2つの実験から「祖先要素のうち最も近い、position の値が sitatic でない要素、該当する要素がなければ、ルート（根）の要素が初期包含ブロックとなる」で良いのでは。
ところで、test 2 は<body> 以下をすべて display: none; して <style> 要素の内容を表示するという「頭の悪い方程式」ならぬ「頭の悪いスタイル」。少なくとも日記だけは連動していたのだ。