WEB(K)Campus-ウエブ系キャンパス-

娯楽は少なめ。備忘録がほとんどのキャンパスノート代わりのWeb系のメモサイトです

  • メール・お問い合わせ
  • Twiieerのリンク
  • ピンタレストのリンク

(K)DL定義リストで表組みした時にfirst-childが効かない時の対処法

dl_dt_dd_top今回は定義リストの<dl><dt><dd>で表組みを作成していた時に、ちょっと詰まった所の備忘録です。
よくある会社概要とかのコンテンツで、こんな感じのデザインにしようとしました。

dl_dt_dd_01

下線(border-bottom)を引いた簡単なレイアウトを組んだ時に<dt>と<dd>で文字の高さが違う場合、レイアウトが崩れます。

dl_dt_dd_02

こんな時は上線(border-top)を引けば、線が崩れる事はありませんが、一番最初の項目の線は消したいところです。こんな感じで↓一番最初ですから普通に考えて<dt>と<dd>に「first-child」を指定してやりました。

dl dt:first-child{
     border-top:none;
}

dl dd:first-child{
     border-top:none;

ですが。これでは<dt>はboaderが消えますが、<dd>は消えませんorz

原因は間に挟んでる<dt>が原因

<dt>の方は効いてるのですが、<dd>には効いてません。
<dl>と<dd>の間に<dt>が挟まれているので隣接セレクタで対応する必要があったみたいなので、以下のようにCSSを変更。

dl dt:first-child{
     border-top:none;
}

dl dt:first-child + dd{
     border-top:none;

これで、思い通りの設定ができました。

出来上がったソースコードはこんな感じ

【HTML】

<dl>

          <dt>社名</dt><dd>web(K)campus</dd>
          <dt>住所</dt><dd>大阪市北区のどこかその辺</dd>
          <dt>URL</dt><dd>http://webkcampus.com</dd>
          <dt>業務内容</dt><dd>WEB制作・DTP・映像制作</dd>
     </dl>

【CSS】


body{
     width: 100%;
     min-width: 320px;
     font-size: 12px;
     padding:5%;
}    
dl{
     width:90%;
     border: 1px solid #666666;
     padding:3%;
     box-sizing: border-box;
     background-color:#fafafa;
}
    
dl dt{
     border-top:1px dashed #666666;
     float: left;
     width:25%;
     padding:2% 0;
}
dl dd{
     border-top:1px dashed #666666;
     padding:2% 0;
     margin-left: 25%;
}

dl dt:first-child{
     border-top:none;
}

dl dt:first-child + dd{
     border-top:none;
}

DEMO

まとめ

ちょっと冷静に考えればわかることですが、定義リストの階層を理解しておけば問題なく対処できました。今回は以上ですm(_ _)m

  • このエントリーをはてなブックマークに追加

コメントする

  • サイト内検索

  • About Me

    けぃしぃ(@Kc_fuji)

    WEB制作会社に務めるサラリーマンです。 DTP、WEB制作、映像編集 チョコチョコやってます。
    このブログは、制作の覚え書きとWordpressの実験所として利用しています。

  • Recent post

  • Category

  • Twitter

  • Archives

    • 2017 (4)
    • 2016 (4)
    • 2015 (19)
    • 2014 (33)
    • 2013 (25)
  • ページの先頭へ