画像を表示して、その下にテキストを入れた物を１セットとして考え、それをずらーっと表示させる方法ってのを考えました。
ちょっと言葉での説明は難しいのですが
こんな感じです。
で、仕様するHTMLはこんな感じにしました。
dlを使ってのマークアップでも出来るかなーって思ったんですが、どうもうまく行かないので、divで囲う事にしました。単純に考えて、このdivをfloatしてあげればいいのかなーって思ったんですが、それだと大元のセンター揃えが外れてしまいました。
あくまでセンターに揃えたまま、画像とテキストのセットを横に並べたい。
どうしたもんかなーと思い、調べた結果見つけたやり方がコチラ。
こんな感じで書いてあげると、センター揃えを維持したまま、画像+テキストのセットが横にずらーっと並びます。
divをdisplay:inline;でインライン要素にして横並びにしてあげて、その中を囲うspanにdisplay:table-cell;とdisplay:inline-block;でインライン要素の中での横幅を指定してあげる事によって、テキストが画像の下に回りこむって訳です。
ギャラリーサイトなんかで使えそうな手法ですね。
大元のセンター揃えと可変っていう条件が無かったら、他にも方法はあるんですけどね。
どんなサイトを作っていても、必ず使うのが新着情報や更新情報などを載せる部分。
通常トップページにあると思いますが、これらをマークアップする時にdt ddを使ってデザインする方法があるのですが、どうも今までのやり方だと気に入らない部分があって、liなんかを使って作る場合もあったのですが、今日この記事をみて目から鱗が落ちました。
今度からこれを使おうと決めたので、メモ。
HTMLはこんな感じです。
これに以下のCSSを当ててあげます。
横方向の指定にemを使うって部分と、ddにborder指定をして、文字のスペースをpaddingで取るって所で目から鱗が落ちました。
ステキです。
HTMLとCSSは今までの経験で書いてきた範囲でなんとかなってる部分が多いので、最近新しい発見って中々無いのですが、やっぱりまだまだ勉強が足りませんね。精進しよっと。
左側に幅固定のメニューを置いて、右側のコンテンツをリキッドデザインにしたかったので、やり方を調べてみました。
初めてそういったレイアウトをしたのですが、まず単純に考えて
■左側の幅200px
■右側の幅100％
って感じに書けばいいと思ったのですが、これだとまったくうまくいかない。
つまり、右側の幅は「全体の幅（100％）-200px」にならないといけないんですが、こういった書き方がCSSでは出来ません。ではどうするか。
こんな面倒な書き方をしてあげるとうまくいきました。
右側のｄｉｖを入れ子にして、一回ネガティブマージンで-200pxしてあげて、さらにその中のdivでマージンを200pxとってあげると、意図したようなデザインになりました。IE6、IE7、FF、Operaでは動作確認しましたが、なんか気持ち悪い書き方だなぁ・・・。
CREAMEでCSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』という記事が紹介されていました。
丁度、今作っているサイトでどうしてもmin-heightを指定したい箇所があり、IE６で対応させる方法を色々さがしていたので、ナイスタイミングです。しかもこの方法、JSなどを一切使わない、CSSだけで実現できるお手軽な方法。
色々調べたけど、結局JSを使うやり方しか見つからなかったので、うれしい限りです。
これだけで、min-heightを設定できました。
簡単～。
今日サイトを作っていてちょっとひっかかった箇所をメモ。
floatしたｄｉｖ要素にmarginを指定すると、そのmarginの値がIE６だけ2倍になるバグってのがありました。なんでIE６で見ると隙間が空いちゃうのかなぁって思ったのですが、どうやらコレが原因らしいです。
今回の解決法は、paddingでも大丈夫だったのでpadding使ってみました。
それ以外にも、floatする前にdisplay: inline;してあげると直るみたいです。
うーん、そろそろ、こういったIE６のバグ対策ってのも不要になってくるかも。
直近のIEのシェアを手持ちのサイトのアクセス解析で調べてみた所、IE使ってる人は全体の69％。で、その中でIE６な人は72％。IE７で27％。
一時期よりは確実に減っていますが、IEのシェアは大きいですね。あと思ったよりみんなIE６使ってるなぁ・・・。これじゃあ、まだまだIE6対策は必要ですね。
ちなみに、自分が愛用しているFirerfoxは全体の22％でした。
こちらは確実にシェアを伸ばしている気がする・・・。
