- ベストアンサー
きれいなメニューリストの作り方について
toudai_kamen http://park1.wakwak.com/~pocky/copipe/index.html や http://polymer.main.jp/nikibi/のクイックメニュー や、 http://www.ictnet.ne.jp/~kudoh/stylesheet/contents/ebisu1/ などの、マウスが乗ると色が変わり、そして文字などに下線がつかないような、きれいなメニューリストの作り方が、ソースをみてもよくわかりません。 どなたか、作り方を知っている方がいたら、教えてください、お願いします。 javascriptでもかまいません。
- toudai_kamen
- お礼率28% (20/69)
- HTML
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <title>タイトル</title> <style> li {list-style-type:none;} a { display:block; text-decoration:none; width:100px; height:20px; background-color:#CC99FF; font-size:13px; color:#FFFFFF; padding:3px 0 0 5px; } a:hover {background-color:#99CCCC;color:#996699;} </style> </head> <body> <ul> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul> </body> </html> どうだ。 ポイントはdisplay:block;
その他の回答 (3)
ちょっとアドバイスです。 色を付ける、下線を消すなどデザインに関することはCSS（Cascading Style Sheets）という言語を使います（JavaScriptやHTMLではなく）。リンクの下線を消す以外にも「こんなデザインはどうやるんだろう」と思ったときに必ずCSSが必要になるので、覚えておいて損はないと思います。 HTMLとCSSをちゃんと説明しているサイトは意外と少ないんですが、下のサイトはお勧めです。分かりやすいです。 http://elastic965.80code.com/ 以下のサイトは、CSSを使うといろいろなメニューをデザインできるという例です。結構凝ったテクニックを使っているので最初はソースコードを見ても分からないと思いますが、興味があればCSSを覚えてから挑戦してみてください。 http://css.maxdesign.com.au/listamatic/ http://css.maxdesign.com.au/listamatic2/
お礼
ありがとうございます！解決しました！！ もっと勉強します。
- koutarou504
- ベストアンサー率44% (182/407)
質問者の知識が完全に不明な為、少々基本的な処から回答致します。失礼かもしれませんが、不足のない様に・・・。 まず、ご提示されたページのメニューのデザインは、ＣＳＳ（カスケーディングスタイルシート）を用いて作成されております。JavaScript はメニューのデザインや振る舞いには関係していません。 そしてそのＣＳＳはどれもＨＴＭＬのＬＩＮＫ要素でＣＳＳの外部ファイルを読み込む方法で記述されています。 次に、その指示したい場所の特定の仕方に、クラスセレクタ，タイプセレクタ，子孫セレクタ，擬似クラスセレクタなどのＣＳＳの機能が使われています。 その上で、それらに色は何とか文字列でなく固まりとして振る舞う様にとか指定しています。 で、個々に診ていきますと、 メニューの中にある Ａ 要素に対しての事で、「マウスが乗ると色が変わる」という事で「A:hover{BACKGROUND-COLOR: #ffff33;}」とか、 「マウスが乗っても下線が付かない」という事で「A:hover{TEXT-DECORATION: none;}」とか、 「メニューリスト」という事で「A{DISPLAY: block;}」 とか、 いろいろ記述されています。 ただ、実際には更に限定する為にクラスセレクタも用いられていたり子孫セレクタが用いられていたりもしていますが・・・。 （「A.leftmenu:hover{」とか、「P.menu A:hover」とか・・・） 結局、どの部分をどれだけ真似たいのかとか、 どの様にしたいのか、 何が判っていて何が知りたいのか・・・。 変な話、ソースをコピーして必要な処（HTMLの部分）を書き換えれば、使いまわしも容易に出来る程度でもあり・・・。 知りたい事によっては、HTML の基本や CSS を一から説明する必要があるかもしれないし・・・。 （インライン要素がブロック要素の様な振る舞いをしているとか、知識を本当に理解しようとすると、結構難しい処を細工しているし・・・） とりあえず蛇足知識として、 ＣＳＳではいろいろ限りはあるけれどデザインを指定する事が出来る。 ＣＳＳではＡ要素（リンク）に対してのマウスが乗ったとかの契機を擬似クラスとして処理できる。 ＣＳＳでは、ＨＴＭＬの各要素のデザインの既定値となりうる事を改変する事が出来る。例えば<h1>あ</h1><h1>い</h1>は見出しで改行されるはずであるが、ＣＳＳの指定次第では横並びになったりといろいろありえます・・・。
お礼
とてもご丁寧にありがとうございます！ こんなに書いていただいて申し訳ないほどです。 cssというものの存在もわかり、感謝いたします。 それと、もっと勉強いたします(^^;) 本当にありがとうございました。
- yu-pai
- ベストアンサー率40% (27/66)
こんにちは。 下線がつかないソース： <style type="text/css"> <!-- a{ text-decoration:none; } --> </style> これを<head></head>の間に入れてください。 すると、ページ全体に効果が出ます。 マウスが触れたときに背景色と文字色を変えるソース： <STYLE type="text/css"> <!--A:HOVER{color : 文字色;background-color : 背景色;}--> </STYLE> こちらも同じく<head></head>の間に入れ、ページ全体に効果が出ます。 また、他にも色々なリンクの装飾があります。 下記のサイトが参考になるかと思います。 参考サイト：http://berry.littledear.org/
- 参考URL：
- http://berry.littledear.org/
お礼
さんこうURLまで丁寧にありがとうございます。 次からも困ったことがあったとき、機会がありましたら、よろしくお願いします。
お礼
きました！！こんな感じです。本当にありがとうございます！！！