I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > CSS > スタイルシートを利用した横並び定義リストのソースサンプル

スタイルシートを利用した横並び定義リストのソースサンプル

  • 投稿日:2015/10/16 |最終更新:2015/10/17
  • CSS
スタイルシートを利用した横並び定義リストのソースサンプル

定義リスト(dl)を横並びにしたときのスタイルサンプルです。
下記のような定義リストを横並びにしてみます。

サンプルHTMLソース

<dl>
    <dt>dtアイテムサンプル</dt>
        <dd>ddアイテムサンプル</dd>
    <dt>dtアイテムサンプル</dt>
        <dd>ddアイテムサンプル</dd>
    <dt>dtアイテムサンプル</dt>
        <dd>改行したときのサンプル<br />改行したときのサンプル<br />改行したときのサンプル<br /></dd>
    <dt>dtアイテムサンプル</dt>
        <dd>長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル長文サンプル</dd>
</dl>

定義リストを横並びにするときは、dtタグfloat: left;した後、clear: left;します。

また、弾のズレを防ぐためにmarginpaddingを調整します。

スタイルシートのサンプルコードは下記のとおりです。

シンプルなライン付き横並び定義リスト(1)

20151016simple1.png

直線を引いただけのだけのシンプルな横並び定義リストです。

dl{
    border-bottom: 1px solid #ccc;
}
dl dt{
    width: 120px;
    border-top: 1px solid #ccc;
    margin: 0;
    padding: 0;
    float: left;
    clear: left;
}
dl dd{
    margin: 0 0 0 120px;
    padding: 0;
    padding-left: 20px;
    border-top: 1px solid #ccc;
}

シンプルなライン付き横並び定義リスト(2)

20151016simple2.png

下線を入れ、ちょっと余白をとったシンプルな横並び定義リストです。

dl{
    border-bottom: 1px dotted #ccc;
}
dl dt{
    width: 120px;
    border-top: 1px dotted #ccc;
    margin: 0;
    padding: 5px;
    float: left;
    clear: left;
}
dl dd{
    margin: 5px 0 5px 120px;
    padding: 0;
    padding: 5px 5px 5px 20px;
    border-top: 1px dotted #ccc;
}

シンプルなライン付き横並び定義リスト(3)

20151016simple3.png

ちょっと見出しっぽくしたシンプルな横並び定義リストです。

dl{
    border-bottom: 1px solid #ccc;
}
dl dt{
    width: 120px;
    border-top: 1px solid #ccc;
    border-left: 10px solid #ccc;
    margin: 0;
    padding: 5px;
    float: left;
    clear: left;
}
dl dd{
    margin: 5px 0 5px 120px;
    padding: 0;
    padding: 5px 5px 5px 20px;
    border-top: 1px solid #ccc;
}

この記事が気に入ったらシェアしてください。

関連記事

ulリストのliアイテムを横並びにする方法あれこれ

iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定

HTMLとCSSで半角英数が連続する場合の文章の折返しを自由自在にコントロールする方法

pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。

pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。

欲しいアイコンだけ選んでWEBフォント化してくれる便利サイト【Fontello】

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。