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

2006/09/25

CSS Nite in Nagoya 長谷川さんのネタを少し咀嚼してみました

テーマ： Web標準(117)

カテゴリ： 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

(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デザイナーの考え方