【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
inline-blockを使ってのマルチカラムレイアウト（段組み） | A Day in the Life
May 10, 2009 IE8、FF3、Safari、Opera、Chromeで正式にサポートされているdisplayプロパティの値inline-blockを使ってマルチカラムレイアウトを実装するテストをしてみました。 View Demo 通常2段組み、3段組みなどのレイアウトを組む場合、floatプロパティを使って左右にふったりすると思いますが、今回はfloatを使わずに2段組のレイアウトを組んでみます。HTMLのソースコードは以下の通り HTML Code <div id="container"> <div id="header"> <h1>header</h1> </div> <div id="primary"> <div class="section"> <p>文章</p> <p>文章</p> </div> <div class="section"> <p>文章</p> <p>文
display:inline-blockがけっこう便利。だけど…
小さいブロック要素とかを横並びにさせたいときとか、inline-block使うと便利なんですよね。幅も高さも指定できてしまう要素にみせることができるinline要素になるというのがとても便利。わざわざblock要素にして、floatさせて横並びにさせる、そして並ぶ要素を終わらせたあとはclearをして…なんてことをしていると、指定が多くなってしまうんですよね。ですが、inline-blockを使うと、そんなことしなくても簡単に並べちゃうってのはいいですよね。 しかし、そのinline-blockは、IEやFirefox2などのオールドブラウザだとうまく動作しないことの方が多い。今では使えるようになっているブラウザが多いのですが、IEや以前のブラウザを気にすると、使いどころが少なかったりもする。 inline-blockのオールドブラウザやIEについての動作は、参考としているサイトを見てもら
display: inline-block; - She might have found her way.
cssなんか Firefox 3 は display: inline-block; が使えるらしい！これで Opera, IE, Firefox, Safari で使えるようになったわけなのでもう使っていくしか！Firefox 3が対応したdisplayプロパティの値（1） - builder by ZDNet Japanこの記事だと IE で inline-block 値が IE8 以上で使えるみたいなこと書いてあるけど IE6 から既に使えるんですよね。殊更に IE8(ベータ版) とか書いてあるってことは、何か仕様が変わったのかな?そういえば昔テキストサイトやってた頃、カスイケスレに晒されたことが一度だけあって、そのときのサイトでは display: inline-block; を使っていました（そしてそのサイトは、晒されたことが分かった瞬間に閉鎖しました。すぐサイトを閉鎖して新しいの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
moto-mono.net
