cman.jpWEBページ作成
広告
<dt> 「記述・説明リストの見出し」[読み方：ディーティー]
広告
<dt> の仕様
<dt> の属性
【構文】
<dl>
<dt>～見出し部～</dt>
<dd>～説明部～</dd>
<dt>～見出し部～</dt>
<dd>～説明部～</dd>
・・・
</dl>
<dt>～見出し部～</dt>
<dd>～説明部～</dd>
<dt>～見出し部～</dt>
<dd>～説明部～</dd>
・・・
</dl>
<dt>タグのサンプル
<dl>
<dt>HTMLタグ</dt>
<dd>ホームページを記述するための言語です。</dd>
<dt>JavaScript</dt>
<dd>ホームページの動作を記述するためのスクリプト言語です。</dd>
<dt>StyleSheet(CSS)</dt>
<dd>ホームページの見た目（色や線、配置など）を記述するための言語です。</dd>
</dl>
<dt>HTMLタグ</dt>
<dd>ホームページを記述するための言語です。</dd>
<dt>JavaScript</dt>
<dd>ホームページの動作を記述するためのスクリプト言語です。</dd>
<dt>StyleSheet(CSS)</dt>
<dd>ホームページの見た目（色や線、配置など）を記述するための言語です。</dd>
</dl>
- HTMLタグ
- ホームページを記述するための言語です。
- JavaScript
- ホームページの動作を記述するためのスクリプト言語です。
- StyleSheet(CSS)
- ホームページの見た目（色や線、配置など）を記述するための言語です。
<dt>タグのスタイルシートサンプル
見出しを装飾する場合
<head>
～
<div id="css-s1">
<dl>
<dt>HTMLタグ</dt>
<dd>ホームページを記述するための言語です。</dd>
<dt>JavaScript</dt>
<dd>ホームページの動作を記述するためのスクリプト言語です。</dd>
<dt>StyleSheet(CSS)</dt>
<dd>ホームページの見た目（色や線、配置など）を記述するための言語です。</dd>
</dl>
</div>
<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><!--
#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>
～
<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>
～
<div id="css-s2">
<dl>
<dt>HTMLタグ</dt>
<dd>ホームページを記述するための言語です。</dd>
<dt>JavaScript</dt>
<dd>ホームページの動作を記述するためのスクリプト言語です。</dd>
<dt>StyleSheet(CSS)</dt>
<dd>ホームページの見た目（色や線、配置など）を記述するための言語です。</dd>
</dl>
</div>
<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><!--
#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>
～
<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広告