Simplicityの特徴 › フォーラム › Simplicityについての質問 › リストタグの行間の調整方法について
- このトピックには4件の返信、1人の参加者があり、最後に
Ayaにより8年、 1ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年11月23日 3:09 PM #47816
Aya
ゲストいつもお世話になっております。
リストタグの行間の調整方法について、ご教示をお願いいたします。下記のようなリストにした際に、リスト部分以外のマージンを狭くしたいと考えています。
<div class="sp-warning"> <span class="bold">タイトル1</span> <ul> <li>りんご</li> <li>ばなな</li> <li>みかん</li> </ul> <span class="bold">タイトル2</span> <ul> <li>いぬ</li> <li>ねこ</li> <li>うさぎ</li> </ul> </div>
具体的に狭くしたい部分は、こちらです。
・タイトル1の下
・タイトル2の上下
・最終リストと枠線の間お忙しいところ恐れ入りますが、よろしくお願いいたします。
-
2016年11月23日 4:01 PM #47819
Hidekichi
ゲスト設置場所 ul { margin: 0; }
設置場所は、記事内なら
#the-content ul { //略 }
サイドバーなら、
#sidebar ul { //略 }
ただし、他の箇所でもul等が利用されているので、今入れようとしている箇所のhtmlを囲むようにして何かしら入れておく必要があります。
<div class="test"> <div class="sp-warning"> <span class="bold title_span">タイトル1</span> <ul> <li>りんご</li> <li>ばなな</li> <li>みかん</li> </ul> <span class="bold title_span">タイトル2</span> <ul> <li>いぬ</li> <li>ねこ</li> <li>うさぎ</li> </ul> </div> </div>
この場合、
.test ul { margin: 0; margin-bottom: 10px; } .test > ul:last-child { margin: 0; } .test .title_span { margin-bottom: 10px; }
こんな感じでタイトル下に10px、ulの下に10pxのスペースができます。後は、他のcssのスタイルの影響を受ける場合、それらを打ち消す値を入れる必要があるかと思います。
上記では.testの中のulということでスタイルしてますが、.sp-warningの中のulはという事なら.testとその対になる閉じdivは不要です。 -
2016年11月23日 5:42 PM #47837
Aya
ゲストHidekichiさん、早速のご回答ありがとうございます。
#the-content ul { margin: 0; } .test ul { margin: 0; margin-bottom: 5px; } .test > ul:last-child { margin: 0; } .test .title_span { margin-bottom: 5px;
こちらを子テーマのスタイルシートに貼りつけ、リストをtestクラスで囲みました。
数値を変えても変化が見られませんが、どう認識が違ってますでしょうか? -
2016年11月24日 1:47 PM #47870
Hidekichi
ゲストまぁおそらくはline-heightが効いてるんで幅広に見えるんでしょうけれども、質問にあること以外はどんなふうにされているかまでイメージできませんので何が原因かは何とも言えないです。
一応前のcssは想像だったので、実際のサンプルを作ってみました。どこにそのリストを入れられているのかわからないので#mainに入ってます。
サンプル: ulの行間調整 | codepen
.test(黒ボーダー)の下部にスペースが空いているのは.sp-warningの仕様です。
.test .sp-warning { margin-bottom: 0; }
とすれば良いですが、そもそもこの.testが必要かどうかは内容によって判断してください。例えば、
<div class="sp-warning test"> //中身略 </div>
と記載しても同じようなことはできます。この場合のセレクタは、
.sp-warning.test { //プロパティ }
となります。よってその中のulと指定したい場合は、
.sp-warning.test ul { //プロパティ }
となるわけです。
サンプル: classを囲まず追加で適用 | codepen
このサンプルのように、.testのクラスを作っておき、それを.sp-warningに追加することで.sp-warningを拡張するようなこともできます。
最初のサンプルが.testの中の.sp-warningというように指定していたわけですが、このサンプルは.sp-warningを利用してまた別の機能をつけると言う感じです。
最初のサンプルは、「.testの中の要素」と言うのがターゲットで、仮に.sp-warning以外の何かしらのクラスや、ul以外にtableが入っていても.testの子要素という指定をすればスタイルができることに対して、このサンプルは.sp-warningのプロパティを利用しつつ、.test以下の要素も指定するという感じになります。
.testの中に.sp-warningのプロパティを打ち消すようなものがある場合は、上手く機能しない場合がありますが、基本的には同じような使い方で別の表現をしたいような場合に有効です。
<div class="sp-danger test">
とかなら、同じような使い方ができて、かつ別途ulやらのスタイルを書かなくても良いですよね?
もし変更するような場合は、.sp-danger.test ul { //プロパティ }
と追記すればよいわけです。
簡単な例としては以下。
サンプル: クラスと要素の使い分けあるいは流用 | jsFiddle -
2016年11月25日 8:45 PM #47939
Aya
ゲストHidekichiさん
ご回答ありがとうございます。
お陰様で希望通りの行間に設定することができました。
また、作成してくださったサンプルも大変わかりやすく(こんなことが出来るのですね)、cssの知識も深めることができました。詳細かつわかりやすくご教示いただき、誠にありがとうございました。
今後ともよろしくお願いいたします!
-
-
投稿者投稿
- トピック「リストタグの行間の調整方法について」には新しい返信をつけることはできません。