そういえば今日バイト先でなぜかcssを書きました。
htmlとかcss弄るのも楽しいんですけど
やり始めるのがね･･･
てかhtmlとcss以前の画像作るのがしんどいしきつい。
こんなんで今月中にサイトデザイン変えられるかな･･･

ちなみに今回やったのは
http://www.osresources.com/6_1_en.html
こんな角が丸いタブを作ってくれって内容です。

実際ここともう一つ参考にしたんですが、
とちらの例もタブの背景用の画像(角が丸いやつ)を右側用と左側用を用意していました。

こんな感じに。

わかりやすさのためかもしれませんが、実はコードはそのままでも
右側左側分けてない画像一枚あれば

ちゃんと表示されます。
ただし中に入る文字の長さ考えて横幅伸ばす必要はありますが。
もっともそれは上のばらばらの状態でも同じ。

css spriteとか呼ばれるテクニックですね。
一枚の画像に複数のパーツをまとめておいて
cssの領域指定をうまく使ってそれらをばらばらの位置に表示するやつです。
画像一枚にできるので少しだけ転送速度などで有利。
ここで書いても仕方ないのかもしれませんが。

一応使用例ー。

• てすとっと
• てすとっとっと
• 長くても伸び縮みするお(^ω^)

HTMLそーす。
参考サイトのコードが割とごちゃごちゃしてたので
余分なのも取り払いました。
他で要素に何か指定してるともう少し書き加えないとだめかも。

<style type="text/css">
<!--
ul.tab-test li{
  float:left;
  list-style:none;
}
ul.tab-test li a{
  background:url(./data/up/2009032400002.png) no-repeat left top;
  padding:0 0 0 16px;
  display:block;
}
ul.tab-test li a span{
  background:url(./data/up/2009032400002.png) no-repeat right top;
  padding:5px 16px 0 5px;
  display:block;
}
--> 
</style>
<ul class="tab-test">
<li><a href="#"><span>てすとっと</span></a></li>
<li><a href="#"><span>てすとっとっと</span></a></li>
<li><a href="#"><span>長くても伸び縮みするお(^ω^)</span></a></li>
</ul>
<br style="clear:both;" />

高さ指定していないのはバイト先では
縦にも伸び縮みできるようにって言われたからだったり。