- 締切済み
【ＣＳＳ】ちょっと欲張りすぎ？ こんなメニューが作りたい。
■リンク１ ■リンク２ ■リンク３ （※１）■はイメージで、リンクを持っている。 （※２）各行の空白をクリックでもリンクｎをクリックと同じ動作。各リンクとイメージは別のリンク。 上記のようなメニュー形式を実現したいです。 （※１）までなら以下の様な記述で実現できました。 <a href="hoge.html"><img src="hoge.jpg" alt=""/></a><a href="piyo.html">リンク１</a> しかし、(※２)各行の空白をクリックでもリンクｎをクリックと同じ動作の実現の仕方がわかりません。 名案ありましたら、教えてください。
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- HTML
- 回答数8
- ありがとう数2
- みんなの回答 （8）
- 専門家の回答
みんなの回答
- ran_2323
- ベストアンサー率43% (32/73)
こういうこと…ではないのでしょうか？？ ＜スタイル部分＞------------------------------------------- #menu ul, #menu li{ margin:0; padding:0; list-style:none; } #menu li{ width:160px; border-bottom:1px #fff solid; background:#fcc; } #menu li a{ display:block; width:130px; height:30px; padding-left:30px; padding-top:10px; } #menu li.menu01 a{ background:url(img1.gif) no-repeat 5px 10px; } #menu li.menu02 a{ background:url(img2.gif) no-repeat 5px 10px; } #menu li.menu03 a{ background:url(img3.gif) no-repeat 5px 10px; } ＜HTML部分＞------------------------------------------- <ul id="menu"> <li class="menu01"><a href="#">リンク1</a></li> <li class="menu02"><a href="#">リンク2</a></li> <li class="menu03"><a href="#">リンク3</a></li> </ul> ※IE6では多少崩れるので、paddingにhack処理が必要ですが…。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫topとleftでの指定なしで改行させないってのは、やはり無理でしょうか？ floatをつかう。 ブラウザによる違いがあり調整がめんどくさい 画像とリンクを入れ替えて、一方にposition:absoluteをつかう。 画像とリンクを入れ替えるのは、スタイルシートが無いときを考えると？ しかし、意味的におかしくなければ その他、色々な方法があると思います。でもここからは、工夫してみてください。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
完成ソースです。 唯一ポイントといえば、a要素自体をdisplay:block;でブロックにしてしまうことだけです。 配置はどうにでもなるでしょう。 ☆デザインのために、余分なスペースを入れたり、idやclass、あるいはタグを使わずにスタイルシートだけで、デザインするのが重要です。でなけりゃHTMLとCSSを分離する意味が無い。 そのためには、プロパティだけでなく、セレクタも上手に使いましょう。 以下全ソース・・・ご自由にご利用ください。 ここからは、ご自分で・・ ご覧の通り、HTMLのほうは極めてシンプルです。 携帯で見ると、デフォルトで表示されます。 【注】ソース中の全角スペースはタブに変更すること! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>懲りすぎリンク</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- @media screen{ html,body,ol,li{ margin: 0px; padding:0px; } h1{ margin-top: 70px; text-align: center;} a img{ border: outset white 2px; background-color: white;} body>ol{ display: block; width: 160px; margin-left: 10px;} body>ol>li{ display: block; width: 100%; position: relative; height: 36px; margin-bottom:6px;} body>ol>li>a{ display: block; width: 34px; height: 34px; margin: 0px;} body>ol>li>a + a{ display: block;position: relative;top: -33px; left: 38px; width: 120px; height: 24px; padding-left: 2px; padding-top: 6px; padding-bottom: 6px; margin:0px; background-color: pink;} body>ol>li+li>a + a{background-color: rgb(200,255,200);} body>ol>li+li+li>a + a{background-color: rgb(200,200,255);} } --> </style> </head> <body> <h1>懲りすぎリンク</h1> <ol> <li> <a href="./page1.html" title="1ページ"> <img src="http://service.okwave.jp/css/images_goo/question3.gif" width="34" height="34" alt="リンク"> </a> <a href="./page10.html">リンク１</a> </li> <li><a href="./page2.html" title="1ページ"> <img src="http://service.okwave.jp/css/images_goo/question1.gif" width="34" height="34" alt="link"></a> <a href="./page20.html">リンク２</a> </li> <li> <a href="./page3.html" title="1ページ"> <img src="http://service.okwave.jp/css/images_goo/question2.gif" width="34" height="34" alt="りんく"> </a> <a href="./page30.html">リンク３</a> </li> </ol> </body> </html>
補足
ORUKA1951さん ほんとうにご回答ありがとうございます。 body>ol>li>a + a{ display: block; position: relative; top: -33px; left: 38px; topとleftでイメージの右隣にリンクがくるように調整してますが、 この2行がないと改行してしまいますよね？ topとleftでの指定なしで改行させないってのは、やはり無理でしょうか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫欲しかったのは左メニューのイメージでして、ご回答を元に一行づつ改行するようなメニューに改造試みているのですが、 HTML変更なし。スタイルのみ書き換え。 ボーダーは消してあります。(製作中はつけておくと分かりやすい) 【分かりやすいように全角スペースでインデントさせています。全角スペースはタブに変更すること】 <style> <!-- html,body,ol,li{ margin: 0px; padding:0px; } h1{ margin-top: 70px; text-align: center; } a img{ border: outset white 2px; background-color: white; } body>ol{ display: block; margin-left: 10px; width: 160px; } body>ol>li{ display: block; width: 100%; position: relative; height: 36px; margin-bottom:6px; } body>ol>li>a{ display: block; width: 34px; height: 34px; margin: 0px; } body>ol>li>a + a{ display: block; position: relative; top: -33px; left: 38px; width: 120px; height: 24px; padding-left: 2px; padding-top: 6px; padding-bottom: 6px; margin:0px; background-color: pink; } body>ol>li+li>a + a{ background-color: rgb(200,255,200); } body>ol>li+li+li>a + a{ background-color: rgb(200,200,255); } --> </style>
空白の箇所（何も表示されてない場所）をもアンカー扱いにしたいと云う解釈で宜しいですか？ ならばa要素の全ての色指定を「背景色」にした「外部CSS」を用いて、空白分のスペースに文字を入れてspan等のインライン要素でclassやidを用いて囲めば良いのでは？
- ran_2323
- ベストアンサー率43% (32/73)
説明がイマイチ理解しきれなかったのですが…考え方を変えれば解決するのではないでしょうか…？？ >（※１）■はイメージで、リンクを持っている。 という点を、■を背景画像に敷いて、リンクｎを含むXpx×Ypxの範囲をリンク範囲として設定する…ということでいいのではと思います。 ＜スタイル＞-------------------------------------------- #link_menu, #link_menu li{ list-style:none; margin:0; padding:0; } #link_menu a{ //各リンク範囲設定 display:block; width:150px; height:50px; } .menu1 a{ background:url(画像のパス) no-repeat 0 0; /*■画像の指定*/ padding-left:20px; /*■画像分のスペースをとる*/ } ・ ・ ・ （リンクごとに異なる画像を使用する場合は複数記述） ＜ＨＴＭＬ＞-------------------------------------------- <ul id="link_menu"> <li class="menu1"><a href="#">リンク1</a></li> <li class="menu2"><a href="#">リンク2</a></li> <li class="menu3"><a href="#">リンク3</a></li> </ul> 見当違いな回答だったらすみません…！
補足
ran_2323さん ご回答ありがとうございます。 質問の仕方が的確ではなかったです。すみません。 [イメージ][リンク][空白 ]改行 ↑ここをクリックの時にリンクをクリックと同じ動作にしたい。 [リンク]は[イメージ]のすぐ隣に配置したいので、できればpadding-leftで調整もしたくないです。 でも頂いたご回答を参考に、考えてみます。
各行の空白というのがいまいちよく分からないけど、 <a href="hoge.html"><img src="hoge.jpg" alt=""/></a><a href="piyo.html" style="display:inline-block;padding:3px;border:black 2px solid;">リンク１</a> で一応いいのではなかろうかと ただ、たしかinline-blockは最近のブラウザしか対応してなかったはずなので、floatを使って <a href="hoge.html" style="float:left;"><img src="ico_must.gif" alt=""/></a><a href="piyo.html" style="float:left;display:block;padding:3px;border:black 2px solid;">リンク１</a> の方がいいかもしれない。
補足
nodagutiさん ご回答ありがとうございます。 「各行の空白」って表現わかりにくかったですね。すみません。 空白って言い方のほうが良かったでしょうか。。。 [イメージ][リンク][空白 ]改行 [イメージ][リンク][空白 ]改行 [イメージ][リンク][空白 ]改行 上記の様な感じです。[空白]で示したところをクリックでも[リンク]で示したところをクリックと同じにしたいのです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
Ｑ：よく分からないのですが、リンクの四角形の中にリンクを持つ画像が浮かんでいるということかな？ たとえば、お遊びで作ってみると・・・ 遊びの内容は、（巷のCSSでデザインされているページは、そのためだけのidやらclassがてんこ盛りなので、わざとシンプルなHTMLで挑戦してみた。） 【注意】下のソース(HTMLもCSSも)、分かりやすいように、すべて全角のスペースでインデントされています。テストするときは全角スペースをタブに置換すること!! 素のHTMLが下記のようなシンプルな(Strict)だとして、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>懲りすぎリンク</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1>懲りすぎリンク</h1> <ol> <li><a href="./page1.html" title="1ページ"><img src="http://service.okwave.jp/css/images_goo/question3.gif" width="34" height="34"></a><a href="./page10.html">リンク１</a></li> <li><a href="./page2.html" title="1ページ"><img src="http://service.okwave.jp/css/images_goo/question1.gif" width="34" height="34"></a><a href="./page20.html">リンク２</a></li> <li><a href="./page3.html" title="1ページ"><img src="http://service.okwave.jp/css/images_goo/question2.gif" width="34" height="34"></a><a href="./page30.html">リンク３</a></li> </ol> </body> </html> CSSは下記・・・ <style> <!-- html,body,ol,li{ margin: 0px; padding:0px; } h1{ margin-top: 70px; text-align: center; } a img{ border: outset white 2px; background-color: white; } body>ol{ display: block; position: absolute; top: 0px; height: 54px; width: 100%; border-bottom: inset 3px gray; } body>ol>li{ display: block; float:left; border: solid 1px red; width: 20%; font-size: 20px; position: relative; } body>ol>li>a{ display: block; width: 34px; height: 34px; position: absolute; border: solid: 2px green; z-index:2; margin: 6px; } body>ol>li>a + a{ display: block; width: 80%; height: 36px; padding-left: 34px; text-align:center; padding-top: 8px; padding-bottom: 8px; border: solid blue 1px; z-index:1; margin:0px; background-color: pink; } body>ol>li+li>a + a{ background-color: rgb(200,255,200); } body>ol>li+li+li>a + a{ background-color: rgb(200,200,255); } --> </style> <!-- ＨＴＭＬには一切余分なid,classはありません。 -->
補足
ORUKA1951さん ご回答ありがとうございます。 空白をクリックでリンクｎを押下と同じって動作は、まさにご回答の通りです。ありがとうございます。 ご回答は上メニューのイメージかと思いますが、欲しかったのは左メニューのイメージでして、ご回答を元に一行づつ改行するようなメニューに改造試みているのですが、ちょっと私には難しいです。。。 ■リンク１ ■リンク２ ■リンク３ ■（イメージ）のすぐ隣にリンク、空白（余白といった方が良かったかも）が続いて次の行へって感じなんです。 質問の仕方が曖昧でして申し訳ないのですが、もう少しご教授していただけると助かります。
お礼
ORUKA1951さん ご回答ありがとうございました。