リストタグの行間の調整方法について

Simplicityの特徴 フォーラム Simplicityについての質問 リストタグの行間の調整方法について

  • このトピックには4件の返信、1人の参加者があり、最後にAyaにより4年、 1ヶ月前に更新されました。
4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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の上下
      ・最終リストと枠線の間

      お忙しいところ恐れ入りますが、よろしくお願いいたします。

    • #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は不要です。

    • #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クラスで囲みました。
      数値を変えても変化が見られませんが、どう認識が違ってますでしょうか?

    • #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

    • #47939
      Aya
      ゲスト

      Hidekichiさん

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

      お陰様で希望通りの行間に設定することができました。
      また、作成してくださったサンプルも大変わかりやすく(こんなことが出来るのですね)、cssの知識も深めることができました。

      詳細かつわかりやすくご教示いただき、誠にありがとうございました。
      今後ともよろしくお願いいたします!

4件の返信スレッドを表示中
  • トピック「リストタグの行間の調整方法について」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)