先日紹介した究極のマルチカラムリキッドレイアウトを使ってページを作ってたときのこと。
FireFoxで確認しながら「だいたいできたかなー」と思ってIE6での確認をしたらレイアウトがガン崩れしてた。col1～col3のボックスがガッっと右に寄ってた。
数時間かけてわかった原因はXML宣言をコピペし忘れていたことだった。
＃本家のソースをマルコピしたものからXML宣言を削除したら同じ現象が起こった。
つまりどうやらIE6の「後方互換モード問題」によるものっぽかった。
＃後方互換モードの話は、「後方互換モード」でググれば死ぬほどでてくる
究極のやつは標準とか後方とかに影響される要素は使ってないんじゃなかったっけ、と思ったが、たぶん筆者の知識不足か英語力不足なんだと思い直し、更なる学習への意欲を燃やしたのであります。
ここのところ、XHTML＋CSSを勉強しながらサイト作成に四苦八苦しているわけですが、またもお手本を探そうとインターネットしてたらすごいのが見つかりました。
Ultimate multi-column liquid layouts
訳して「究極のマルチカラムのリキッドレイアウト」。
詳しくはリンク先を見てもらうとして（英語できない人はがんばって読むと将来の幸せ度が上がると思います。筆者もがんばって読みました。）、筆者が印象に残ったポイントだけ挙げると、
・フルクロスブラウザ対応だよ
・XHTML 1.0 strictに準拠してるよ
・JavaScriptなんて必要ないさ
・画像は使ってないよ。デザインには必要ないさ
・お金？そんなものいるわけないじゃないか。勝手に使ってくれよ！
という感じで、とにかくすごいようです。
で、自力でシコシコやろうとしてたけど、どうせまったくそのまま使えるわけはないし、HTMLだけに時間を使ってられないし、いいお手本ベースでサイト構築するのはいいものに囲まれて育つのと同じで、きっとハイソなウェバーになれると思うんです。
と、いろいろ言い訳をしながら、これをベースに使わせてもらうことにしようと思っております。
あと、提供もとのマシューさんは、サイトのURLを書いてメールしてくれたらサンプルサイト一覧に載せるよ。そしたらタダでアクセス稼げるぜ？というオマケ提案も提供してくれているようです。
h1だけに限らないけど、テキストを背景画像に置き換えたいときにつかうCSSテクニックがあるじゃないですか。
これをやろうとしたら、FireFoxでは背景画像が表示されるのに、IEで表示されないという現象が起きた。
けっこうハマったのでメモ。
======================
div#header h1{
width:336px height:98px; margin:0; padding:0;
background:#fff url(../images/title_logo.gif)no-repeat top left;
}
======================
とやってたらFireFoxではでるのにIEででない。
相当ハマった挙句、結果なんとno-repeatの前に半角スペースがなかったからだと判明
======================
div#header h1{
width:336px height:98px; margin:0; padding:0;
background:#fff url(../images/title_logo.gif) no-repeat top left;
}
======================
これだと表示された。
うーん。むなしい。
ホームページを作るならXHTML＋CSSである。
詳しくはここを読むべし。
http://www.atmarkit.co.jp/fwcr/rensai/imasara04/imasara04_2.html
筆者はあんま本格的にやったことないが、一からがんばってみる。当然高価なソフトは使わない（使えない）。男は黙って手作業。
とはいっても知識ゼロに等しい筆者なので、まず何をやるかというと先生探し。
CSSによるレイアウトの組み方をパターンごとに説明してくれている。
http://pyridoxin.blog55.fc2.com/blog-entry-547.html
http://www.geocities.jp/multi_column/practice/3column1.html#liquid
見本をガッとコピペすると、何がどう効いているのかがわからなくなるから一個ずつ動作を確認していきましょう。
とりあえず筆者は、骨組みを作るところまで行きました。
なお、こーゆー作業においては、ローカルにWEBサーバを立てるといろいろと都合がいい。
「WEBサーバを立てる」というと大事に聞こえる人もいるかもしれないけど、Instant Railsとか使うとちょちょいでセットアップできたりする。InstantRailsの場合は、
{InstantRailsインストールフォルダ}\apache\conf\httpd.conf
のDocumentRootを書き換えればOK。
※DocumentRootには日本語の入ったパスは使えないので、DocumentRootに日本語が入らないようにすること。
本番さながらのドメイン名でアクセスしたい場合はHOSTS書き換えましょう
C:\WINDOWS\system32\drivers\etc\hosts←環境によって違うかも
============
127.0.0.1 localhost←元々ある（はず）
127.0.0.1 www.example.com
============
という感じで追記する。なお、追記した後は、一旦ブラウザを閉じて開きなおさないとダメです。
筆者は、とりあえず骨組みを組むところまではできました。
HTMLコーディングもけっこう楽しいかも。
