CSS レイアウト・ボックス

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

12 Next >

おすすめCSSサイト

あわせて読みたいブログパーツ

RSSアイコンWebデザイン便利クリップ

これからは、賢く楽しくサムネイる。 | swfthumnail
これからは、賢く楽しくサムネイる。 | swfthumnail
Flashによるサムネイル生成ライブラリです。サイズの縮小だけでなく、特殊効果をつけたり,JavaScriptと連携させることもできます。
2010/03/09 13:56
噂のうわ木の森
噂のうわ木の森
心に「うわ木」が芽生えるかどうかを占ってくれるサイト。twitterと連動させているのも面白い。
2010/03/07 00:42
Capital Corporate Communications Sdn Bhd
Capital Corporate Communications Sdn Bhd
折り紙をモチーフとしたサイト。メニューを引っ張ってページに飛ぶアクションがおもしろいです。
2010/03/04 14:31
スキンケア大学
スキンケア大学
トップの黒板のFlashがインパクトあって、かつ情報を巧く伝えようとしている。
2010/03/01 13:19
もっと見る»

更新情報RSSアイコン

閉じる