個別記事

前後の記事

CSS の可読性を高めるためのアイデア

この記事が属するカテゴリー
CSS

CSS の可読性を高めるためのアイデアってのは人それぞれ色々とあるんだろうけど、最近つらつらとその辺のアーティクルを見て廻った中で特に取り入れてみようかなと思わされたのが、入れ子の状態をブロック単位でインデントして分かりやすくしておくって方法かなぁ。例えば、下記のような感じ。

/*----ラッパー----*/
#wrapper {
}
    /*----ヘッダー----*/
    #head {
    }
        /*----ナビゲーション----*/
        #nav {
        }
        #nav ul {
        }
        /*----ナビゲーション END----*/
    /*----ヘッダー END----*/
/*----ラッパー END----*/

(X)HTML だけじゃなく、CSS の方でも入れ子の状態を視覚的に分かりやすくするためにインデントさせるってのは意外と思いつかなかった。そうか、ブロック単位だけじゃなくて、ブロック内での階層をインデントしてってのもありか。

/*----ナビゲーション----*/
#nav {
}
    #nav ul {
    }
        #nav ul li {
        }
            #nav ul li a,
            #nav ul li a:visited {
            }
            #nav ul li a:hover {
            }
/*----ナビゲーション END----*/

お、カスケードされた状態が分かりやすいかも。

2005-11-01T11:13:33+09:00 | コメント (0) | トラックバック (3) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/331

このリストは、次のエントリーを参照しています: CSS の可読性を高めるためのアイデア:

Imaginary Affair さんからのトラックバック
cssをインデントして見やすくする。
Lucky bag::blog: CSS の可読性を高めるためのアイデア これは... [続きを読む]
2005年11月01日 23:41
我的春秋 さんからのトラックバック
見出しの画像をサイトマップ風 CSS で管理
h1 の見出し画像を、タブインデントを使ってサイトマップ風にした、独立した見出し画像管理用 CSS ファイル（h1.css）で管理する方法について紹介。 [続きを読む]
2006年01月07日 23:05
holidays-l さんからのトラックバック
[その他]CSSセレクタを入れ子にできないのは何故？
/*----ナビゲーション----*/ #nav { } #nav ul { } #nav ul li { } #nav ul li a, #nav u... [続きを読む]
2006年08月30日 22:53

コメント

"CSS の可読性を高めるためのアイデア"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)