毎度、標準標準ゆってても、ちっとも春木屋らしくないのでやや遠い所から攻めてみる。
見せたくない部分を見えないように工夫するよりも、見せたくない部分は最初からデータにいれないほうがいいという話。
さすが、えっけんさん。タイトルと一行目ですべて言い尽くしてます。display:none;は見せたくないものを隠す、ではなく、見えなくてもいいものを隠す、が本旨でしょう。見えなくてもいいものは、見えてもいいものでなければならない（集合論か^^）
せめてネタバレ部分は、RSSリーダーには反映されない部分
に書いて欲しいというのには同意です。RSSリーダーでなくともCSSをはずして、ぼーっと読み進めていたらそこはバレ部だった！ってのはちょっと切ない。
先に読まれてはまずいものは、別ファイルに書き、リンクしておけば良いのだけど、毎回新しいファイルを作るのは面倒。そこでFC2ならではの機能を使い、答えを見えにくくするというのをやってみよう。だが、そのためにはまず問題編を作らねばならない（それは面倒じゃないのかと小一時間）。
<div>）のレイアウト用CSSを予想しなさいルールは以下の通り。
<span>ID名</span>のみを持つ<style>要素に個々の背景色、初期の高さ50pxが指定されている<div>で、4つの箱のみを内容とする。また、ID #mainが設定されており、<style>要素にposition:relative;が指定されている> 検証用ツール（テキストエリアにCSSを記述し、OKをクリックでスタイルが適用されます）
まずは、ウォーミングアップ。
> 解答はこちら
なんだかよくわからない話になってしまったが、問題と解答を別ファイルにして行き来するには、レスポンスがキモである、とか、平凡なHTMLでも非凡なレイアウト（笑）ができるんじゃないか？という各点からWEB標準にスルドク迫っているのだった、いちおう。
< CF of HONDA Civic | ちょこビュ：解答からのカスケード > | 表紙へ戻る |
文字を見えなくする方法が少し違いましたが。
CSSの絶対値指定レイアウトは、パズルみたいで楽しいですよね。
数年前、これみたいな感じで「壁にメモを貼っているような掲示板スキン」というのを見たときに、CSSって面白いなあとはじめて思いました。-02日19時
＞パズルみたいで楽しいですよね。
そそ、そうなんですよ。あっちを押すとこっちが出っ張りってやってるのが楽しいんです（違
問題編は、４つの箱をヘッダ・コンテンツ・メニュー・フッタに見立てて
→ http://blog2.fc2.com/s/sug/file/20060702f.jpg
とか
→ http://blog2.fc2.com/s/sug/file/20060702g.jpg
やら、でも、こりゃ突っ込まれるやろ！と
→ http://blog2.fc2.com/s/sug/file/20060702h.jpg
まで考えたんですが、そもそもがワンカラマーだしなあ･･･
というわけで、奇抜なレイアウトができたら、逆襲してみてください。-02日20時
http://blog12.fc2.com/p/poets/file/4boxes.gif
画数合ってますか・・・？-03日02時
でも、解答の一行目は何となくやられた感がありますね…
マージン指定のみでやりましたよ、ハイ（笑
ところで、z-index 要りますか？
>> 耳呈さん
スゴヒ…-03日04時
せんせいの指示にしたがって、１からひとつひとつやってみましたー。
これも面白かったですが、CSSを入れたら画像があっちこっちへ動くスクリプト、
あれも楽しかったです。
「答えを見えにくくする」ことをやってみるために小一時間
という時間のつかいかたにたまらなく優雅さを感じます♪
http://bittersweetdreams.blog9.fc2.com/blog-entry-589.html-03日17時
耳呈さん
どうやっているのか（おおよそ）見当がつきますが、実現してみる気力がありましぇん。
ストライクゾーンを外すにしてもボール一個分とか･･･いきなり牽制球で刺された気分です。
R'styleさん
＞ところで、z-index 要りますか？
positionの値が同じだったら、後の記述ほど手前になるんですよね？必要なかったです^^
sugarさん
＞覚えたてのpositionつかえましたー。
しゅがさんチェーックのよく入る、コメント欄のヘルプ↓もpositionです。
ご存知の通り、ひとすじなわではいかないプロパティなので遊びながら理解が身につくと良いですね。
＞「答えを見えにくくする」ことをやってみるために小一時間
ツールは流用品です。今のテンプレのトップメニューが4ケなので、どうレイアウトするかのシュミレーションのために作ったものです。
というわけで、今日の裏解説はここです。
このエントリの趣旨としては
1）なんでもいいから、何か問題を出す
2）いちおう、簡単には解けないようにトリックなんかも組み込む
―”4つの箱”を連呼したり、ウォーミングアップを見せ、divにしかスタイルをあてられないとミスリードさせる
3）「えーわかんなーい。答え見ちゃお」と解答をクリック
4）コメント欄に正解が！(｀･ω･´)
―「なるほど、別エントリのコメント欄に編集機能を使ってバレが書いてあるなら、RSSにも引っかからないし、どんな環境でも読めるじゃん！」 ← メインテーマが劇的に浮上
というような展開を企んでいたのですが、
うちに来るお客さんは、皆ひとくせあるというのを失念しておりましたー（褒めてんです）
(￣ -￣)｡oO( 即答とか、いきなり習字始めるとは思わんじゃろ、ふつう…)-03日20時
Question：4つの箱（<div>）のレイアウト用CSSを予想しなさい
→ http://blog2.fc2.com/s/sug/file/20060703a.jpg
モザイクが妖しげだけどソース量を表してます。CSSが短いほど高得点（?）とします。
（IEではセンタリングされなくてもOK。スクショ撮ってから気づいた）
解答は、問題の画像ファイルをナニすると現れます。-03日20時
#div1,#div2,#div3,#div4{height:100px;width:100px;float:left}
#div1 {background-image:url(http://pcafe.blog3.fc2.com/file/1.gif)}
#div2 {background-image:url(http://pcafe.blog3.fc2.com/file/2.gif)}
#div3 {background-image:url(http://pcafe.blog3.fc2.com/file/3.gif)}
#div4 {background-image:url(http://pcafe.blog3.fc2.com/file/4.gif)}
#main{width:200px;margin:auto}
（アウェー不利ですが）
えと・・・寄り目にしてもわかりません （バイナリ読む、とか？）
-04日20時
スタイルシートには違いありません。-04日21時
背景画像を使うなら
#main div { display:none; }
#main { background: url(一枚絵); height:200px; }
#main { width:200px;margin:auto; }
と3行でできますね。（画像は200px X 200px で）
解答は問題の画像ファイル（のURI）をいぢると現れる仕組みです^^-04日21時
・・・・まいりました〜 ○十＜
-04日22時
が、#div* が無いので多分違うんでしょうね…
しばらくしてからまた考えてみます（笑-05日08時
ま、問題がCSSを「答えよ」でなく「予想しなさい」ですから、答えは複数あると思われます（それで出題者といえるのか！）
あまり根をつめませぬよう。-05日19時
ご利用ありがとうございます。
検証ツールは自由に編集・配布してもらってかまいません。使い道によっては次のエントリにあるツールの方が柔軟性があると思います。面白いものができたら、コメントなどいただければありがたいです。
-17日20時