MdN Design｜総合情報サイト
Blueprint CSSは、固定幅のレイアウトに適したCSSフレームワークだ。親要素の幅に対して1/2、1/3といった割合でカラムが生成されるYUI Grids CSSに比べて、「カラム何個分」といった形で指定を行うため、より精密なレイアウトを実現できる。また、フォームや印刷向けのCSSも提供されており、利用範囲が広い点も魅力だ。 導入にあたり配布元からソースをダウンロードし【1】、XHTMLの＜head＞にリンクの記述を行う【2】。＜body＞直下にはコンテナタグ（div.container）を用意し、その中に「.span-」で始まるclass属性を加えた＜div＞を定義する。ここで指定する数値がカラム数にあたる。デフォルトでは全体の幅950pxに対し、ひとつのカラムが幅30pxとなるため、行当たりのカラムの合計数が「24」になるように調整しよう。それぞれのカラムには共通で10pxの右
縦書き文庫の開発日誌 960 grid system と blueprintcss
2010年05月 / 04月≪ 12345678910111213141516171819202122232425262728293031≫06月 けっこう前に書いた960 grid system の記事にアクセスがちょくちょくあるのですが、心苦しいので白状します。ぶっちゃけ今ではblueprintcssの方がおすすめかなあという気になっています。 確かに960 grid systemは IE の時に別のスタイルシートを読む必要がないです。 でも…でも…それだけなんですよ。 特に嫌なのが、グリッドの最終スパンを記述した後にお決まりの <div class="clear"></div> を常に書かなくちゃいけないのが辛いです。 複雑なレイアウトになってきた時に、この clear fix が如何に可読性を落とすかは、やってみればわかります。 さらに言うと、入れ子の最左グリッドと最右
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VIPPERな俺 : 京都でこれは食っとけor行っとけっていう名物