- 締切済み
input みたいなボタン
<ul> <li class=""><a href="・・・">りんく</a></li> <li class=""><a href="・・・">にっき</a></li> <li class=""><a href="・・・">ＢＢＳ</a></li> </ul> （タグはうるおぼえで正確ではないかもしれません。そのサイトもわからなくなってしまって・・） このタグを埋め込むとinputボタンみたいな中に、リンク・にっき・ＢＢＳ、というふうに表示されるサイトがありました。 スタイルシートでやってるみたいですが、外部スタイルシートのためやり方が伺えません。 どのようにしたらよいかおわかりの方いらっしゃいませんでしょうか？
- ame-sanc
- お礼率83% (1229/1475)
- レンタルサーバ・ASP
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- LAIT
- ベストアンサー率32% (25/78)
少しタグが変わりますが・・・。 <div id="input"> <ul> <li><a href="aaaaaa">aaaaaaa</a> <li><a href="aaaaaa">aaaaaaa</a> <li><a href="aaaaaa">aaaaaaa</a> <li><a href="aaaaaa">aaaaaaa</a> <li><a href="aaaaaa">aaaaaaa</a> </ul> </div> CSS div#input li { border:solid 1px #000000; background-color:silver; padding:2px; width:20%; text-align:center; margin:3px; list-style : none; }
関連するQ&A
- <ul>タグの後の<div>タグのmarginについて教えてください
<ul>タグの後の<div>タグのmarginについて教えてください 現在制作しているホームページで下記のようなタグを書きました。 ☆・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・☆ ul.menu-a {margin:0; padding:0;} ul.menu-a li {float:left; text-indent:-9999px; overflow:hidden; list-style:none;} ul.menu-a li a {display:block; width:100px; height:100px;} li.menu-a1 a {background:url(◯.gif) 0 0 no-repeat;} li.menu-a1 a:hover {background:url(◯.gif) 0 -100x no-repeat;} li.menu-a2 a {background:url(◯.gif) -100px 0 no-repeat;} li.menu-a2 a:hover {background:url(◯.gif) -100px -100px no-repeat;} .font{color:#000000; margin : 100px 0px 100px 0px; border: 1px ;} <img src="image/123.gif"> <ul class="menu-a"> <li class="menu-a1"><a href="123.html">123</a></li> <li class="menu-a2"><a href="456.html">456</a></li> </ul> <ul class="menu-b"> <li class="menu-b1"><a href="abc.html">abc</a></li> <li class="menu-b2"><a href="efg.html">efg</a></li> </ul> <div class="font">あいうえお</div> ☆・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・☆ ※<ul>部分はオンマウスで画像が変わるように外部スタイルシートで指定しています。 ※長くなるのでul.menu-bのスタイルシート部分は省きましたがul.menu-a とほぼ同じです。 このようなタグの場合、<div class="font">あいうえお</div>の部分に指定している margin要素は1番上の<img src="image/123.gif">から考えた数値になるのでしょうか？ <ul class="menu-b">の後から考えるものだとばかり思っていたのですが あれこれ試していく中で、今回のような<ul>の使い方をしている場合は <ul>タグの存在は無視するべきなのでは？と思い至ったのですが確証には至らず ここで質問させて頂きました。 様々な本やサイト様を参考させては頂いてるものの 自己流・付け焼き刃な知識しかないものでおかしな質問になっていたらすいません。 詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。
- ベストアンサー
- HTML
- ホームページ上のナビゲーションバーがチカッと一瞬白くなる現象について。
外部スタイルシートを使ってホームページのナビゲーションバーを作ってみました。 <div id="gnavi"> <ul> <li><img src="images/navi/side_l.gif" width="11" height="48" /></li> <li><a href="#" class="n01">ホーム</a></li> <li><a href="#" class="n02">プロフィール</a></li> <li><a href="#" class="n03">ワークス</a></li> <li><a href="#" class="n04">マイブログ</a></li> <li><a href="#" class="n05">コンタクト</a></li> <li><img src="images/navi/side_r.gif" width="11" height="48" /></li> </ul> </div> このような感じで、aタグにスタイルをかけて背景画像を入れ替えています。 プレビューではクリックしても正常に動作していましたが、 サーバーにアップしてカーソルを画像の上に持っていくと一瞬画像が消え白くなります。 他にも探してみたら、下のサイトもそうなっています。 http://info.news2u.net/ http://www.gaitame.com/ これはどうしてでしょうか？ 何が原因でしょうか？ これでは少し見づらく感じてしまうので 改善したいのですが、何かいい方法はありますか？ WEB制作に携わる方、ご教授いただけたら幸いです。 よろしくお願いいたします。
- ベストアンサー
- ネットトラブル
- 隣接セレクタの適用範囲について。
http://9-bb.com/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8C%E9%96%8B%E3%81%84%E3%81%9F%E3%82%8A%E9%96%89%E3%81%98%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%82%A2%E3%82%B3%E3%83%BC/ 上記のサイトを参考に、CSSで開閉式のリストを作りました。 そのサイトのHTMLの1行目～10行目は下記の様になっています。 <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> それに対応したCSSは、下記の様になっています。 input[type="checkbox"].on-off + ul{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + ul{ height: 200px; } つまり、 <input type="checkbox" id="Panel1" class="on-off" /> の後ろの <ul>タグに働きかける構造になっています。 それを改良して、<ul>タグの部分だけでなく、幅広い範囲に働きかける構造にしたいです。 そこで、対応しているCSSの隣接セレクタ「+」の後ろの「ul」を「span」にして、HTMLも「span」タグで括りました。 input[type="checkbox"].on-off + span{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + span{ height: 200px; } <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <span> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> </span> しかし、上手く動作しません。 要するに、「ボタン１」で開閉できる範囲を「リスト1」だけでなく「リスト１」「リスト２」の両方に効かせたり、「ul」タグに囲まれた範囲だけでなく、他のタグも含めた範囲にも効かせたいです。 要点を得ない質問になりましたが、アドバイスをお願いします。
- 締切済み
- CSS
- スタイルシートの事で質問です。
htmlタグ「リスト」のスタイルについて教えてください。 <ul> <li><a href="dummy/">tesuto1</a></li> <li><a href="dummy/">tesuto2</a></li> <li><a href="dummy/">tesuto3</a></li> <li><a href="dummy/">tesuto4</a></li> </ul> 上記のようなタグの場合は ・tesuto1 ・tesuto2 ・tesuto3 ・tesuto4 このように表示されますが、これをスタイルシートを使って tesuto1 | tesuto2 | tesuto3 | tesuto4 | こんな風にできないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- プルダウン時の最上部メニューの画像置換について
お世話になります。サイト製作初心者のpeace193と申します。 以下のサイトを参考に自分なりにカスタマイズしました。本来はテキストであるタグ最上部のli内はクラスで画像に変え、ホバー時にCSSで個々に他の画像に置き換わるようにしました。 http://www.leigeber.com/2008/11/drop-down-menu/ そこで質問なのですが、プルダウンした時に、最上部のメニューを個別にホバーした時の画像のままにしたいのですが、このサンプルを生かす場合、どのようなCSS、またはjavascriptが必要でしょうか？（例えば、menu02-01-01やmenu03-01にホバーしたとき、それぞれmenu02のホバー画像を維持、menu03のホバー画像を維持。） 参考サイト上では ul.menu .menulink:hover, ul.menu .menuhover {background: url(/images/header_over.gif)} で変えているようですが、私はメニュー毎に置き換わる画像を変えたいのです。 お忙しいところ恐縮ですが、ご教示いただけると幸いです。 <ul class="menu" id="menu"> <li><a href="#" class="menu01"></a></li> <li><a href="#" class="menu02"></a> <ul> <li><a href="#" class="sub">menu02-01</a> <ul> <li><a href="#">menu02-01-01</a></li> <li><a href="#">menu02-01-02</a></li> </ul> <li><a href="#">menu02-02</a></li> <li><a href="#">menu02-03</a></li> </ul> </li> <li><a href="#" class="menu03"></a> <ul> <li><a href="#">menu03-01</a></li> <li><a href="#">menu03-02</a></li> <li><a href="#">menu03-03</a></li> </ul> </li> <li><a href="#" class="menu04"></a></li> </ul>
- ベストアンサー
- JavaScript
- olタグ・liタグで一部のリストを横並びにした
olタグ・liタグで一部のリストを横並びにしたい場合 olタグに display: inline; list-style-type: none; としても意味がないのでしょうか? <style type="text/css"> ol.test1{ display: inline; list-style-type: none; }</style> <ol class="test1"> <li><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> としても横にはならずに番号が消えました。 なので li.test2{ display: inline; list-style-type: none; } として <ol> <li class="test2"><a href="#">階層1</a></li> <li class="test2"><a href="#">階層2</a></li> <li class="test2"><a href="#">階層3</a></li> </ol> としたのですが liの数だけスタイルシートを指定しないとダメなのでしょうか? <ol> <li class="test2"><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> のように一つだけクラスに入れたら そこだけ番号が消えた上 横並びにはなりませんでした。
- ベストアンサー
- CSS
- リストタグを横並びにする方
横並びのナビゲーションを作成するためにスタイルシートの解説本で調べて 【html】 <div id="navi"> <ul> <li><a href="toiawase.html">問い合わせ</a></li> <li><a href="accsess.html">アクセス</a></li> <li><a href="top.html">TOP</a></li> </ul> </div> 【css】 ul#navi li { float: right; } ul#navi li a { display: block; text-decoration:none; } と記述しましたがうまくできず、頭のulを取ったら出来ました。 タグの位置がセレクタの前と後では、どう違うのでしょうか？ また、ulを入れずに進めても問題ないでしょうか？
- ベストアンサー
- CSS
- リストタグ以外でfloatしたものをセンター寄せに
下記のようにHTMLを組みました。 「.footerNav」を「float:left」して横並びにした上でセンター寄せをしたいと思いました。 しかし何をどうやってもセンター寄せになってくれません。 ちなみに各「div class="footerInner"」の幅設定はしません。 <footer> <nav> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> </nav> </footer> 調べて見ると、<div class="footerInner">～</div>の単体であれば、 センター寄せができる手段はありました。 <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> しかし自分のはリストタグではなく、divタグをフロートしたもの。 リストタグではないものを「float:left」してセンタリングは可能なのでしょうか？ 何度かこの手のことにはまって、その度にいろいろな手段を試したり検索していたのですが、 検索しても見つからず、結局出来たためしがありません。 それで今回は投稿させていただきました。 ご存知の方いらっしゃいましたらご教授いただければ幸いです。
- ベストアンサー
- CSS
- アコーディオンパネルの作成
<ul class="level1"> <li>menufirst <ul class="level2"> <li><a href="">menu 1-1</a></li> <li><a href="">menu 1-2</a></li> <li><a href="">menu 1-3</a></li> </ul> </li> <li>menusecond <ul class="level2"> <li><a href="">menu 1-1</a></li> <li><a href="">menu 1-2</a></li> <li><a href="">menu 1-3</a></li> </ul> </li> <li>menuthird <ul class="level2"> <li><a href="">menu 2-1</a></li> <li><a href="">menu 2-2</a></li> <li><a href="">menu 2-3</a></li> </ul> </li> </ul> このHTMLにアコーディオンパネルを追加したいのですが、 多くのサンプルがdlやddで作ったものばかりでこれをul liで作ろうとすると 上手く作動しません。 何か良いJQueryのコーディング例があればご教授お願いいたします。
- ベストアンサー
- JavaScript
- jQueryで２段式アコーディオンメニュー
いつも参考にさせて頂いております。 あるサイト様（http://triplexxx.jp/archives/150）を参考にjQueryで２段式のアコーディオンメニューを作成していましたが、何分初心者なもので早々に行き詰まってしまいました。 理想はこちらのサイト様（http://html-five.jp/pc/demo/002/）にあるデモの下側、『２段アコーディオン』をこちら（http://html-five.jp/demo/002/index2.html）の『ポンプ型アコーディオン』ような動きにしたいと思っております。 スクリプト自体を入れ子にしたりしてみましたが根本的な部分がダメなようでうまくいきませんでした。 何卒ご教授いただけますようお願いします。 [参考にしたjQuery（１段までは問題なく動きます）] script type="text/javascript"> var j$ = jQuery; j$(function(){ j$(".ac_parent").each(function(){ j$("li > a").each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); </script> [作成中のHTML] <div> <ul class="ac_parent"> <li><a href="#">1</a> <ul class="ac_child"> <li><a href="#">11</a></li> <ul class="ac_gchild"> <li><a href="#">111</a></li> <li><a href="#">112</a></li> <li><a href="#">113</a></li> </ul> <li><a href="#">12</a></li> <ul class="ac_gchild"> <li><a href="#">121</a></li> <li><a href="#">122</a></li> <li><a href="#">123</a></li> </ul> </ul> </li> <li><a href="#">2</a> <ul class="ac_child"> <li><a href="#">21</a></li> <ul class="ac_gchild"> <li><a href="#">211</a></li> <li><a href="#">212</a></li> <li><a href="#">213</a></li> </ul> <li><a href="#">22</a></li> <ul class="ac_gchild"> <li><a href="#">221</a></li> <li><a href="#">222</a></li> <li><a href="#">223</a></li> </ul> </ul> </li> <li><a href="#">3</a> <ul class="ac_child"> <li><a href="#">31</a></li> <ul class="ac_gchild"> <li><a href="#">311</a></li> <li><a href="#">312</a></li> <li><a href="#">313</a></li> </ul> <li><a href="#">32</a></li> <ul class="ac_gchild"> <li><a href="#">321</a></li> <li><a href="#">322</a></li> <li><a href="#">323</a></li> </ul> </ul> </li> </ul> </div>
- ベストアンサー
- JavaScript
お礼
なんとなくですが、ご指示どうりでできました。ありがとうございました。