« 「ひとつの ブログで会社が変わる」Amazon予約受付開始 | Home | 月刊ネットショップ＆アフィリ »
2005年11月11日
三段組のスタイルシート
先日公開したばかりの新ブログ、
「firefox 1.0.7 で表示すると、位置がバラバラになってしまいました」
とS氏から指摘メールをいただいた（ありがとうございます！）。恥ずかしながら、ブラウザチェックを何もやっていなかった。Firefoxどころかネスケにマックですら危うい。
さっそく、最近使っていなかったFirefoxで見てみた。
どうなっているんだろう。
・・・ひどい。酷すぎる。
一昨日は新宿で「もじら組」ながめら屋さんと歌舞伎町の小料理屋さんで飲んでいたのだが、間違ってもこれは見せられないな・・・。
崩れ方から、原因は明らか。
スタイルシートの記述ミスで、ブロックごとの位置指定方法が間違っている。
大幅な崩れはすぐ直ったが、コンテンツ部分全体の定義が（Firefoxで）うまくいっていない。手を変え品を変え・・・だが、ブレイクスルーが見えない。うーむ。
思えばブログのカスタマイズに手をだしたのが半年前。最初はCSSが全くわからず、ひとつ変えては反映させて、「やばっ、さっきより崩れてしまったぁ！」などと悪戦苦闘していたのだが、人間、こんな年になっても学習能力はあるもので、いつの間にかなんとなくだが、わかるようになってきた。
それでもやはり、今回みたいにちっちゃなところでつまづき（多分正解がわかったら「なーんだ、ここが間違っていたのか」と思うのだろう）、何時間もロスタイムをしちゃうことはたびたびある。
●自分が使ってる参考書籍
・HTML+CSS Handbook 2nd Edition
・Movable Typeスタイル&コンテンツデザインガイド
＋＋＋
ついでなので、WADA-blog（わだぶろぐ）の三段組を簡単に説明（あんまいじってないので、基本的にはココログ標準のまま）。ブログで一般的な三段組（３カラム）で、全体を「id="container"」、左サイドバーを「id="left"」、右を「id="right"」、そして中央の記事部分を「id="center"」と名づけ、それぞれ大きさや配色、配置などをスタイルシートで定義している。
（ちょっと昔なら、テーブルタグでこなしていたレイアウトですね）
そして、それぞれのブロックの定義はこうなっている。
#container {
width: 900px;
text-align: left;
margin-top: 3px;
padding: 0px;
background-color: #CCCCCC;
}#left {
position:relative;
width: 200px;
float: left;
left:-700px;
background-color: #CCCCCC;
overflow: hidden;
}#center {
position:relative;
width: 500px;
float: left;
left:200px;
background-color: #FFFFFF;
overflow: hidden;
}#right {
position:relative;
width: 200px;
float: left;
left:200px;
background-color: #CCCCCC;
overflow: hidden;
}
ページのほうのテンプレートはこんな感じだ。
（思い切り省略しています）
<html>
<body>
<div id="container">
<div id="center">
中央の記事部分
</div>
<div id="right">
右サイドバー
</div>
<div id="left">
左サイドバー
</div>
</div>
</body>
</html>
通常なら「左」→「中央」→「右」の順序にすべきなのだが、「中央」→「右」→「左」にしている。その理由は３つ。
●携帯閲覧
携帯で見る時に、まず中央の記事部分が表示されるように。もちろんOperaなどフルブラウザで見る分にはいいのだろうが、自分はウィルコムのPHSでも表示が早くて見やすい「ケータイモード」というのを使っている。小さな液晶で毎回サイドバーから見ていくのはしんどい。携帯用のテンプレートは作ってあるけど、トップページだけ携帯用テンプレートを切り分けても、記事の個別ページを切り分けることができないので（あるいはその方法を自分が知らないだけかも）あまり意味がない（早く携帯対応しないかなあ・・・Type Pad）。
●音声読み上げソフト用
同様に、音声読み上げソフトを使って見ている・・・いや聞いている人もいる。
その場合に、毎回変化のない左サイドバーから読み上げるのでは面倒だ。やはり中央の記事ダイジェスト本文から読み上げたほうが必要な記事にたどり着きやすい。
●表示
時々、凝ったテンプレートでもないのに、表示が遅いブログがある。よく見てみると左側にアフィリエイトのバナーを大量に貼り付けていたり、BlogPeopleなどのブログの各種パーツを貼り付けている。サーバ状況によってそれらの表示に時間がかかると、中央の記事部分がなかなか開かなくなることがある。試しに左サイドバーに掲載しているものを全部右サイドバーに移動するか削除するかしてみるといい。それで中央がするりと表示されるようなら、左側のお荷物がボトルネックになっていた可能性が高い。WADA-blog（わだぶろぐ）では「中央」→「右」→「左」の順序にしているので、最初に中央が開き、ワンテンポ送れて右左が開く形になっている。
＋＋＋
ただ、正直なところ、スタイルシートはココログの標準スタイルシートを見ながら手探りで書いてるだけなので、これが正しい記述になっているかどうかはよくわからない。もしかしたら、自分がチェックしていないブラウザで、めちゃくちゃな表示になってしまっている可能性もある。そんな「異常表示」を発見したら、コメントでお知らせいただけると助かります。
私は普段Firefoxを使っているのですが、表示が崩れてしまっているサイトに時々出会います。
それが特に仲良くさせていただいている方のサイトだと、「崩れてますよ～」って教えてあげたくなるのですが、これってやっぱり教えてあげた方がいいのでしょうか。
なんだか「俺の環境じゃ見れぇんだよ、ごるぁ！」とクレームつけてるだけのような気もするし、かといって、Firefoxユーザーとしては崩れが気になるし...。
中には「Firefoxとかネスケとか、使ってる人が少ないんで無視してるんですよ～」という方もいたりして。
ユーザビリティーの向上を考えれば教えてあげるべきなんでしょうけどねぇ...。
追伸
アフィリエイト・カンファレンス、よろしくお願いします(^^)
私もCSSの勉強を始めてコツコツ派遣サイトの作り変えをし、やっと2/3ぐらいまで出来たよ～と喜んでたのもつかの間。
Firefoxで確認したら、愕然としました(^^;
あまりのショックに、当分放置してたんだけど、最近やっと完成しましたよ。（疲れた・・・）
でもIEとFirefoxしか確認してませんが・・・。
あの、ショックは未だに忘れられません(^^;;
うかさん、
今回指摘してくれたSさんは、そのちょっと前に勉強会でお会いしたばかりの方でしたが、わざわざメールして指摘してくれたのはすごく嬉しかったです。とても助かりました（指摘がなかったら、余計な恥をかくところでした）。
でも、Firefox・・・なんじゃそりゃ？・・・な人とかもいたり、確かに最初から切り捨てている人もいるから、指摘しにくいってのもありますよね。「Firefoxユーザが急増中」とか「Firefoxのすすめ」みたいなブログ記事を書いてみるってのもありかも。
TUNKAさん、
IEは、記述が間違っていてもちゃんと見えちゃったりするおおらかさというか、ずぼらさというかあって、つい気づかずってことがありますよね（自分はSleipnirなんですが、ブラウザエンジンがIEなので一緒）。
そういえば、ずっと前、「和田さんのサイトはこう見えるんだよ」って、自分の持っているノートパソコンで見せられた時にはすごい赤面しちゃいましたね（あ、それががめら屋さんだったのを今思い出した）
うちは今、
「中央」→「左」→「右」
で作ってます。
ＭＴ最新版のデフォルトテンプレートには、各ブラウザのバグ対策コードもたくさん入っていて、勉強になります＆勉強するのがタイヘン（＾＾；）です。
携帯でWADA-blogを見たときに
「あ、こういう風に見れるの、嬉しい♪」
って思ったことを思い出しました。
やっぱり気遣いあってのことだったんですよね。
正直、左バーから順には泣きそうになることも。
でも携帯対応のサービスをうたってるブログサービスみたいに中央だけというのも、ちとものたりなかったり。。。（過去記事に直接飛びたかったりするので）
山＠ＳＵＲＶさん、
> ＭＴ最新版のデフォルトテンプレートには、各ブラウザのバ
> グ対策コードもたくさん入っていて、勉強になります＆勉強
> するのがタイヘン（＾＾；）です。
おお、そうなんですか。それはちゃんと見てみなくっちゃ！
やっぱデフォルトのテンプレートから勉強できることって多いですよね。（まだアップグレードもしてないんです、自分）
みにぃさん、
自分が携帯で他の人のブログをチェックすることが増えているので、やはり携帯対応度は気になりますね。携帯向けのテンプレートセットがあって、それもいじれるってのが一番いいですよね（Livedoorブログも、あれで携帯用のテンプレートがカスタマイズできたら、ほんと最高だなあと思っちゃいます）
ココログ（Type Pad）でも、何かうまくやったら、携帯用のトップページテンプレートを作って（これは簡単）、そこから携帯用のアーカイブページを開くなんてことができるんじゃないだろうか？と考えているんですが・・・。どうすればいいのかなあ。
別件でファイアーフォックスで崩れてぐちょぐちょのサイトを作って困っていましたが解決のヒントになりました
ブラウザが違うといろいろ発見がありますよね
▼和田さん
アドバイス、ありがとうございました。参考になりました(^^)
ということで思い切って言っちゃうと、協会のサイト、「Main Contents」あたりがグチャっとなってます。その他にも微妙なところがチラホラと...。
いつか誰かに伝えたかったのですが、誰に伝えればいいのか分らなかったので、ぶっちゃけてしまいました(^^;
みちるさん、
> ブラウザが違うといろいろ発見がありますよね
ですね。なかなか面倒でもありますよね。ある意味、HTMLという記述言語を作った人の、そこが本当にすごかったんだなあと思います（誰でも見れるんですもんね）。
うかさん、
> ということで思い切って言っちゃうと、協会のサイト、
> 「Main Contents」あたりがグチャっとなってます。
> その他にも微妙なところがチラホラと...。
ははは・・・こちらでしたか！！！
ありがとうございます。
> いつか誰かに伝えたかったのですが、誰に伝えればいいのか> 分らなかったので、ぶっちゃけてしまいました(^^;
これは伝えてもらって嬉しいです。
WEB担当はちょっと忙しそうなのですぐには直らないかもしれないのですが、協会は「Firefox切捨て」ポリシーでないので、直さなくちゃですね。ありがとうございました。
僕もちょっと前にFireFoxに泣かされたのを思い出しました...
しかも、実は間違っているのがIEの方だと知りもう一度泣きました。。。
今でもよく分からないのですが「何とか表示はできてる」みたいな感じです（笑）
みんな、一度は通っている道なんですね。
> しかも、実は間違っているのがIEの方だと知りもう一度泣きました。。。
IEのルーズさに、甘やかされちゃってますよね。
はじめまして、ことぶきと言います。
突然、約一年も前の記事へのコメント、スミマセン。以前から、ちょくちょくと楽しく拝読させてもらっています。初心者ブロガー（と言えるかどうか？）にとって、ためになる記事が多く有難い次第です。色々と勉強させてもらったり、ブログのソースを見せてもらったりと、ブログ作成の参考書にさせてもらっています。（勝手に取り入れたりしてゴメンナサイ！）
「中央」→「右」→「左」の表示はＳＥＯ対策だと思い込んでいたのですが、この記事を読み、自らの浅知恵を痛感しました。また、変なところにコメントするかもしれませんが、大目に見てください。
ことぶきさん、
コメントありがとうございます！過去記事へのコメントは、新着記事へ以上にうれしいかもです。ソースは、そんな特別なものはないですが、誰かに参考にしてもらえれば幸いです（自分ももちろん、他の人のを参考にカスタマイズしてきてるだけですから）。
中央→右→左表示は、確か自分は「携帯でストレスなく」が最初に来て、その後、全盲の方と知合いになって、その人にとって最適なブログを心がけよう・・・と思い、読み上げソフトを意識するようになりました。最近その感覚が薄れてきちゃったので、もう一度ちゃんとバリアフリーになってるかどうか、再点検が必要だなと今思いました。