スタイルシートで<div>を使ったヘッドメニューのデザインについて教えてください

質問

私は自分のサイトでヘッドメニューのリンクの幅をスタイルシートの<div>を使用して等間隔に調整しています。ちなみに下記が私が設定したヘッドメニュー<div>部分のスタイルシートです。

.headmenu div {float:left;
width:160px;
border-right:solid 1px white;
text-align:center;}

とこんな感じです。160pxの間隔でリンクを配置しているのですが、これをもうちょっと細かく設定したいのです。具体的にはヘッドメニューの一番左側にくるリンクだけ160ｐｘに設定し、残りのリンクを120ｐｘぐらいで統一するというデザインです。

お恥ずかしい話、私はスタイルシートの参考書を片手に参考書のタグをコピーし、それを自分好みの色やサイズの部分だけ編集するという方法でスタイルシートを作成してきました。ですからちょっと応用が必要になるともうお手上げです（T.T）

スタイルシートについて詳しい方、どうか私に上記のスタイルの設定方法を教えていただけないでしょうか。
回答ようろしくお願い致します。

回答No.2

pingu98 · ベストアンサー

一番簡単な方法は、元々のスタイルシートはそのままにしておいて、幅を変更したい<div>に対して個別にスタイルを指定します。
例えばこんな感じ。。
<div>menu1</div>
<div style="width:120px;">menu2</div>
<div style="width:120px;">menu3</div>
<div style="width:120px;">menu4</div>
こうすると、もともとは160pxと指定されているdivではありますが、個別に直接指定したものの方が優先されwidthだけが120pxに変更されます。その他のborder等々の指定は引き継がれます。

で、もうちょっとだけ楽をする場合は、元々のスタイルシートの方をwidth:120pxとして、先頭のdivにstyle="160px;"とした方がいいかもですね。

更に同じ事ではあるのですが、最初のdivに<div id="Initial">等のようにidをつける方法もあります。
スタイルシートには以下の様に書きます。

.headmenu div {float:left; width:120px; border-right:solid 1px white; text-align:center; }
#Initial { width:160px; }

こうすると、一行目の指定で.headmenu内の全てのdivに120pxが指定されますが、次の行でid="Initial"のwidthが上書きされてますので、そのdivのwidthだけが160pxになります。
idの名前は何でも良いのですが、使える文字は半角英数で先頭が数字で無い物に限ります。また、ひとつのHTML文書の中に同じ名前のidを使う事はできません。

こんなかんじで、、なんとなく伝わりましたでしょうか。。

お礼

悪戦苦闘しながら、とうとうデザインをうまく完成させることができました。回答ありがとうございました。

回答No.1

inspirexxx

設定したい分だけ個別に指定してあげればいけると思います…。

.headmenu {
　float: left;
　border-right: solid 1px white;
　text-align:center;
}

.link-160 {
　width: 160px;
}

.link-120 {
　width: 120px;
}

------------------------------------
<div class="headermenu">
　<p class="link-160">
　　<a href=""></a>
　</p>
　<p class="link-120">
　　<a href=""></a>
　</p>
</div>

文字だけに指定したいなら、pではなくaタグにclassを入れて下さい。
ひとそれぞれだと思うので色んな方の意見を参考にしながらがんばってみて下さい。

質問、取り違えてたらごめんなさいね。

お礼

回答ありがとうございました、おかげさまで何とか思い通りのデザインが完成しました。