HTML/css リスト定義でdt,ddタグを横並びにする方法

Linux

リスト定義は本来辞書なども語句を説明するためにHTML5では提供されております。

[amazonjs asin=”4797388544″ locale=”JP” title=”いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)”]

しかし最近ではスマホ対応のためか
表形式で使用するケースが多々見受けられます。
なぜリスト定義を知らない方からはなぜdtでマージンを設定するのですか
という質問を受けたのでこの資料で説明いたしました。

折角なのでブログへアップいたしました。
ご活用してください。

cssなしの場合はこのようになります。

本来はこのような使い方が正論です。

アイキャッチ画像は応用だと僕は思ってるのですが

使いやすいのですかね。

ぼくはあまり好んで使ったりしませんがね。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dl dt ddタグ説明</title>
</head>
<style>
dl dt {
    float: left;
    clear: left;
	width:100px;*/
}
dl dt {
	background-color: chartreuse;	
}
dl dd {
	border-left:5px solid red;
    margin-left: 100px; 
}
</style>
<body>
<dl>
<dt>HTML</dt>
<dd>Webブラウザに文字を表示させるための言語</dd>
<dt>CSS</dt>
<dd>文書の見た目を決めるために書かれるもの</dd>
</dl>
</body>
</html>

Linux
スポンサーリンク
sutaruhinをフォローする
システム・スタルヒン合同会社
タイトルとURLをコピーしました