- ベストアンサー
CSS+HTMLだけで画像を使わず、角丸タブメニューを作りたい
- CSS+HTMLだけで画像を使わずに角丸タブメニューを作る方法について教えてください。
- 求めているのは、サイトのヘッダーに画像を使わずにCSS+HTMLだけで角丸タブメニューを作る方法です。
- 初心者なので、どのように指定すれば画像なしの角丸タブメニューっぽくなるかわかりません。さらに、各メニューの下段にもサブメニューリンクを追加したいです。アドバイスをお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
「角丸 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."のテクニックが（マークアップも含めて）質問者様のご希望にかなり近いものではないかと思います。
その他の回答 (2)
- idhokanohi
- ベストアンサー率45% (9/20)
ものすごく参考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.投げやりなのでポイントは要らないです；
お礼
idhokanohiさん御回答有難うございます。参考URLのDynamic Driveってサイトいいですね～色んなパターンのメニューサンプルが豊富で。おかげさまで自分好みのタブメニューが見つかりました。「画像を使わず」って言う願念を捨てて自分流にアレンジし、チャレンジしていきたいと思います。有難うございました。
- legotomica
- ベストアンサー率37% (3/8)
こんにちは。 わたしがwebサイトを作るときやグラフィックソフトで絵を描く時などに参考にさせて頂いてるサイトがあるのですが、そちらにCSSだけの角丸を作る方法が記載されてましたので、ぜひ試してみてください。 他にもいっぱい、役に立つことが紹介されてるすばらしいサイトです。 http://www.designwalker.com/2006/12/round-corner.html 頑張ってください。
お礼
legotomicaさん回答有難うございます。ご指摘のとおりこのdesignwalkerってサイトはWEBデザイン関連の情報が豊富ですね。このページの下の方にSpiffy Cornersってページのリンクがありましたが、あれって色を指定するだけでソースを表示してくれるって感じでとても便利ですね。初心の自分にはとてもありがたいです。ただ、それをいかにタブメニュー化するかなんですけど・・・角丸ボックスの構成を知る上でとても参考になりました。
お礼
abrilさん早速の回答ありがとうございます。 そうですよね～そもそもCSS+HTMLだけだとちょっと無理があるかなとは思ってました。それに色々検索してみてもほとんど角丸部分は画像を指定してタブメニューを構成している説明サイトが多いみたいですね。 一度はタブ画像を作って反映させようかと思いましたが、作ったところでどう適用させるか余計なこと考えてしまって・・・ それと、25 Rounded Corners Techniques with CSS の11番目のメニューページはとても参考になりました。もっと基本から自分を磨かないとだめみたいですね。