トップ > css > 美しいCSS。スタイルの指定。

美しいCSS。スタイルの指定。

css









同じ機能を持っていても、制約された書き方の中でも、人が書いたものには、個性が出ます。私的に、美しい指定の仕方だなぁ。と思ったものを紹介します。

Tableless layout HOWTOより。

<div id="main">
<div id="list1" class="link-list">
<div id="list2" class="link-list">


この3個のブロックにスタイルを以下のように指定しています。

/* Properties 
　that both side lists have in common */
div.link-list {
        width:10.2em;
        position:absolute;
        top:0;
        font-size:80%;
        padding-left:1%;
        padding-right:1%;
        margin-left:0;
        margin-right:0;
}
/* we leave some place 
　on the side using the margin-* properties */
#main {
        margin-left:10.2em;
        margin-right:10.2em;
        padding-left:1em;
        padding-right:1em;
}
/* and then we put each list on its place */
#list1 {
        left:0;
}
#list2 {
        right:0;
}

両サイドの、スタイル指定をそれぞれ別々に指定するのと比べると、
div.link-list　#list1 #list2　を分けて記述すると、美しいと私は、感じるんです。

どうでしょう。

TOP