CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

2011/06/16 1640 users CSS 挙動 クセ ブロックレベル要素 Webテクニック

CSSでWebデザイン、レイアウトするときに気をつけておきたいブロックレベル要素のクセをもとめてみました。ブロックレベル要素をdisplay:inlineしたときや、floatさせたときなどの挙動などを中心にCSSサンプルも作りました。スタイルシートでレイアウトするときに参考にしてもらえればうれしいです。Webテクニック CSS Share Webデザインをするときに必ず使うスタイルシート。思うよ... 続きを読む

記事タイトルをリボン風にシンプルに実装するCSSサンプル:phpspot開発日誌

2011/02/14 76 users phpspot開発日誌 CSS Web Standards

CSS powered ribbons the clean way ? CSS Wizardry?CSS, Web Standards, Typography, and Grids by Harry Roberts 記事タイトルをリボン風にシンプルに実装するCSSサンプルされています。 すごく複雑なマークアップを必要としそうな気がしたのですが、で囲むだけで実現できるそうです。 デモページは... 続きを読む

チェックボックスを綺麗に並べるCSSサンプル:phpspot開発日誌

2009/03/09 242 users phpspot開発日誌 Firefox Chrome 動作

Checkbox alignment in IE and Firefox | Xinotes チェックボックスを綺麗に並べるCSSサンプル。 次のように、チェックボックスの横に、改行入りのテキストを入れても綺麗に配置するサンプルです。 簡単そうでなかなか難しいテクニックかもしれないので覚えておくとよいかも。 サンプル IEでもFirefoxでも動作。Chromeでも試してみたところ動作しました。 ... 続きを読む

文字関係のCSSサンプル - CSSTYPE - web safe typography on screen for pixel perfectionists

2006/12/06 104 users CSSTYPE

続きを読む

DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌

2006/12/04 385 users div height プロパティ div要素 CSS

Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50%... 続きを読む

blockquoteでの引用を美しく表示するCSSサンプル:phpspot開発日誌

2006/11/27 121 users blockquote phpspot開発日誌 引用

Natalie Downe Blog Archive Inline image quotes I have been meaning to write about this technique for some time now. The aim is a block quote looking something like this, with speech marks at the front... 続きを読む