About CSSの最近のブログ記事

ブログのサイドバーとかグローバルナビゲーションとかの位置の話。

float を使ってレイアウトする利点の一つとして、サイドバーを左に置こうが右に置こうが、サイドバーより先にコンテンツを書けるって言うのがあると思う。確かに、いいかもっていうのと、absolute の挙動が危なっかしいので、マシな float を使ってコンテンツを先に書くスタイルでやって来たけど、ふと思った「紙媒体だとナビゲーション（目次）はコンテンツより先にある」と。（索引は後ろなんだけど、あれは検索に近し。）

サイドバーのアレとか、グローバルナビゲーションって、紙媒体の文書では目次に相当するんじゃないかと。

だとしたら、先に書いておくほうが CSS 無効時とかには良いんじゃないかという気がしている。元々、見た目で先に出現する（させる）ものは、ソースでも先に書いたほうがいいという考えですが。（うちの会社のサイトでは、社長の意向でナビゲーション系は全部フッタの直前に書いて、absolute で上に持ってきたりしているけど。）そういえば、右サイドバーの時は見た目上、コンテンツのほうが先に出てくる。（そういえば？

まぁ、SEO 的にどうとかいう話もあるかもしれないけど、ないかもしれないでしょ？

逆に先にナビゲーションを書いたほうが、「サイトマップ」の簡易版を置いている感じになって、それはそれで良いのかもしれないでしょ？

そういえば、1カラムのブログとかって結構コンテンツの下にナビゲーション要素が置いてあるけど、上にあったほうが良いかもしれないという気もする。

別にどこに書いてあっても良いけど（元も子もない

「左目に気をつけろ」風。関係ないけど。

この前、「やっぱり IE か」っていう記事で書いたんですが、first-letter に指定したスタイルが適用されないというバグ。その後、バグの原因が分かり、解決しました。解決したのは結構前で、その時点で「R-STYLES.NET」の CSS だけは修正して、期待通りの表示をしています。

font-weight: bold; が指定してある要素に first-letter 疑似要素の指定を追加すると、Win-IE は、bold どころか normal 状態になるというもの。最初は IE だけ first-letter 疑似要素が使えないのかと思ったが、first-letter に指定した color は効いていたので、どうもそう単純な話ではないらしいというのはすぐに分かった。

CSS なサイトでたまにある、検索フォーム等をチョット上に突き出させたり、何かをサイトの横幅からはみ出させたり、メインコンテンツとサイドバーの境界を超えて配置される物体があったりするあれ。

リニューアルにはあれが欲しかった。ここではフッタにある「竹」が軽くはみ出しをやっているんですが。（はみ出させ方は一般的な方法とは違うと思うけど）

チョットシンプル過ぎたのか、センスがないのか何かで、全然思いつかなかったのであんな感じになっちゃってます。チョット昔（Smart Thinkings）を思い出すデザイン？

まぁ、何かもの足りんと思っている訳です。

あと、フッタのデザインをなんとかしたい感じ。

昨日も深夜までせっせと（かどうかは疑問だが）R-STYLES.NET のリニューアル作業をやってました。

で、first-letter でも使ってトップページのタイトル部分の最初の文字を赤（#cc0000）にしてやろうと思って CSS をちょこっと書き足すと、うん、結構良い感じ。

のはずだったんだけど、IE だけ first-letter の font-weight が normal 状態になってしまう。first-letter に bold を指定してもダメ。いっそ normal にしてしまうのも手だけど、Win での見栄えが気に入らない。実は、Mac だと細いままでも良い感じの太さなんだけど、Win で見るとチョット細すぎなので仕方なく bold にしていた。

今度は、IE で見たらあえて崩れまくるサイトにしてやろうかと思っていたけど、気づいてしまった。（遅すぎ）崩れている理由が分かる人って大抵 IE 以外のブラウザ使ってる気がするし、IE 使ってる人で崩れている理由が分かる人は少ないはずだということに。

つまり、IE で崩れる仕様にしていると、ただのアフォだと思われる可能性が高い。

流石にそれはキツイので、止めました。何か変なバグとかに引っかかったのかな。

二つの意味で「やっぱり IE か」

Safari3 から Windows 版が出るみたいですね。

なんかかなり話題になっている気がするけど、私としては「へぇ、出るんだ」くらい。

Windows マシンはもう Firefox だし、Safari はやっぱり Mac で使ってこそじゃないかと。私が Mac で Firefox を使わずに Safari を使っているのは RSS リーダ機能があることと、Mac 版の Firefox の起動が遅いとか、line-height のバグがあった（修正済）から。

Windows 版の Safari にそれほど興味がない最大の理由は、Web ブラウジングは専ら Mac でやっているからです。文字がね、全然違うんですよ。

最近は Web 制作関係も、Windows の Photoshop か Fireworks で画像を作ってスライスしたら Mac に移して mi でコーディングしています。で、Windows 環境のチェックをするとホントにガッカリする。やっぱり、文字がね、全然違うんですよ。テキストを流し込んだときの見た目が全然違う。

ただ、少し気になるのは、新しいブラウザなのかどうか。

Web 制作に関しては、どのブラウザでも同様の見栄えを実現するのは当たり前的に依頼されるんですよね。なので、Mac 環境のない Web 制作者は Safari で表示チェックが出来る的な事を書いている人も多い。凄い不思議なんですけど、レンダリングが違う可能性を考える人を見かけない。Firefox だって Win 版，Mac 版，Linux 版と全部微妙に違っていたのに。（今も？）

まぁ、私としては別物の方がいかに差異を埋めるのかを考える楽しみが増えていいんですが（笑

ちなみに、私は完成してからインストールしてみる予定です。

そういえば、日本語未対応ということらしいですが、アルファベット表記の日本語フォントを指定すれば、現状でも日本語 OK らしい。（MS Gothic, etc.）

どうでもいいけど、IE みたいに Win-Safari, Mac-Safari みたいに書くようになるのか。格好悪い…

今日は早起きしてなぜかお好み焼きを作って朝食。全く関係ないけどね。

早速本題ですが、Win-IE のバグの一つに「 float したボックスの左右 margin が 2 倍になる」というのがあると思うんですが、その対処法を思いつきました。

私の場合は、一般的かどうかは知りませんが、今までは以下のどれかで対応していました。

• float したボックスの内側にある全ての要素に左or右 margin を指定。
• float したボックスに左or右 padding を指定して内側に div を用意。
• float したボックスの内側に div を用意し、その div に左or右 margin を指定。
• ハックを利用して Win-IE に半分の margin ?

一番下のは多分やってないと思いますが、主に 1 番上の方法で、2, 3 番目の div は用意するというか、実際には内側にあればそれを利用という感じです。

それで、今回思いついたのがこれ

position: relative; を指定して left or right で指定。

何で今更こんな事に気づいたのかと言うと、サイトリニューアルに伴って、CSS のコーディングルール（自分用）を整理しておこうと思っていたんですが、記述順に関する以下の３つのルールを考えた際に実験してみたのが始まり。

1. プロパティの記述順序はアルファベット順。
2. border, margin, padding 等で top, bottom, left, right の指定は 1 を逸脱し、ショートハンドの順に従う（top, right, bottom, left）
3. top, right, bottom, left プロパティは 2 と同様の順とし、関連性の高い position プロパティの直後に記述するものとする。

3 の「関連性の高い」って部分を確認する為に、top, right, bottom, left プロパティの説明を見ると、「position プロパティが static 以外の場合」的な事が書いてあったので、static というのは通常フローということなので、「float プロパティが none 以外の場合も当てはまるのでは？」と考えて、実際にやってみることにしました。

実験用として float: left; なボックスに left: 10px; を指定すれば、margin-left: 10px; を指定した場合と同様の表示になるかどうかで検証しました。

結果は「同様の表示は得られない。」でしたが、この発想はあのバグ回避に使えるじゃないかと思ってやってみたら、成功したと言う訳です。

今度からコレ使って行こうかと。

CSS で "width: 100%; " と指定した要素の幅は何 pixel(s) でしょう？

答えはご存知の通り「包含されている要素の幅による」ですよね。（違ってたらどうしよう

では、それが body 要素に直接の子要素として配置されている要素だったら？

答えは「Web ブラウザ描画面の幅と同じ」でしょう。

さて、次の質問。Web ブラウザ描画面の幅って何 pixel(s) ですか？

もう「そんなの知るか！」って感じですよね（笑

そこで、もう少し限定して、"Web ブラウザはメジャーな物で、起動した時のウインドウの幅： 800px かつ，body はメジャーな Web ブラウザのデフォルトスタイル" とします。（徐々に本題に近づいてきましたよ。

答えは 800px …　ではなくて、「800px 以下」です。「お気に入り」とかあるので。もっと考えた方は、ウインドウのボーダーやスクロールバーの分もあるから「800 px 未満」だぜ！って思われたかもしれません。しかし、正解！とは言えません。スクロールバーに関してはコンテンツの量（や CSS）に依存するので何とも言えませんが、ディスプレイの幅が 800px で最大化が初期状態で起動された場合や、Mac 環境ではボーダーレスです（ウフフ

よって、答えは「800px 以下」です。

この条件下で、再びこの質問。body 要素に直接の子要素として配置されている要素の幅を "width: 100%;" で指定したら、その子要素は何 pixel(s) でしょう？

答えは「800px 以下」です。

更に条件を追加して、ウインドウのボーダーやスクロールバーはない状態を仮定。

ここでやっと「800px」が答えになります。

と言う訳で、ここからが本題ですよ〜（遅すぎ？