CSS+HTMLだけで画像を使わず、角丸タブメニューを作りたい

質問

職場でネットショップのWEB管理をしているものですが、サイト上のヘッダーに画像を使わずCSS+HTMLだけで角丸タブメニューっぽいものを作りたいのですが、なんせCSS初心のためどこをどう指定すれば画像なしの角丸タブメニューっぽくなるのかわかりません。できたら各メニューの下段にもサブメニューリンクを追加したいのですが・・・
どうか良きアドバイスよろしくお願いします。
感じとしてはここのサイトっぽいタブメニューができればと・・・

CSS
<style type="text/css">
<!--

#demo-container{padding:2px 2px 0 60px;margin:0 0 15px
0;background:#67A897;width:870px;}
ul#simple-menu{list-style-
type:none;width:100%;position:relative;height:27px;font-
family:"inpact",Arial,sans-serif;font-size:13px;font-
weight:bold;margin:0;padding:11px 0 0 0;}
ul#simple-menu li{display:block;float:left;margin:0 0 0　9px;height:27px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;
background:#4A6867;line-height:27px;text-decoration:none;
padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{color:#;background:#708090;}
ul#simple-menu li a.current{color:#708090;background:#fff;}
ul#simple-menu li a.current:hover{color:#9370DB;background:#fff;}

-->
</style>

HTML

<div id="demo-container">
<ul id="simple-menu">
<li><a href="#" title="MENU1" class="current">MENU1</a></li>
<li><a href="#" title="MENU2">MENU2</a></li>
<li><a href="#" title="MENU3">MENU3</a></li>
<li><a href="#" title="MENU4">NENU4</a></li>
<li><a href="#" title="NENU5">NENU5</a></li>
<li><a href="#" title="NENU6">NENU6</a></li>
</ul>
</div>

回答No.1

abril · ベストアンサー

「角丸　CSS」で検索するとぞろぞろTipsが出てきます。
ただ大半は、「角丸の部分だけ」の画像を作成しておきそれをCSS中からbackgroundプロパティで参照して定義する、という手法です。私自身もその様にして作成してます。ですので、

> 画像を使わずCSS+HTMLだけで角丸タブメニューっぽいものを作りたい

と仰っている意味が、「それ（CSS中からbackgroundによる定義で参照する画像）」すら使用してはいけない、という事であり、" 厳密に"HTML＋CSS”だけ”という事なら、ちょっと無理ではないかと思われます。1pxのボーダーを少しづつずらして配置することで擬似的に丸くする方法なども紹介されていますが、それはマークアップが煩雑（論理構造としても無意味でNGですし…）過ぎるので単体のボックスならまだしも、メニュータブの様なものには向かないでしょう。

背景画像としての使用は含めるという事であればまあそんなに難しいことはないです。以下はその場合の参考までに。
"25 Rounded Corners Techniques with CSS"という、CSSによる角丸表示テクニックをまとめたコンテンツがあります。
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

ここの11番目"CSS and round corners making accessible menu tabs - decent rounded corners style menu tabs technique."のテクニックが（マークアップも含めて）質問者様のご希望にかなり近いものではないかと思います。

お礼

abrilさん早速の回答ありがとうございます。
そうですよね～そもそもCSS+HTMLだけだとちょっと無理があるかなとは思ってました。それに色々検索してみてもほとんど角丸部分は画像を指定してタブメニューを構成している説明サイトが多いみたいですね。
一度はタブ画像を作って反映させようかと思いましたが、作ったところでどう適用させるか余計なこと考えてしまって・・・
それと、25 Rounded Corners Techniques with CSS　の11番目のメニューページはとても参考になりました。もっと基本から自分を磨かないとだめみたいですね。

回答No.3

idhokanohi

ものすごく参考URLに投げやりですが、このあたりを見れば解決すると思います。
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

http://gigazine.net/index.php?/news/comments/20060511_dynamic_drive_css_library/

P.S.投げやりなのでポイントは要らないです；

参考URL：

http://gigazine.net/index.php?/news/comments/20060511_dynamic_drive_css_library/

お礼

idhokanohiさん御回答有難うございます。参考URLのDynamic Driveってサイトいいですね～色んなパターンのメニューサンプルが豊富で。おかげさまで自分好みのタブメニューが見つかりました。「画像を使わず」って言う願念を捨てて自分流にアレンジし、チャレンジしていきたいと思います。有難うございました。

回答No.2

legotomica

こんにちは。
わたしがwebサイトを作るときやグラフィックソフトで絵を描く時などに参考にさせて頂いてるサイトがあるのですが、そちらにCSSだけの角丸を作る方法が記載されてましたので、ぜひ試してみてください。
他にもいっぱい、役に立つことが紹介されてるすばらしいサイトです。

http://www.designwalker.com/2006/12/round-corner.html

頑張ってください。

お礼

legotomicaさん回答有難うございます。ご指摘のとおりこのdesignwalkerってサイトはWEBデザイン関連の情報が豊富ですね。このページの下の方にSpiffy Cornersってページのリンクがありましたが、あれって色を指定するだけでソースを表示してくれるって感じでとても便利ですね。初心の自分にはとてもありがたいです。ただ、それをいかにタブメニュー化するかなんですけど・・・角丸ボックスの構成を知る上でとても参考になりました。