![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
1.
2.
3.
や
●
●
●
のようなリストタグ同士の間隔を広くしたいのですが、
cssでliにmarginの設定をすると、
ブログのカテゴリもリストタグでできているので、そっちも影響しちゃいますよね。
そこで、記事本文の中のリストタグだけにCSSを適用したくて、
たとえば記事本文を、<div class="kiji"> 本文 </div>で囲んで、
CSSで、
.kiji li {
margin: 3em 1em;
}
としても何も変わらないんです。
どうしたらよいのでしょうか。
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
返事がないので、勝手に想像してみます。
質問文の記載通りだとすると、
htmlの該当部分 -------------------------
<div class="kiji">
<p>本文</p>
<ol>
<li>リスト</li><li>リスト</li><li>リスト</li>
</ol>
<ul>
<li>リスト</li><li>リスト</li><li>リスト</li>
</ul>
</div>
cssの該当部分 --------------------------
.kiji li {
margin: 3em 1em;
}
となる筈。これだけだとおそらくリスト要素の間隔が指定どうり広くなる筈。
問題になるのが、ブログであること。テンプレ作者はおそらくkijiクラスを作らなくても記事本文と他のカラムの要素(カテゴリーやカレンダー等)を区別するクラスやIDを作っている筈。おそらく、わざわざkijiクラスを作らなくても、それらを利用できると思われるし、利用するべきです。他のliへの指定があり、、今回作られたkijiクラスへの指定と重複してしまっていると思われます。
重複したときどちらを優先するかは、詳細度で決まります。詳細度はid>class>通常のタグ(liやp、hnなど)順で強く、強いものの数比較でどちらを表示に採用するかがきまります。今回の
.kiji li{~}
はブログで考えたときには、かなり弱い指定になりますので、おそらく、他の指定に負けていると思われます。
どうしたらいいのかは、以上を踏まえて、他のliへの指定に該当箇所が詳細度で勝つようにすればいいのです。手順は
1.他の指定がどうなっているのか、その詳細度はどのようになっているのかを把握し
2.もし、重複しているところが、目的の箇所へだけの指定なら、そちらを書き換える。
2.違えは、kiji li の親要素を利用して、必要なだけ詳細度を上げる。
3.もし、がんばっても、同点にしかならなければ、記述を後述する。(同点の場合は後ろに書かれたものが採用されます)
で、対応できると思います。該当ソースなしで、アドバイスできることはこの程度です。セレクタの優先順位はcssの基本中の基本です。場当たりてきに、cssをはめていくやり方では対応できませんので、ソースが出せないなら、cssのセレクタと詳細度を勉強してください。(ご自身のurlをだすことは、このQ&Aサイトでは、禁じられています。)
IDにしたり!importantをつけたりしましたがうまくいきませんでした。
わざわざkijiにしている理由は、
もともとあるクラスは、トップページと個別記事に指定されていて、
トップページにはリストタグで最新記事リストがあり、
それの間隔は広げたくなかったからです。
少し汚いソースになるんですが、トップページと個別記事のクラスを
分けることで解決しました。(内容はリストタグ以外同じ)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
楽天カードでガソリン入れたの...
-
「Ad Remover」について
-
ブログとアドセンスについて。 ...
-
Safariに表示される広告につい...
-
Amazonアフィリエイトや楽天ア...
-
グーグル広告がうざい
-
Googleによる楽天のエロ広告の...
-
自分のブログを出品したのです...
-
ブログのGoogleアドセンス申請...
-
アフィリエイトサイトは軌道に...
-
インスタでアフィリエイトをす...
-
月収100万円以上稼いでいるアフ...
-
YouTube でAI を使って月5万か...
-
HTMLプログラミングについて
-
Googleでアフィリエイト禁止事...
-
最近の、画面いっぱいに出てく...
-
ツイッターのメール問い合わせ...
-
アフィリエイト初心者です。 こ...
-
半兵衛でさえ、アフィリエイト...
-
Instagramのロゴ使用ガイドライ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ブログでAA(アスキーアート)...
-
オススメのブログサイトで
-
URL貼り付け
-
SEO(タイトル・H1・コピ...
-
検索避けタグ・・・
-
mixiにリンクを貼る方法
-
アメブロの日付を消す方法
-
リンクを貼ると文字の色が勝手...
-
ブログに書いたURLをリンクさせ...
-
liveboor blog タグクラウド設置
-
ブログカスタマイズ:hタグ変更...
-
ヤフーブログへのテーブル挿入
-
コメントにリンクをつけたい
-
ヤプログ レイアウトが崩れま...
-
ジュゲムブログでのEntryの日付...
-
アフェリエイトのリンクの貼り...
-
記事の本文だけリストタグの間...
-
FC2ブログをはじめてみました
-
goo ブログで 左サイドバーが...
-
fc2ブログの"ユーザータグ"に...
おすすめ情報