Web標準にアプローチ　〔まいまいのお宿。〕

スタイルシートスタイルブック


Web designer 2．0進歩し続けるWebデザイナーの考え方


Web標準の教科書


WEBレイアウト・セオリー・ブック


スタイルシートスキルアップ・デザインブック（1）


スタイルシートスキルアップ・デザインブック（2）

------------
 CSS
------------
.evenrow{
    background: #efefef;
}
.oddrow{
    background: #ddefef;
}

------------
 Javascript
------------
function rowcolor(){

    var rows = document.getElementsByTagName("tr");
    for(var i=0; i<rows.length; i++){       
        if (i%2==1){
            rows[i].className = "evenrow";
        }else {
            rows[i].className = "oddrow";
        }
    }
}

------------
 (X)HTML
------------
<table>
<tr><th>No.</th><th>Name</th></tr>
<tr><td>001</td><td>Akio.Suzuki</td></tr>
<tr><td>002</td><td>Taro.Kimura</td></tr>
<tr><td>003</td><td>Maki.Sakura</td></tr>
<tr><td>004</td><td>Aiko.Murata</td></tr>
<tr><td>005</td><td>Jiro.Tanaka</td></tr>
</table>

------------
 CSS
------------
※画像は適当に作りました。（top.gif：上の角丸／btm.gif：下の角丸）

body {
    background: #cccccc;
}

#content {
    width: 400px;
    background: white;
}


#content .intro {
    background: url("./img/top.gif") no-repeat top center;
}

#content .more {
    background: url("./img/btm.gif") no-repeat bottom center;
}

p {
    padding: 5px 10px;
}

------------
 Javascript
------------
function findchild3(){
    var content = document.getElementById("content");
    var p = content.getElementsByTagName("p");
    p[0].className = "intro";
    p[p.length-1].className = "more";
}

------------
 (X)HTML
------------
「id="content">」で改行すると
一つ目の<p>のCSSが有効にならないので何とか解決したくてトライしたのが上のJavascript。

<div id="content"><!--もとはここで改行していません-->
<p>段落１</p>
<p>段落２</p>
<p>段落３</p>
<p>⇒つづきはこちら</p>
</div>