私は自分のサイトでヘッドメニューのリンクの幅をスタイルシートの<div>を使用して等間隔に調整しています。ちなみに下記が私が設定したヘッドメニュー<div>部分のスタイルシートです。
.headmenu div {float:left;
width:160px;
border-right:solid 1px white;
text-align:center;}
とこんな感じです。160pxの間隔でリンクを配置しているのですが、これをもうちょっと細かく設定したいのです。具体的にはヘッドメニューの一番左側にくるリンクだけ160pxに設定し、残りのリンクを120pxぐらいで統一するというデザインです。
お恥ずかしい話、私はスタイルシートの参考書を片手に参考書のタグをコピーし、それを自分好みの色やサイズの部分だけ編集するという方法でスタイルシートを作成してきました。ですからちょっと応用が必要になるともうお手上げです(T.T)
スタイルシートについて詳しい方、どうか私に上記のスタイルの設定方法を教えていただけないでしょうか。
回答ようろしくお願い致します。
No.2ベストアンサー
- 回答日時:
一番簡単な方法は、元々のスタイルシートはそのままにしておいて、幅を変更したい<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
- 回答日時:
設定したい分だけ個別に指定してあげればいけると思います…。
.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を入れて下さい。
ひとそれぞれだと思うので色んな方の意見を参考にしながらがんばってみて下さい。
質問、取り違えてたらごめんなさいね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
css初心者 フレックスボックス...
-
CSSボーダーの設定(横並びボタ...
-
吹き出し 下記の吹き出しのスタ...
-
CSSでa要素全体をリンク出来る...
-
HTMLで文字が重なって表示されます
-
CSS:animation開始位置の設定
-
Css側で、文字の位置を数センチ...
-
CSSで3分割した背景画像を配置...
-
widthやheightの数値に単位(px...
-
IE・FirefoxでのCSS表示違いに...
-
文字の色を上下で変えるには?
-
CSSと<dl><dd>で間隔をあけて1...
-
<div>と<div>の間の10px程の...
-
スクロールボックスを中央に配...
-
Mozilla Firefoxで画像がちゃん...
-
ヘッダー画像を幅一杯にすると...
-
どう変更してもIE6だけCS...
-
CSSで左に画像、右にテキストを...
-
リストタグを用いた縦メニュー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報