- ベストアンサー
CSS リンクの下の線
<li><a href="http://www.aaa.com">aaa</a></li> とした時に、 aaaの下に線ができますが、これを無くす（表示させない）には、どのようにすればよいのでしょうか？ よろしくお願いします。
- origin_five
- お礼率81% (52/64)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
style属性で直接書く場合。 <li><a href="～" style="text-decoration: none;">aaa</a></li> CSSで書く場合。 全部のリンク a { text-decoration: none;} リスト内のリンクだけ。 li a { text-decoration: none;} 画像のリンク img{ border-style: none;}
その他の回答 (1)
- abacabu
- ベストアンサー率37% (250/663)
一応参考サイトを掲載しておきます。 飛べば1発でタグ見れます。私はすっかり忘れていましたのでこうしました。 あと…慣習で結構下線がある＝リンクだなということもあるので全部を全部けしてしまうと どこ押せば飛べるのかさっぱり分からないと言った事にもなります。 隠しリンクの場合は別ですが… あとプルダウンメニュー等をCSSで作成しても下線はでないはずですし。 状況によってあると便利（わかり易い）な場合もありますので
関連するQ&A
- css の float:left; を li 適用
css の float:left; を li に適用すると <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> ●AAA●BBB●CCC のような横並びにできます <ul> <li>AAA</li> <li>BBB <ul> <li>aaa</li> <li>bbb</li> </ul> </li> <li>CCC</li> </ul> このように入れ子の場合 ●AAA●BBB ●CCC □aaa□bbb のように表示されます これを ●AAA●BBB●CCC □aaa□bbb のように、一段目に間を空けないで表示する CSS の設定を教えてください よろしく、お願いします
- ベストアンサー
- ホームページ作成ソフト
- ページ内のリンクが外れてしまいました。
ＰＣ用とスマートフォン用でトップページのみデザインを変えているサイトで、トップページからそれぞれのページへのリンクが、以前は問題無く繋がっていたのですが、スマートフォン用のみ、いつからか外れてしまいました。 スマートフォン用のトップぺージは“i”というフォルダ内に入れ、 <li><a href="../aaa.html">aaa</a></li> <li><a href="../bbb.html">bbb</a></li> としています。 よろしくお願いします。
- 締切済み
- CSS
- flashでリンクを貼りたい
flashを使って画像を表示させ、そこにリンクを貼りたいのですが、 <A href=http://www.aaa/cgi-local/aaa.cgi>あああ</A> とやっても表示されません。 何が原因かわかりますか？ よろしくお願いします。
- 締切済み
- グラフィックソフト
- cssでのリンクに対する拝啓設定
よく見かける <ul> <li><a href="#">トップ</a></li> <li>><a href="#">サービス</a></li> <li>><a href="#">会社概要</a></li> </ul> の場合、<a>の背景に矢印の画像をリピートなしで設定してますが、 <a>に対してフロートが設定されていないと編集画面で背景の矢印 画像が見えませんが、これはCSSの設定自体に誤りがあるのでしょうか？それとも、編集画面で見えないのはDreamweaver8のエラーなのでしょうか？プレビューではきちんと表示されますが・・・。 どなたか有識者の方のご教授をお願いいたします。
- ベストアンサー
- HTML
- IE6で隙間ができてしまう
IE6でヘッダーとコンテンツの間に隙間ができてしまいます。 IE7、Firefox、Safariでは問題なく表示されています。 [HTML] <div id="top"> <div id="topcont"> <h1><a href="http://www.AAA.com/"><img src="img/AAA.gif" />AAA</a></h1> </div></div> <div id="navi"> <div id="navicont"> <ul> <li id="home"><a href="http://www.AAA.com/" title="AAA">AAA</a></li> <li id="BBB"><a href="http://www.AAA.com/BBB.html" title="BBB">AAAについて</a></li> <li id="CCC"><a href="http://www.AAA.com/CCC.html" title="CCC Lesson">CCC</a></li> </ul> </div> </div> [CSS] #top { background: url(img/IIIII.jpg) repeat-x; margin: 0px; padding: 0px; height: 80px; } #topcont { background: url(img/III.jpg) repeat-x; margin: 0px auto; padding: 0px; height: 80px; width: 900px; } #navi { background: url(img/NNN.gif) repeat-x; text-align: center; margin: 0px; padding: 0px; height: 35px; } #navicont { margin: 0px auto; padding: 0px; height: 35px; width: 900px; } 隙間を無くすにはどうすればよいのでしょうか。 わかる方いらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- HTML
- cssで背景を重ねることができるのでしょうか？
CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。 重ねて表示するのはどうすればいいのでしょうか？ 質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- PHPでaタグ内のリンクの末尾に文字列を追加したい
PHPでaタグ内のリンクの末尾に文字列を追加したいのですがやり方がわかず困っております。 やりたいことは以下のようなことです <a class="url" href="http://www.abc.com">○○</> や <a href="http://www.abc.com">○○</> となっているhrefのリンクの末尾に"AAA"などの文字列を付加したいです <a class="url" href="http://www.abc.com/AAA">○○</> や <a href="http://www.abc.com/AAA">○○</> ご存じの方がいらっしゃいましたらご教授ください。 よろしくお願いします
- 締切済み
- PHP
- リンクの選択
<a href="a">aaa</a> <a href="b">bbb</a> //------------- 上記のaaa or bbbについて、選択状態（a:hover）にするにはどうしたらよいでしょうか？
- ベストアンサー
- JavaScript
- 【CSS】firefoxで背景が表示されない－ナビゲーション（画像置換リンク）
「li」に背景画像を指定して、ナビゲーションをつくってみたところ・・・ Firefox、Operaで表示されません。 （IEでは表示されます。） ヘッダー左にロゴ（これはどのブラウザでも表示される）、右側にナビゲーションを配置した作りです。 ハックなど色々調べてみたのですが、解決できず・・・。 力をお貸しいただけないでしょうか。 g_nav.gif・・・グローバルナビゲーション一枚画像550px×30px。（上部：ロールオーバー前、下部：ロールオーバー時） 【HTML】 <!--headerここから--> <div id="header"> <!--logoここから--> <div id="logo"> <h1><a href="aaa.html">logo</a></h1> </div> <!--logoここまで--> <!--naviここから--> <div id="nav"> <ul> <li id="nav01"><a href="aaa.html">あああ</a></li> <li id="nav02"><a href="aaa.html">あああ</a></li> <li id="nav03"><a href="aaa.html">あああ</a></li> <li id="nav04"><a href="aaa.html">あああ</a></li> <li id="nav05"><a href="aaa.html">あああ</a></li> </ul> </div> <!--naviここまで--> </div> <!--headerここまで--> 【CSS】 #header{ width:800px; height:70px; margin:0 auto; padding:0; } #logo { width:216px; height:70px; background-image:url(../cmn_img/logo.gif); float:left; } #nav{ width:550px; height:30px; float:right; margin:40px 0 0 0; padding:0; text-indent:-999em; } #nav ul{ margin:0; padding:0; list-style-type:none; } #nav li{ display:inline; } #nav li#nav01 a,#nav li#nav02 a,#nav li#nav03 a,#nav li#nav04 a,#nav li#nav05 a,{ display:block; background-image:url(../cmn_img/g_nav.gif); overflow:hidden; float:left; } #nav li#nav01 a{width:110px; height:30px; background-position:0 0;} #nav li#nav02 a{width:110px; height:30px;background-position:-110px 0;} #nav li#nav03 a{width:110px; height:30px;background-position:-220px 0;} #nav li#nav04 a{width:110px; height:30px;background-position:-330px 0;} #nav li#nav05 a{width:110px; height:30px;background-position:-440px 0;} #nav li#nav01 a:hover{width:110px; height:30px;background-position:0 -30px;} #nav li#nav02 a:hover{width:110px; height:30px;background-position:-110px -30px;} #nav li#nav03 a:hover{width:110px; height:30px;background-position:-220px -30px;} #nav li#nav04 a:hover{width:110px; height:30px;background-position:-330px -30px;} #nav li#nav05 a:hover{width:110px; height:30px;background-position:-440px -30px;} 【下記ハック使用】 #header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #header {display: inline-table;} /* Hides from IE-mac \*/ * html #header {height: 1%;} #header {display: block;} /* End hide from IE-mac */
- 締切済み
- CSS
