CSSに関するネタを中心に色々書いてます。
IE6で、floatで指定した値と同じ方向にmarginの指定をすると、指定値の倍程度になってしまうっていう有名なバグ。
その対策として、marginの代わりにpaddingを使うとか、親要素でpaddingを取るとかあったりしますけど、一番手っ取り早い感じで、問題が無さそうなdisplay: inline;を指定する方法がありますよね。えぇ。
何となく他のブラウザに影響ないの！？って思ってしまうかもですが、
こういう矛盾しちゃいそうな指定がされた時はどーしたらええの？っていうのがちゃんと仕様で決まってるので仕様通りに動いてくれるブラウザさんなら問題ないわけです。
そうなんですよ。仕様通りにね、動いてくれるブラウザさんならね。
タグとかめんどーだから、入れる気無かったんですけど、今更になって悪くないかも？とか思い始めたので、試しにタグクラウド設置してみました。
トップページの下の方におりますが、あんまり古いエントリーとか、タグ付け自体が適当だったりするので、あんまり使い物にならないかもしれません。。。永遠のベータ版です。
で、まぁかっこ良さげなタグクラウドを頑張ってつくろーとkiai出して作ってる途中に、ふと3ping.orgさんを思い出し、過去記事をあさってたらTag Cloudのスタイルというエントリーがありました。
んで、被ってる感じバリバリだからいっかーとか思ったんですけど、何となく作っちゃったんで公開っていう流れです。えぇ。
にしても3つほど作ったら疲れました。
ダウンロードとか実際の表示を見たい方は以下より。
17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。
ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。
というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？
ヘッダーって作るの大変というか、厄介だったりしませんかね。
全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。
文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。
今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。
感謝感激でございまする。
デザイン提供してくれた方はこの人↓
2カラムなサンプルです。
海外で流行気味？ということで、「クリーンな水平分割」が出来そうなサンプルです。
どんなもんか見たい方・欲しい方は以下よりどうぞ。
この辺で知りました↓
POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行？
タイトルが長い…
サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー
10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました）
さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。
2カラムのサンプルを色々作ってみました。
事の発端は、Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!を見ててですが、こういうレイアウトサンプルサイトは色々あって、P O P * P O Pさんでも紹介されていますね。
IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | P O P * P O P
http://www.popxpop.com/archives/2007/04/ie7csscss_layouts.html
で、まぁ日本語のサイトがあんまり無いっていうのと、どーにもこーにも使い勝手が悪い気がしてならないので、自分が使いやすいだろう2カラムのサンプルを作ったという訳です。
細かく作っていけば限りなく出来るけど、13種作ったら疲れました。
11からは既にネタ切れ感が無きにしも非ず・・・
次は3カラムも色々つくろうかなーとか思ってます。
ってことで作りました。
3カラムサンプル18種
久々普通のエントリーだ。
なんか、デジパの中の人が、Web標準の日々に出ちゃうらしいです。
この人→ネットのサラダボウル: Web標準の日々に参加します。
皆色々やってるなぁ～、ボクも負けてられんなぁ～
ソレとは関係ないけど、デジパの社員は半分くらいの人がブログ書いてるんすけど、Ｂ to Ａ 赤坂で働くWebコンサルタントの日記とかのエントリーで逆立ちって。。。。
皆色々やってるなぁ～、ボクも負けてられんなぁ～
さて、そろそろ本題に。
以前のエントリーでパンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種ってのを書いたんだけど、その後色んなサイトで書かれてたパンくずリストのエントリーや、コーディングコンテストのソース覗いてたりして、今後どうやってマークアップしてこうかなぁ～って悩んでた今日この頃。
そんな訳で、良いか悪いかは別として色々考えてみた。
久々に定義リストを横並びにしたら、IE7で上手くいかず、ちょっと苦戦したのでメモめもMEMO。
おそらく、ddがテキスト量などで高さがdtより多い場合は問題が無いんだろうけど、dtの方が高さがある場合、IE7だと上手い具合に回り込みが解決されない（っぽい
dtの方が高さがある場合。っていうのは今回の場合は画像にdtが来て、ソレを定義付ける説明がちょろっとあるようなイメージ。
たぶんこのサイトの何処かを探せば、IE以外で背景が繰り返さないとか、IEだけ文字が消えちゃうとかって類いについて書いてあるはずなんすが、ボク自身も何処に有るのか分からないので、適当に有りがちな部分をまとめてみました。
取りあえず↓こんな状態よくあるかと。
アタイの守護樹なの♥
上記で指定してるスタイルは下記。
#main .entryBody #sample070219_01 {
width:200px;
margin-bottom:1em;
padding:5px;
background:#FFF;
border:1px solid #999;
}
#main .entryBody #sample070219_01 img {
margin-right:10px;
float:left;
}
コレはIEだとちゃんと表示されますが、floatの解釈が正しいブラウザでは意図した状態とは違うはずです。（理解している人はコレが意図した状態ですが）
ということで、そういう系を解決してきます。
画像とか用意するの面倒なんで、IE6とFirefox2辺りで見比べていただけたらと思います。
自分用メモ。
Firefoxなどで見た時に、画像を回り込ませ、border指定をしてpaddingで余白を設けた時に、下部分だけ指定した値と違って、ちょっと大きくなってしまう事があります。
そんな時に役立つのが下記のスタイル。
img {
vertical-align:bottom;
}
コレで指定した通りに表示されます。
今回のエントリーもちゃんとサンプル用意して実際の画面を出そうと思ったのに再現出来ず...なんでだろう。