WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <del>「取り消し線」

<dl> 「記述・説明リストの範囲」[読み方:ディーエル]

<dl>タグは、説明文リストの範囲(領域)を指定します。<dl>内の<dt><dd>で説明文を構成します。
説明文の説明部分に該当し、一般的なブラウザではインデントされて表示されます。

HTML規格HTML4.01HTML5
使用可否
広告

<dl> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツフローコンテンツを子要素にもてる場所<dt><dd>
スクリプトサポート要素
不可

<dl> の属性

【構文】
<dl>
<dt>~見出し部~</dt>
<dd>~説明部~</dd>
<dt>~見出し部~</dt>
<dd>~説明部~</dd>
・・・
</dl>
属性意味値のサンプルなど
---
廃止された属性
  • compact
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<dt>タグのサンプル

見出しを装飾する場合
<head>
<style type="text/css">
<!--
#css-s1 dt {
paddin-left: 18px;
font-weight: bold;
color: #4A78BF;
background-image : url(mark.png);
background-position: center left;
background-repeat: no-repeat;
}
-->
</style>
</head>

<div id="css-s1">
<dl>
<dt>HTMLタグ</dt>
<dd>ホームページを記述するための言語です。</dd>
<dt>JavaScript</dt>
<dd>ホームページの動作を記述するためのスクリプト言語です。</dd>
<dt>StyleSheet(CSS)</dt>
<dd>ホームページの見た目(色や線、配置など)を記述するための言語です。</dd>
</dl>
</div>
HTMLタグ
ホームページを記述するための言語です。
JavaScript
ホームページの動作を記述するためのスクリプト言語です。
StyleSheet(CSS)
ホームページの見た目(色や線、配置など)を記述するための言語です。

見出しと内容を横に並べる場合
<head>
<style type="text/css">
<!--
#css-s2 dl {
margin: 0;padding: 0;zoom: 100%;
}
#css-s2 dt {
float: left;margin: 0;font-weight: bold;
width: 170px;padding: 10px 0 10px 0;color: #4A78BF;
}
#css-s2 dd {
margin: 0;padding: 10px 15px 10px 120px;
border-bottom: 1px dotted #DDDDDD;
}
-->
</style>
</head>

<div id="css-s2">
<dl>
<dt>HTMLタグ</dt>
<dd>ホームページを記述するための言語です。</dd>
<dt>JavaScript</dt>
<dd>ホームページの動作を記述するためのスクリプト言語です。</dd>
<dt>StyleSheet(CSS)</dt>
<dd>ホームページの見た目(色や線、配置など)を記述するための言語です。</dd>
</dl>
</div>
HTMLタグ
ホームページを記述するための言語です。
JavaScript
ホームページの動作を記述するためのスクリプト言語です。
StyleSheet(CSS)
ホームページの見た目(色や線、配置など)を記述するための言語です。
ページTOP

留意事項

  • <dl>タグ内には<dt>および<dd>を含む必要があります。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン