1px欠けの角丸ボックスをCSSだけで作る方法
CSSだけで1px欠けの角丸を作る方法です。シャープなボックスに少し柔らかい印象を与えてくれます。
http://www.webbibo.com/stylesheet/layout/1pxcorner.html
09.12.03
テキストボックスを画像の下に回り込ませない方法
画像のサイズが変わっても、隣接するテキストボックスは画像の下に回り込まず、なおかつ、テキストボックスのサイズが画像に合わせて自動的に変わる方法です。
http://www.webbibo.com/stylesheet/layout/text_wrap.html
09.10.21
CSSでボックスの内容物を上下中央揃えにする方法3種。
CSSだけでボックス内のテキスト・画像・ブロックなどを上下中央揃えにする方法です。
http://www.webbibo.com/stylesheet/layout/vertical.html
09.10.15
floatを使わずにinline-blockで横並びにする方法
ボックスを横並びにする場合floatを使いますが、その中で高さが違うボックスが混ぜっている場合、そこでレイアウトが崩れてしまいます。これを崩れないようにする方法を紹介します。
http://www.webbibo.com/stylesheet/layout/inline-block.html
09.07.07
CSSと画像で引用（blockquote）を見栄えよく表示する
引用を見栄えよく表示するCSSサンプルです。
http://www.webbibo.com/stylesheet/layout/blockquote-css.html
09.06.17
SEOを考慮した3カラムレイアウトのテンプレート
SEO的に検索エンジンに読ませたい内容をHTMLの先頭にもっていきたいところですが、3カラムの場合、どうしても<div>タグで左カラムと中カラムを1回囲まないと中カラムのメインコンテンツを先頭にもっていくことができません。ですが、ネガティブマージンを使えばその<div>タグを使わなくても簡単に3カラムのCSSレイアウトができます。
http://www.webbibo.com/stylesheet/layout/search_3column.html
09.05.28
IE6とモダンブラウザにmin-widthを疑似的に指定する方法
最小幅を指定する「min-width」をIE6にも適用させる方法です。
http://www.webbibo.com/stylesheet/layout/min_width.html
09.05.15
画像を使わずにCSSだけで角丸を作る方法、PART2
2行目以降を字下げする場合に使えるテクニック。注意書きや箇条書きなどを書くときに使えます。
http://www.webbibo.com/stylesheet/layout/round2.html
09.02.05
