【ＣＳＳ】ちょっと欲張りすぎ？　こんなメニューが作りたい。

締切済

質問者：kingfruits
質問日時：2008/12/29 16:16
回答数：8件

■リンク１
■リンク２
■リンク３

（※１）■はイメージで、リンクを持っている。
（※２）各行の空白をクリックでもリンクｎをクリックと同じ動作。各リンクとイメージは別のリンク。

上記のようなメニュー形式を実現したいです。

（※１）までなら以下の様な記述で実現できました。
<a href="hoge.html"><img src="hoge.jpg" alt=""/></a><a　href="piyo.html">リンク１</a>
しかし、(※２)各行の空白をクリックでもリンクｎをクリックと同じ動作の実現の仕方がわかりません。

名案ありましたら、教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (8件)

最新から表示
回答順に表示

No.8

回答者： ran_2323
回答日時：2008/12/30 02:12

こういうこと…ではないのでしょうか？？

＜スタイル部分＞-------------------------------------------

#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処理が必要ですが…。

- 0
- 件

通報する

No.7

回答者： ORUKA1951
回答日時：2008/12/30 00:00

≫topとleftでの指定なしで改行させないってのは、やはり無理でしょうか？

floatをつかう。
　ブラウザによる違いがあり調整がめんどくさい
画像とリンクを入れ替えて、一方にposition:absoluteをつかう。
　画像とリンクを入れ替えるのは、スタイルシートが無いときを考えると？
　しかし、意味的におかしくなければ
その他、色々な方法があると思います。でもここからは、工夫してみてください。

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さん　ご回答ありがとうございました。

通報する

お礼日時：2008/12/30 00:26

No.6

回答者： ORUKA1951
回答日時：2008/12/29 22:58

完成ソースです。

唯一ポイントといえば、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">

</style>
</head>
<body>
　　<h1>懲りすぎリンク</h1>
　　<ol>
　　　　<li>
　　　　　　<a href="./page1.html" title="1ページ">
　　　　　　　　<img src="http://service.okwave.jp/css/images_goo/question …
　　　　　　　　 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/question …
　　　　　　　　 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/question …
　　　　　　　　 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での指定なしで改行させないってのは、やはり無理でしょうか？

補足日時：2008/12/29 23:28

通報する

- 0
- 件

通報する

No.5

回答者： ORUKA1951
回答日時：2008/12/29 22:39

≫欲しかったのは左メニューのイメージでして、ご回答を元に一行づつ改行するようなメニューに改造試みているのですが、

HTML変更なし。スタイルのみ書き換え。
　ボーダーは消してあります。(製作中はつけておくと分かりやすい)
【分かりやすいように全角スペースでインデントさせています。全角スペースはタブに変更すること】

<style>

</style>

- 0
- 件

通報する

No.4

回答者： noname#100277
回答日時：2008/12/29 22:26

空白の箇所（何も表示されてない場所）をもアンカー扱いにしたいと云う解釈で宜しいですか？

ならばa要素の全ての色指定を「背景色」にした「外部CSS」を用いて、空白分のスペースに文字を入れてspan等のインライン要素でclassやidを用いて囲めば良いのでは？

- 0
- 件

通報する

No.3

回答者： ran_2323
回答日時：2008/12/29 19:51

説明がイマイチ理解しきれなかったのですが…考え方を変えれば解決するのではないでしょうか…？？

>（※１）■はイメージで、リンクを持っている。

という点を、■を背景画像に敷いて、リンクｎを含む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で調整もしたくないです。

でも頂いたご回答を参考に、考えてみます。

補足日時：2008/12/29 20:54

通報する

- 0
- 件

通報する

No.2

回答者： nodaguti
回答日時：2008/12/29 18:08

各行の空白というのがいまいちよく分からないけど、

<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さん　ご回答ありがとうございます。

「各行の空白」って表現わかりにくかったですね。すみません。
空白って言い方のほうが良かったでしょうか。。。

[イメージ][リンク][空白　　　　　　　　　　　]改行
[イメージ][リンク][空白　　　　　　　　　　　]改行
[イメージ][リンク][空白　　　　　　　　　　　]改行

上記の様な感じです。[空白]で示したところをクリックでも[リンク]で示したところをクリックと同じにしたいのです。

補足日時：2008/12/29 20:34

通報する

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2008/12/29 18:04

Ｑ：よく分からないのですが、リンクの四角形の中にリンクを持つ画像が浮かんでいるということかな？

たとえば、お遊びで作ってみると・・・
　遊びの内容は、（巷の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/question … 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/question … 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/question … width="34" height="34"></a><a href="./page30.html">リンク３</a></li>

　　</ol>
</body>
</html>

CSSは下記・・・
<style>

</style>

この回答への補足

ORUKA1951さん　ご回答ありがとうございます。

空白をクリックでリンクｎを押下と同じって動作は、まさにご回答の通りです。ありがとうございます。
ご回答は上メニューのイメージかと思いますが、欲しかったのは左メニューのイメージでして、ご回答を元に一行づつ改行するようなメニューに改造試みているのですが、ちょっと私には難しいです。。。

■リンク１
■リンク２
■リンク３

■（イメージ）のすぐ隣にリンク、空白（余白といった方が良かったかも）が続いて次の行へって感じなんです。

質問の仕方が曖昧でして申し訳ないのですが、もう少しご教授していただけると助かります。

補足日時：2008/12/29 20:32

通報する