職場でネットショップの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ベストアンサー
- 回答日時:
「角丸 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-techn …
ここの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
- 回答日時:
ものすごく参考URLに投げやりですが、このあたりを見れば解決すると思います。
http://www.cssjuice.com/25-rounded-corners-techn …
http://gigazine.net/index.php?/news/comments/200 …
P.S.投げやりなのでポイントは要らないです;
参考URL:http://gigazine.net/index.php?/news/comments/200 …
idhokanohiさん御回答有難うございます。参考URLのDynamic Driveってサイトいいですね~色んなパターンのメニューサンプルが豊富で。おかげさまで自分好みのタブメニューが見つかりました。「画像を使わず」って言う願念を捨てて自分流にアレンジし、チャレンジしていきたいと思います。有難うございました。
No.2
- 回答日時:
こんにちは。
わたしがwebサイトを作るときやグラフィックソフトで絵を描く時などに参考にさせて頂いてるサイトがあるのですが、そちらにCSSだけの角丸を作る方法が記載されてましたので、ぜひ試してみてください。
他にもいっぱい、役に立つことが紹介されてるすばらしいサイトです。
http://www.designwalker.com/2006/12/round-corner …
頑張ってください。
legotomicaさん回答有難うございます。ご指摘のとおりこのdesignwalkerってサイトはWEBデザイン関連の情報が豊富ですね。このページの下の方にSpiffy Cornersってページのリンクがありましたが、あれって色を指定するだけでソースを表示してくれるって感じでとても便利ですね。初心の自分にはとてもありがたいです。ただ、それをいかにタブメニュー化するかなんですけど・・・角丸ボックスの構成を知る上でとても参考になりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSS、width100%でもできる余白
-
【CSSについて】リストをフロー...
-
HTMLのiframeの入れ子について
-
【HTML】【CSS】【Swiper】 元...
-
CSSでボックスのheightが0になる
-
定義リスト dl dd dt
-
テーブル内の文字が揃わない
-
ヘッダーの高さが合わない
-
定義リストに下線をつけたいと...
-
divで囲まれたpaddingの指定を...
-
div内に外部のurlを表示させたい
-
定義リストで先頭にアイコン
-
外側のdivの高さを入れ子のdiv...
-
デスクトップ用のWEBサイトをス...
-
透明divの下に長い余白ができて...
-
背景が下まで表示されないんです。
-
Webサイトretinaディスプレイのcss
-
枠線でメイン部分を囲み、フッ...
-
CSS リンクを枠で囲み背景色を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報