いきなりですが、novは個人的にリストタグの中でも【dl・dt・dd】が好きです（笑）
ただのリストタグ（ul、ol・li）よりコンテンツがキレイに表示できると思うので。そんな説明リストタグの基本と、コピペで使える「novオリジナルの」おしゃれなCSSデザインコードをサンプル付きで解説しています！
説明リストは
- 会社概要
- スペック表
- Q&A（FAQ）
- お知らせ一覧
- 用語集
などに幅広く活用できるので、おすすめです♪
novちなみに、普通のリストタグ（ul-li、ol-li）は以下で解説しています。
全て無料！ホームページテンプレー…
コピペOK！リストタグ（ul-liやol-li）をCSSで横並びやおしゃれなデザインにするコードまとめ
リストはホームページをキレイに見せるためにも役立つし、訪問者にもわかりやすいサイトだと認識させることができるHTMLタグです。一般的にリストタグを使用するとSEO効果…
目次
用語と説明のリストを作る(<dl>～</dl> <dt>～</dt> <dd>～</dd>)
用語と説明をリスト化するときに使用します。
使い方は全体を<dl>タグで囲い、用語を<dt>、説明を<dd>という形で使用します。
こちらのタグを使うとHTMLがとってもスッキリしますので、検索エンジンにも優しいサイトになります！
また、用語<dt>と説明<dd>は必ずしも１対１になる必要はなく、例えば用語<dt>１つに対して、説明<dd>が６つで構成されていても構いません。
※例(イメージです)
<dl>
<dt>MENU</dt>
<dd>TOP</dd>
<dd>htmlとは</dd>
<dd>CSSとは</dd>
<dd>テンプレート</dd>
<dd>練習問題</dd>
<dd>Q&A</dd>
<dd>お問い合わせ</dd>
</dl>
↓↓↓
- MENU
-
TOP
-
htmlとは
-
CSSとは
-
テンプレート
-
練習問題
-
Q&A
-
お問い合わせ
コピペOK！定義・説明リストをおしゃれなデザインに昇華させるnovオリジナルなCSSコード２０選
novオリジナルdl、dt、ddデザインCSSコードの特徴
- HTML標準の <div> グルーピングに対応
-
横並びやカード型のデザインでは、できるだけレスポンシブ（スマホ）表示の崩れをなくため <dl> の直下に <div> を配置する構造を採用しています。
- 純粋なCSS描画を採用
-
Q&Aのバッジやドットリーダー（点線接続）、タイムラインの線などもすべてCSS単体で完結しています。
① 会社概要・スペック表向け（横並び・グリッド）
サンプルのリストは画像なので、サイズがバラバラですがご了承ください。
01. ミニマル・ボーダーインライン（王道の横並びテーブル風）
左側の項目名（dt）と右側の内容（dd）をすっきりとした下線で区切る、最も汎用性の高い横並びです。
<dl class="dl-border-table">
<div class="row">
<dt>会社名</dt>
<dd>株式会社novデザイン</dd>
</div>
<div class="row">
<dt>設立年月</dt>
<dd>2020年4月1日</dd>
</div>
<div class="row">
<dt>所在地</dt>
<dd>東京都千代田区大手町1-1-1 テクノロジービル 8F</dd>
</div>
</dl>.dl-border-table {
margin: 2rem 0;
border-top: 1px solid #e2e8f0;
}
.dl-border-table .row {
display: flex;
flex-direction: column;
padding: 0.85rem 0;
border-bottom: 1px solid #e2e8f0;
line-height: 1.6;
}
.dl-border-table dt {
font-weight: 700;
color: #1e293b;
margin-bottom: 0.25rem;
}
.dl-border-table dd {
margin: 0;
color: #475569;
}
/* タブレット・PC以上で横並び */
@media (min-width: 640px) {
.dl-border-table .row {
flex-direction: row;
align-items: baseline;
}
.dl-border-table dt {
width: 140px;
flex-shrink: 0;
margin-bottom: 0;
}
}
02. ピルバッジ＆横並びテキスト（モダンUIスタイル）
項目名（dt）が角丸カプセルバッジになり、スペック情報や要件定義を軽快に見せます。
<dl class="dl-pill-row">
<div class="row">
<dt>開発言語</dt>
<dd>TypeScript, HTML5, CSS3</dd>
</div>
<div class="row">
<dt>フレームワーク</dt>
<dd>Next.js, Vue.js, Tailwind CSS</dd>
</div>
<div class="row">
<dt>インフラ環境</dt>
<dd>AWS (Lambda, CloudFront), Vercel</dd>
</div>
</dl>.dl-pill-row {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.dl-pill-row .row {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.75rem 1rem;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #f1f5f9;
}
.dl-pill-row dt {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
padding: 0.2rem 0.75rem;
background: #0ea5e9;
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
border-radius: 9999px;
letter-spacing: 0.03em;
}
.dl-pill-row dd {
margin: 0;
color: #334155;
line-height: 1.6;
}
@media (min-width: 640px) {
.dl-pill-row .row {
flex-direction: row;
align-items: center;
gap: 1.25rem;
}
.dl-pill-row dt {
width: 120px;
flex-shrink: 0;
}
}
03. ゼブラストライプ・スペック表（シマシマ背景）
偶数行と奇数行で背景色を切り替え、行数の多い仕様表やスペック比較でも視線が迷いません。
<dl class="dl-zebra-specs">
<div class="row">
<dt>ディスプレイ</dt>
<dd>6.7インチ Super Retina XDR OLED</dd>
</div>
<div class="row">
<dt>プロセッサ</dt>
<dd>A17 Pro チップ（6コアCPU / 6コアGPU）</dd>
</div>
<div class="row">
<dt>バッテリー容量</dt>
<dd>最大29時間のビデオ再生に対応</dd>
</div>
<div class="row">
<dt>接続端子</dt>
<dd>USB Type-C（USB 3 最大10Gbps）</dd>
</div>
</dl>.dl-zebra-specs {
margin: 2rem 0;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
.dl-zebra-specs .row {
display: flex;
flex-direction: column;
padding: 0.85rem 1.25rem;
line-height: 1.6;
}
.dl-zebra-specs .row:nth-child(odd) {
background: #ffffff;
}
.dl-zebra-specs .row:nth-child(even) {
background: #f8fafc;
}
.dl-zebra-specs dt {
font-weight: 700;
color: #0f172a;
margin-bottom: 0.2rem;
}
.dl-zebra-specs dd {
margin: 0;
color: #475569;
}
@media (min-width: 640px) {
.dl-zebra-specs .row {
flex-direction: row;
align-items: center;
}
.dl-zebra-specs dt {
width: 150px;
flex-shrink: 0;
margin-bottom: 0;
}
}
04. ドットリーダー・コネクト（目次・カフェメニュー風）
項目名と内容の間を点線（ドット）で繋ぐ、上品でレトロクラシックな横並びです。
<dl class="dl-dot-leader">
<div class="row">
<dt>ハンドドリップ珈琲</dt>
<dd>¥ 550</dd>
</div>
<div class="row">
<dt>自家製キャラメルラテ</dt>
<dd>¥ 620</dd>
</div>
<div class="row">
<dt>濃厚ベイクドチーズケーキ</dt>
<dd>¥ 580</dd>
</div>
</dl>.dl-dot-leader {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.dl-dot-leader .row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.dl-dot-leader dt {
position: relative;
font-weight: 700;
color: #292524;
background: #ffffff;
padding-right: 0.5rem;
z-index: 1;
}
.dl-dot-leader dd {
margin: 0;
color: #78716c;
background: #ffffff;
padding-left: 0.5rem;
z-index: 1;
font-weight: 600;
}
.dl-dot-leader .row::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0.35em;
border-bottom: 2px dotted #d6d3d1;
z-index: 0;
}
.dl-dot-leader .row {
position: relative;
}
05. ツートン・ブロックグリッド（左側色塗り）
左側の項目名（dt）に薄い背景色を敷き、左右の境界を美しく際立たせたグリッド形式です。
<dl class="dl-twotone-grid">
<div class="row">
<dt>営業時間</dt>
<dd>10:00 〜 19:00（土日祝定休）</dd>
</div>
<div class="row">
<dt>アクセス</dt>
<dd>JR各線「東京駅」丸の内北口より徒歩3分</dd>
</div>
<div class="row">
<dt>駐車場</dt>
<dd>提携駐車場あり（1時間無料チケット進呈）</dd>
</div>
</dl>.dl-twotone-grid {
margin: 2rem 0;
border: 1px solid #cbd5e1;
border-radius: 8px;
overflow: hidden;
}
.dl-twotone-grid .row {
display: flex;
flex-direction: column;
border-bottom: 1px solid #e2e8f0;
}
.dl-twotone-grid .row:last-child {
border-bottom: none;
}
.dl-twotone-grid dt {
padding: 0.6rem 1rem;
background: #f1f5f9;
font-weight: 700;
color: #334155;
font-size: 0.9rem;
}
.dl-twotone-grid dd {
margin: 0;
padding: 0.8rem 1rem;
background: #ffffff;
color: #475569;
line-height: 1.6;
}
@media (min-width: 640px) {
.dl-twotone-grid .row {
flex-direction: row;
align-items: stretch;
}
.dl-twotone-grid dt {
width: 140px;
flex-shrink: 0;
display: flex;
align-items: center;
border-right: 1px solid #e2e8f0;
}
.dl-twotone-grid dd {
flex: 1;
}
}
② Q&A（よくある質問）向け
06. Q&A サークルバッジ（カード分離型）
「Q」と「A」の独立した丸いバッジを先頭に配置した、信頼性の高い定番FAQデザインです。
<dl class="dl-faq-card">
<div class="item">
<dt><span class="badge q">Q</span>サービスの利用に初期費用はかかりますか？</dt>
<dd><span class="badge a">A</span>いいえ、初期費用は一切かかりません。月額プラン料金のみで即日ご利用開始いただけます。</dd>
</div>
<div class="item">
<dt><span class="badge q">Q</span>途中でプランの変更や解約は可能ですか？</dt>
<dd><span class="badge a">A</span>管理画面よりいつでも即時変更・解約が可能です。違約金等も発生いたしません。</dd>
</div>
</dl>.dl-faq-card {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.dl-faq-card .item {
padding: 1.25rem;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.dl-faq-card dt,
.dl-faq-card dd {
display: flex;
align-items: flex-start;
gap: 0.75rem;
line-height: 1.6;
}
.dl-faq-card dt {
font-weight: 700;
color: #1e293b;
margin-bottom: 0.75rem;
}
.dl-faq-card dd {
margin: 0;
color: #475569;
}
.dl-faq-card .badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 800;
color: #ffffff;
}
.dl-faq-card .badge.q { background: #3b82f6; }
.dl-faq-card .badge.a { background: #ef4444; }
07. 対話・吹き出し型FAQ
質問と回答がそれぞれ独立した吹き出しになっており、チャットのような親しみやすさを演出します。
<dl class="dl-faq-bubble">
<div class="item">
<dt>支払い方法は何が使えますか？</dt>
<dd>クレジットカード各種（VISA, JCB, Mastercard, AMEX）および銀行振込に対応しています。</dd>
</div>
</dl>.dl-faq-bubble {
margin: 2rem 0;
}
.dl-faq-bubble .item {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.dl-faq-bubble dt {
position: relative;
align-self: flex-start;
padding: 0.75rem 1.25rem;
background: #eff6ff;
color: #1d4ed8;
font-weight: 700;
border-radius: 16px 16px 16px 2px;
}
.dl-faq-bubble dd {
position: relative;
align-self: flex-start;
margin: 0;
padding: 0.75rem 1.25rem;
background: #f1f5f9;
color: #334155;
line-height: 1.6;
border-radius: 2px 16px 16px 16px;
}
08. ヘッダースプリットFAQ
質問（dt）を帯状の背景にして、回答（dd）を白い枠で包み込む見栄えのするデザインです。
<dl class="dl-faq-split">
<div class="item">
<dt>無料トライアル期間はどのくらいありますか？</dt>
<dd>登録日から起算して「14日間」の無料トライアルが適用されます。すべての有料機能をお試しいただけます。</dd>
</div>
</dl>.dl-faq-split {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.dl-faq-split .item {
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.dl-faq-split dt {
padding: 0.75rem 1.25rem;
background: linear-gradient(135deg, #475569, #334155);
color: #ffffff;
font-weight: 700;
font-size: 0.95rem;
}
.dl-faq-split dt::before {
content: 'Q. ';
color: #38bdf8;
}
.dl-faq-split dd {
margin: 0;
padding: 1.25rem;
background: #ffffff;
color: #334155;
line-height: 1.7;
}
09. ミニマル・アンダーラインFAQ
枠や塗りを排除し、洗練されたフォントの濃淡と細い破線のみで構築したスマートなスタイルです。
<dl class="dl-faq-minimal">
<dt>領収書の発行は可能ですか？</dt>
<dd>はい、決済完了後にマイページ内の「購入履歴」よりPDF形式のインボイス対応領収書を発行いただけます。</dd>
</dl>.dl-faq-minimal {
margin: 2rem 0;
}
.dl-faq-minimal dt {
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
padding-bottom: 0.35rem;
}
.dl-faq-minimal dt::before {
content: 'Q.';
color: #6366f1;
font-weight: 800;
margin-right: 0.5rem;
}
.dl-faq-minimal dd {
margin: 0 0 1.5rem 0;
padding-bottom: 1.5rem;
color: #475569;
line-height: 1.7;
border-bottom: 1px dashed #cbd5e1;
}
③ お知らせ・更新履歴・タイムライン向け
10. インライン・お知らせリスト（日付dt＋本文dd）
コーポレートサイトのトップページ等に最適な、日付と記事タイトルが横一列に並ぶ定番ニュース形式です。
<dl class="dl-news-list">
<div class="row">
<dt>2026.04.15</dt>
<dd><a href="#">ゴールデンウィーク期間中のカスタマーサポート休業に関するお知らせ</a></dd>
</div>
<div class="row">
<dt>2026.04.01</dt>
<dd><a href="#">新機能「リアルタイム共同編集モード」を正式リリースしました</a></dd>
</div>
</dl>.dl-news-list {
margin: 2rem 0;
border-top: 1px solid #e2e8f0;
}
.dl-news-list .row {
display: flex;
flex-direction: column;
padding: 0.85rem 0;
border-bottom: 1px solid #e2e8f0;
line-height: 1.6;
}
.dl-news-list dt {
font-family: monospace, sans-serif;
font-weight: 700;
color: #64748b;
font-size: 0.9rem;
}
.dl-news-list dd {
margin: 0.2rem 0 0 0;
}
.dl-news-list dd a {
color: #1e293b;
text-decoration: none;
transition: color 0.2s ease;
}
.dl-news-list dd a:hover {
color: #3b82f6;
text-decoration: underline;
}
@media (min-width: 640px) {
.dl-news-list .row {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}
.dl-news-list dt {
width: 100px;
flex-shrink: 0;
}
.dl-news-list dd {
margin: 0;
}
}
11. バーティカル・タイムライン（沿革・ヒストリー）
左側に縦の接続線が通り、年月のドットと内容がつながる沿革・歴史用のデザインです。
<dl class="dl-timeline">
<div class="row">
<dt>2020年 10月</dt>
<dd>東京都渋谷区にて株式会社novデザインを設立。</dd>
</div>
<div class="row">
<dt>2022年 06月</dt>
<dd>自社プロダクトの有料会員数が10万人を突破。</dd>
</div>
<div class="row">
<dt>2024年 01月</dt>
<dd>本社を千代田区大手町へ移転。シリーズBラウンドの資金調達を実施。</dd>
</div>
</dl>.dl-timeline {
position: relative;
margin: 2rem 0 2rem 1rem;
padding-left: 1.5rem;
border-left: 2px solid #cbd5e1;
}
.dl-timeline .row {
position: relative;
padding-bottom: 1.5rem;
}
.dl-timeline .row:last-child {
padding-bottom: 0;
}
.dl-timeline .row::before {
content: '';
position: absolute;
top: 0.35rem;
left: calc(-1.5rem - 6px);
width: 10px;
height: 10px;
background: #3b82f6;
border-radius: 50%;
box-shadow: 0 0 0 4px #eff6ff;
}
.dl-timeline dt {
font-weight: 700;
color: #1e293b;
font-size: 0.95rem;
margin-bottom: 0.2rem;
}
.dl-timeline dd {
margin: 0;
color: #475569;
line-height: 1.6;
}
12. ステップ・ナンバード解説（01, 02…）
数字をグラデーションバッジにし、作業手順やステップ進行を視覚化したリストです。
<dl class="dl-step-numbered">
<div class="step">
<dt>アカウントの新規開設</dt>
<dd>公式サイトの「無料登録」ボタンより、メールアドレスとパスワードを設定します。</dd>
</div>
<div class="step">
<dt>本人確認書類の提出</dt>
<dd>スマートフォンから運転免許証またはマイナンバーカードを撮影してアップロードします。</dd>
</div>
</dl>.dl-step-numbered {
margin: 2rem 0;
counter-reset: dl-step;
display: flex;
flex-direction: column;
gap: 1rem;
}
.dl-step-numbered .step {
counter-increment: dl-step;
position: relative;
padding: 1.25rem 1.25rem 1.25rem 4rem;
background: #f8fafc;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.dl-step-numbered .step::before {
content: counter(dl-step, decimal-leading-zero);
position: absolute;
top: 1.25rem;
left: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
background: #0f172a;
color: #ffffff;
font-weight: 700;
font-size: 0.8rem;
border-radius: 6px;
}
.dl-step-numbered dt {
font-weight: 700;
font-size: 1.05rem;
color: #0f172a;
margin-bottom: 0.35rem;
}
.dl-step-numbered dd {
margin: 0;
color: #475569;
line-height: 1.6;
}
④ 用語集・リッチカード向け
13. ディクショナリー・用語集スタイル
英英辞典や専門用語集のように、用語（dt）を太字で際立たせ、下にインデントで解説文（dd）を配置します。
<dl class="dl-dictionary">
<dt>セマンティックHTML <span class="badge">[Web用語]</span></dt>
<dd>タグそのものが持つ意味（役割）を正しく用いて構造化されたHTML文書のこと。SEOやアクセシビリティ向上に必須とされる。</dd>
</dl>.dl-dictionary {
margin: 2rem 0;
padding: 1.25rem 1.5rem;
background: #fffdfa;
border-left: 4px solid #f59e0b;
border-top: 1px solid #fef3c7;
border-right: 1px solid #fef3c7;
border-bottom: 1px solid #fef3c7;
border-radius: 0 8px 8px 0;
}
.dl-dictionary dt {
font-size: 1.1rem;
font-weight: 700;
color: #78350f;
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.dl-dictionary .badge {
font-size: 0.75rem;
font-weight: normal;
color: #b45309;
}
.dl-dictionary dd {
margin: 0;
color: #451a03;
line-height: 1.7;
}
14. グラデーション・アンダーラインカード
用語（dt）の下に鮮やかなグラデーションラインを敷いた、アイキャッチ力の高い定義カードです。
<dl class="dl-grad-underline">
<dt>レスポンシブWebデザイン</dt>
<dd>PC、タブレット、スマートフォンなど、多様な画面サイズに応じて単一のHTMLで最適なレイアウトを提供する制作手法。</dd>
</dl>.dl-grad-underline {
margin: 2rem 0;
padding: 1.5rem;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.dl-grad-underline dt {
position: relative;
display: inline-block;
font-size: 1.1rem;
font-weight: 700;
color: #1e293b;
padding-bottom: 0.4rem;
margin-bottom: 0.8rem;
}
.dl-grad-underline dt::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #ec4899, #8b5cf6);
border-radius: 99px;
}
.dl-grad-underline dd {
margin: 0;
color: #475569;
line-height: 1.7;
}
15. ホバー・フローティングカード（ホバーで浮き上がるカード）
マウスを乗せるとふわりと持ち上がり、枠線がハイライトされるインタラクティブな定義リストです。
<dl class="dl-hover-float">
<div class="card">
<dt>アクセシビリティ（a11y）</dt>
<dd>障がいの有無や利用環境に関わらず、すべてのユーザーが情報やサービスにアクセスできるように設計・配慮すること。</dd>
</div>
</dl>.dl-hover-float {
margin: 2rem 0;
}
.dl-hover-float .card {
padding: 1.5rem;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dl-hover-float .card:hover {
transform: translateY(-4px);
border-color: #3b82f6;
box-shadow: 0 12px 24px -4px rgba(59, 130, 246, 0.12);
}
.dl-hover-float dt {
font-size: 1.1rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 0.5rem;
}
.dl-hover-float dd {
margin: 0;
color: #475569;
line-height: 1.7;
}
※こちらは画像なので、マウスを乗せてもフワッと持ち上がりません(^_^;)ぜひご自身で体験してみてください！
その他、横並びデザインなど
16. メタ情報・タグチップス（横並びメタデータ）
記事の公開日、著者、カテゴリ、閲覧時間などのメタ情報を、コンパクトに横並びバッジ化するデザインです。
<dl class="dl-meta-chips">
<div class="chip">
<dt>公開日</dt>
<dd>2026.08.31</dd>
</div>
<div class="chip">
<dt>カテゴリー</dt>
<dd>CSSテクニック</dd>
</div>
<div class="chip">
<dt>読了目安</dt>
<dd>約5分</dd>
</div>
</dl>.dl-meta-chips {
margin: 1.5rem 0;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.dl-meta-chips .chip {
display: inline-flex;
align-items: center;
background: #f1f5f9;
border-radius: 6px;
overflow: hidden;
border: 1px solid #e2e8f0;
font-size: 0.8rem;
}
.dl-meta-chips dt {
padding: 0.25rem 0.5rem;
background: #cbd5e1;
color: #334155;
font-weight: 700;
}
.dl-meta-chips dd {
margin: 0;
padding: 0.25rem 0.6rem;
color: #475569;
}
17. KPI・実績数値メトリクス（横並びグリッド）
「売上実績」「導入社数」「満足度」など、数字を強調して信頼性を高めるランディングページ向けの定義リストです。
<dl class="dl-kpi-grid">
<div class="metric">
<dt>累計導入社数</dt>
<dd><span class="number">2,500</span><span class="unit">社以上</span></dd>
</div>
<div class="metric">
<dt>ユーザー満足度</dt>
<dd><span class="number">98.4</span><span class="unit">%</span></dd>
</div>
<div class="metric">
<dt>月間アクティブ数</dt>
<dd><span class="number">120</span><span class="unit">万人</span></dd>
</div>
</dl>.dl-kpi-grid {
margin: 2rem 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.dl-kpi-grid .metric {
padding: 1.25rem;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
text-align: center;
}
.dl-kpi-grid dt {
font-size: 0.85rem;
color: #64748b;
font-weight: 600;
margin-bottom: 0.4rem;
}
.dl-kpi-grid dd {
margin: 0;
color: #0f172a;
}
.dl-kpi-grid .number {
font-size: 2rem;
font-weight: 800;
color: #3b82f6;
line-height: 1.2;
}
.dl-kpi-grid .unit {
font-size: 0.85rem;
font-weight: 700;
color: #475569;
margin-left: 0.25rem;
}
18. 水平プロセス・コネクトフロー（横並び手順）
PCやタブレット表示で横一列に矢印でつながる、ステップ進行用の定義リストです。
<dl class="dl-process-flow">
<div class="step">
<dt>ヒアリング</dt>
<dd>現状の課題と目標を明確に定義します。</dd>
</div>
<div class="step">
<dt>プロトタイピング</dt>
<dd>素早くUIの設計と動作検証を行います。</dd>
</div>
<div class="step">
<dt>本開発・公開</dt>
<dd>本番環境へ安全にデプロイします。</dd>
</div>
</dl>.dl-process-flow {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.dl-process-flow .step {
position: relative;
flex: 1;
padding: 1.25rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
.dl-process-flow dt {
font-weight: 700;
color: #1e293b;
font-size: 1rem;
margin-bottom: 0.4rem;
}
.dl-process-flow dd {
margin: 0;
color: #64748b;
font-size: 0.9rem;
line-height: 1.6;
}
/* タブレット・PC以上で横並び */
@media (min-width: 768px) {
.dl-process-flow {
flex-direction: row;
align-items: stretch;
}
.dl-process-flow .step:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-50%) rotate(45deg);
width: 10px;
height: 10px;
border-top: 2.5px solid #94a3b8;
border-right: 2.5px solid #94a3b8;
z-index: 1;
}
}
19. プラス・トグル風カード（CSS十字アイコン付き）
左側に「＋（プラス）」アイコンをCSSのみで描画した、展開したアコーディオンのような見栄えのボックスリストです。
<dl class="dl-plus-card">
<div class="card">
<dt>レスポンシブWebデザインの標準化</dt>
<dd>モバイルファーストの設計思想に基づき、単一のコードベースで全画面サイズへ最適化を行います。</dd>
</div>
<div class="card">
<dt>パフォーマンスチューニングの徹底</dt>
<dd>画像のWebP変換や不要なCSS/JSの遅延読み込みにより、Core Web Vitalsのスコアを最大化します。</dd>
</div>
</dl>.dl-plus-card {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.dl-plus-card .card {
padding: 1.25rem 1.25rem 1.25rem 3rem;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
position: relative;
}
.dl-plus-card .card::before {
content: '';
position: absolute;
top: 1.45rem;
left: 1.25rem;
width: 14px;
height: 2px;
background: #3b82f6;
}
.dl-plus-card .card::after {
content: '';
position: absolute;
top: 1.45rem;
left: 1.25rem;
width: 14px;
height: 2px;
background: #3b82f6;
transform: rotate(90deg);
}
.dl-plus-card dt {
font-weight: 700;
font-size: 1.05rem;
color: #0f172a;
margin-bottom: 0.4rem;
}
.dl-plus-card dd {
margin: 0;
color: #475569;
line-height: 1.65;
}
20. ネオン・グラスモーフィズム（ダークモード対応）
ダーク系の背景に映える、シアンの光彩ボーダーとすりガラスの質感をまとった近未来スタイルです。
<dl class="dl-neon-glass">
<div class="item">
<dt>API Endpoint</dt>
<dd>https://api.example.com/v2/secure</dd>
</div>
<div class="item">
<dt>Authentication</dt>
<dd>Bearer Token (JWT with SHA-256)</dd>
</div>
</dl>.dl-neon-glass {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.dl-neon-glass .item {
padding: 1rem 1.25rem;
background: rgba(15, 23, 42, 0.85); /* ダーク背景 */
border: 1px solid rgba(56, 189, 248, 0.3); /* ネオン枠 */
border-radius: 10px;
box-shadow: 0 4px 20px -2px rgba(56, 189, 248, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.dl-neon-glass dt {
font-family: monospace;
font-size: 0.8rem;
font-weight: 700;
color: #38bdf8; /* ネオンシアン */
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
text-transform: uppercase;
}
.dl-neon-glass dd {
margin: 0;
color: #f1f5f9;
font-family: monospace;
font-size: 0.95rem;
}
novのワンポイントアドバイス
- <dl> 直下の <div> について
-
HTML5.2より <dl> の直下に <div> を置いて <dt> と <dd> をまとめることがW3C/WHATWGの正式な仕様として認められています。
- スマホ時の幅調整
-
横並びデザイン（No.01, 02, 03, 05, 10など）は、スマホでは自動的に縦並びに切り替わり、タブレット・PC（min-width: 640px）で横並びになるメディアクエリを完備しています。サイトのレイアウト幅に合わせて 140px などの幅指定を微調整してください。
- No.17とNo.18について
-
ユーザーの離脱を防ぎ、実績やサービスの強みを素早く理解させるコンバージョン率向上に非常に役立ちます！
