CSS3とHTML5で作る定義リストデザインあれこれ

author photo

Byinfobloger

定義リストデザイン

定義リストと言われてもピンとこないかと思いますが、簡単に言うとサブタイトル付きの箇条書きの事です。

最初からそう言えよ、とツッコミが入りそうですね。

すみませんが箇条書きと書くのは面倒だっtので定義リストと書いてしまいました。

前置きはこれくらいにして、読者が記事を読みやすく、または理解しやすくするのが定義リストの役割です。

今回のテーマは定義リストをCSS3とHTML5でデザインしたいと思います。

スポンサーリンク

タイトル付きの定義リスト

いわゆる定義リストと呼ばれている「dl」ですが、デザインによっては色々な使い道があります。

まずは新着情報などやお知らせなどに使える定義リストから紹介します。

2030年1月1日 新着情報
3泊10日の火星旅行のご案内
2030年1月2日 新着情報
今年も異常気象?冬なのに早くも海水浴客が殺到中!
初売りの目玉商品は華やかなビキニ!
地軸が傾いたのか?成層圏エレベーターが故障!
2030年1月3日 新着情報
総理大臣の異常な行動、財政赤字のため街頭募金活動
2030年1月4日 新着情報
Googleに続いて遂にAmazonも倒産の危機に!
HTML
<dl class="Title-List1">
<dt><!-- タイトル1 --></dt>
<dd><!-- 本文1 --></dd>
<dt><!-- タイトル2 --></dt>
<dd><!-- 本文2-1 --></dd>
<dd><!-- 本文2-2 --></dd>
<dd><!-- 本文2-3 --></dd>
<dt><!-- タイトル3 --></dt>
<dd><!-- 本文4 --></dd>
<dt><!-- タイトル4 --></dt>
<dd><!-- 本文4 --></dd>
</dl>

タイトル付きの定義リスト色違い

他にも2色の定義リストを容易しました。。

2030年1月2日 新着情報
今年も異常気象?冬なのに早くも海水浴客が殺到中!
HTML
<dl class="Title-List2">
<dt><!-- タイトル1 --></dt>
<dd><!-- 本文1 --></dd>
<dt><!-- タイトル2 --></dt>
<dd><!-- 本文2 --></dd>
</dl>
2030年1月2日 新着情報
総理大臣の異常な行動、財政赤字のため街頭募金活動
HTML
<dl class="Title-List3">
<dt><!-- タイトル1 --></dt>
<dd><!-- 本文1 --></dd>
<dt><!-- タイトル2 --></dt>
<dd><!-- 本文2 --></dd>
</dl>

左のボーダラインが特徴的な定義リスト

色々な使い方ができるようにデザインしてみました。

この商品のメリットについて
これは例文ですのでお好きなテキストを入力してください。
この商品のデメリットについて
色々な使い方があると思います。セミナー開催告知やイベント開催告知のの案内など。
この商品を購入するべき理由
項目数はいくらでも増やすことが出来ます。
HTML
<dl class="Title-Dl11">
<dt><!-- タイトル --></dt>
<dd><!-- ここに本文を入力してください --></dd>
<dt><!-- タイトル --></dt>
<dd><!-- ここに本文を入力してください --></dd>
<!-- ↓項目を増やしたい場合は追加してください↓>
<dt><!-- タイトル --></dt>
<dd><!-- ここに本文を入力してください --></dd>
<!-- ここまで -->
</dl>

色違いの定義リストにリストを挿入?

さきほどとは色違いの定義リストです。

色違い定義リスト
今度は緑色系のボーダーラインの定義リストです。
ここにタイトルを記入
ここに本文を記入してください
HTML
<dl class="Title-Dl12">
<dt><!-- タイトル --></dt>
<dd><!-- ここに本文を入力してください --></dd>
<dt><!-- タイトル --></dt>
<dd><!-- ここに本文を入力してください --></dd>
<!-- ↓項目を増やしたい場合は追加してください↓>
<dt><!-- タイトル --></dt>
<dd><!-- ここに本文を入力してください --></dd>
<!-- ここまで -->
</dl>

この定義リストのリスト風の本文を入れてみましょう。

ここにタイトルを記入
定義リストの中に入れ子としてリストを挿入すると表示が崩れます。
ウェブアイコンを使ってリスト風に見せることにしました。
ここにタイトルを記入してください
定義リストの中に入れ子としてリストを挿入すると表示が崩れます。
項目数は何個でも追加することができます。
HTML
<dl class="Title-Dl12">
<dt><!-- タイトル1 --></dt>
<dd>
<i class="fas fa-check fa-fw"></i><!-- 本文1-1 --><br>
<i class="fas fa-check fa-fw"></i><!-- 本文1-2 -->
</dd>
<dt><!-- タイトル2 --></dt>
<dd>
<i class="fas fa-check fa-fw"></i><!-- 本文2-1 --><br>
<i class="fas fa-check fa-fw"></i><!-- 本文2-1 -->
</dd>
</dl>

さらに色違いの定義リスト

全部で三色の定義リストを容易しました。

ここにタイトルを記入してください
リストの色はお好みで選んでください。
ここにタイトルを記入してください
自分なりのルールを決めて使った方が統一感がでるかもしれませんね。
HTML
<dl class="Title-Dl13">
<dt><!-- タイトル --></dt>
<dd><!-- ここに本文を入力してください --></dd>
<dt><!-- タイトル --></dt>
<dd><!-- ここに本文を入力してください --></dd>
<!-- ↓項目を増やしたい場合は追加してください↓>
<dt><!-- タイトル --></dt>
<dd><!-- ここに本文を入力してください --></dd>
<!-- ここまで -->
</dl>

定義リストとリストのまとめ

読者は積極的に記事を読むことはありません。

いわゆる流し読みをします。

そんな時に読者の目を止めるのが画像とタイトルと箇条書きです。

なるべく時間をかけずに内容を把握したいのが読者の心理です。
あなたも私も、そんな読者を満足させる記事を書く必要があります。

定義リストトを上手く使って読者の「読まない」を解消しましょう!

関連記事
Share

Comments 0

Leave a reply