CSS Nite in Nagoya 長谷川さんのネタを少し咀嚼してみました - Web標準にアプローチ　〔まいまいのお宿。〕

2006/09/25

このブログを購読する

CSS Nite in Nagoya 長谷川さんのネタを少し咀嚼してみました「Web標準(111)」
[ Web標準 ]

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

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

Web標準の教科書

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

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

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

ちょっとしたことですが、色々いじってみたコトをメモします。

よかったら、試してみてくださいね。
イベントに参加していなくても、ヒントは見つかるんじゃないでしょうか？

※核になる部分だけのソースコードです。
※赤字部分が追加 or 変更した部分です。
※もとのレポート（CSS Nite in Nagoya の私のレポ）は、こちらをご参照ください。

１．テーブルで行の交互に背景色を付ける

偶数行目だけに背景色を付ける⇒奇数行目も背景色に色をつける
※(X)HTMLのソースコードは、適当に簡略化して、適当なテキストを入れてあります。

------------
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>

２．四方角丸を表現する

（↑）こんな感じにしたいと思います。

参加者さんへのメッセージ^^
firstChild、lastChildのところです。
※かなり簡略化しています。やってることはほとんど同じ。ちょっとだけ咀嚼。

------------
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>

３．リンク先のドキュメントに応じてアイコンを表示する

スクリプト的な咀嚼はなしです。
アイコンに注目してみました。

これに使われていたアイコンたちは、SILK ICONSですね。
どっかで見た～と思っていたら。
結構、緩いライセンスで自由に使える1000種類のアイコンたちです。
Creative Commons license（http://www.creativecommons.jp/）の2.5に帰属しています。
バックリンクとメールをすればOKかな。詳しくは調べてみてください。

⇒famfamfam.com: Silk Icons
http://www.famfamfam.com/lab/icons/silk/

----------------------------
長谷川恭久さんの著書
　●スタイルシートスタイルブック
　●Web designer 2．0進歩し続けるWebデザイナーの考え方

･････つづく

Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

最終更新日 2006/09/25　11:10:53 PM

コメント(0) | トラックバック(0) | コメントを書く

│<< 前へ │次へ >> │一覧 │コメントを書く｜

CSS Nite in Nagoya 長谷川さんのネタを少し咀嚼してみました「Web標準(111)」
[ Web標準 ]

■コメント

│<< 前へ │次へ >> │一覧 │コメントを書く │ 一番上に戻る │

│<< 前へ │次へ >> │一覧 │コメントを書く ｜

CSS Nite in Nagoya 長谷川さんのネタを少し咀嚼してみました 「Web標準(111)」 [ Web標準 ]

■コメント

│<< 前へ │次へ >> │一覧 │コメントを書く │ 一番上に戻る │

│<< 前へ │次へ >> │一覧 │コメントを書く｜

CSS Nite in Nagoya 長谷川さんのネタを少し咀嚼してみました「Web標準(111)」
[ Web標準 ]