CSS 擬似フレームへの道のり

　このブログをPCから見たときのデザインだと左側にプラグインメニューがずらーーーーーっと縦長に並んでる状態なので、すっきりさせたくて、擬似フレームなる技術がCSSだけで出来そうだというので、現在本を読みつつ。
　あーでもない。こーでもない。
　と悩みつつ試行錯誤。

　ためしに普通のHTMLエディタで、擬似フレームと場所の指定やレイアウトをやってみて。それをブログのテンプレートの独自タグとかに使っていこうと思い立った。

　そして、とりあえずやってみて、適当に弄る。（完全に仕組みを理解しないままやるので齟齬が起きる可能性が高いんだがｗｗ）

　結果。プレビューで見てみると。見事なカラム落ち。（置きたい位置に表示されませんでした）
　ぬおおおおおおおおおおおおおおっ！！

　左右両方を擬似フレームにするだけじゃちょっと面白くないので、ちょっと外側を固定部分にして作っておいて、その中をくりぬく感じで左右両方に擬似フレームで出来ないものか…と。

　全体的に枠組みを決めて。そんでもって一度左右を区切ってから。そのなかを擬似フレームとかでやってみたらいいんじゃないかと。
　その擬似フレーム置こうとすると見事にカラム落ちが続き…。

　ついさっき。ようやくpaddingとmarginの一行指定とでもいうか(padding: 1em 0 0 1em)というやり方を知りました。
　ついでにいうとmarginとpaddingの意味を本当に理解してませんでした。位置表示とその枠内での余白というか…あんまりわかってないまま、適当に指定してきたツケがここに溜まったのですね…。

　でもまー。とりあえず左右に各ボックスが表示されるということだけは、できました。
　背景色をそれぞれ別の色に指定しておいて、あーでもないこーでもないとCSS弄ったり、div移動させたり、floatだ、z-indexだ、position: fixed;アブソリュートとかまー、思いつく限りの属性を
　やっぱり適当に指定してます。
　とりあえず自分のとこはIE6でのプレビュー上は、各枠内が、なんとか指定の位置に表示できた。
　文字やリストを枠内にまだ入れてないので、文字とかの調整しつつ、次こそ擬似フレームになるように…なってくれ。
　と願いつつやってます。

　XHTMLとHTMLって機能的に何がどう違うのか未だにわからんけど。タグの規制というか法則性というか。いまいち細かい違いがわかってません。HTMLよりちゃんとタグ閉じるとかそういうことはわかってるんだけどね。あと単独タグのスラッシュ入れるとか。
　
　とりあえず今つかってるエディタがXTHMLモードなる便利なのがあるので。これがフリーのソフトってすごいです。
　一応HPのほうでも、Refarece(参考資料)や作業環境ということで紹介してますが

　HTML Project2というエディタを使って作っております。
　ベクターからでもダウンロード可。
　
　俺が試しに作ったのはHTML互換？違うの？いまいちmetaとかtext/htmlとか、そういうのが入れていいんだか悪いんだか全然わかりません。
　CSSの本片手に、たまにお菓子とか食べつつ、みかん食べて、漫画読んで読破して(ぉぃw)、脱線しつつも、ちょこちょこHPの勉強をしております。思いっきり我流だけど。
　とりあえず擬似フレームが完成したら、ブログのテンプレートで試してみて。満足したら停滞している携帯HPとか攻略データのファイルとか作ったり、レイアウト見直したりしたいと思います。

　雪が降って、まだ誰も足跡をつけていない降り積もったところに自分の足跡をつけると嬉しくなったりしません？（子供ｗｗ
　でもまー、そんなに積もらなくてよかったけどね～。なにしろ、次の日アイスバーンで道が凍ったりすると、確実に足を滑らせるので（ぉぃｗ