ホームページ制作MATSUTE BLOG

この記事は「2020年12月26日」に書かれた記事です

1. 「dt」を「dd」で説明する「記述リスト」<dl>タグ
2. 表組・枠組みの「table」タグ
3. 枠組みならば「flexbox」
4. floatは枠組みではなく、周り込みで使用

1．「dt」を「dd」で説明する「記述リスト」

どういうこと？

ざっくり解釈すると「dt」は見出し的な文言。たとえば「ホームページ制作」という項目を入力したとします。その場合「dd」には「ホームページ制作」を説明するする文章、たとえば、「ホームページを制作したり、ホームページのリニューアルやコンテンツの改修・修正を行う業務」が入ります。「dl」は「dt」「dd」がひと固まりというまとまりを示しています。

<dl>
<dt>ホームページ制作</dt>
<dd>ホームページを制作したり、ホームページのリニューアルやコンテンツの改修・修正を行う業務</dd>
</dl>

• <dt>の説明する言葉（見出し的な文言）に対して、<dd>が1つである必要はない
• 説明する言葉<dd>に対して、（見出し的な文言）<dt>が複数あっても問題ない

説明文が複数ある場合

<dl>
<dt>ホームページ制作</dt>
<dd>ホームページを制作業務</dd>
<dd>ホームページのリニューアル業務</dd>
<dd>コンテンツの改修・修正を行う業務</dd>
</dl>

見出しが複数ある場合

<dl>
<dt>パソコン</dt>
<dt>スマートフォン</dt>
<dd>タブレット以外の端末です</dd>
</dl>

※あまりいい例ではないです。すみません。項目が多いケースを思いつきませんでした。

<dl＞の中に複数の<dt><dd>セットを複数設置することもできます。

<dl>
<dt>説明する言葉　A</dt>
<dd>A　の説明</dd>
<dt>説明する言葉　B</dt>
<dd>B　の説明</dd>
</dl>

例）ホームページ業務の役割リストを<dl>タグで作る

<dl>
<dt>WEBデザイナー</dt>
<dd>ウェブデザイン（ホームページ）のデザインに関する部分を担当</dd>
<dt>コーダー</dt>
<dd>WEBデザイナーがデザインしたものを、形にする</dd>
<dt>システムエンジニア</dt>
<dd>プログラムを担当</dd>
</dl>

2．表組・枠組みの「table」タグ

「2-39　ちょっと昔の話。テーブルコーディングって、何？」で書いたようにその昔は、テーブルコーディングなるものが存在しましたが、現在では表組として使用することがほとんどです。詳しい使い方については「4-8 レスポンシブでの表組（table）表示どうしてる？（近日公開予定）」をご覧ください。

基本は下記の形です。

<table>
<tr>
<th>見出し（項目名）</th>
<td>テキストなどの文章</td>
</tr>
</table>

<tr>～</tr>までが1セットです。<th>は使用しなくても問題ありません。

<table>
<tr>
<td>テキストなどの文章/th>
<td>テキストなどの文章</td>
</tr>
</table>

現在は枠組みとして使用することほぼなく、表組としての利用が主な使い方かと思います。

3．枠組みならば「flexbox」

現在、コンテンツの枠組みを設定する場合、「flexbox」が多いのではないかと思います。
flexboxについては、この記事で説明すると長いページになってしまうため別の機会に説明したいと思います。

4．floatは枠組みではなく、周り込みで使用

少し？前までは、コンテンツの枠組みを作る際、floatを利用していました。

html

<div class="contents">
<div class="main">メインコンテンツ</div>
<div class="side">サイドメニュー</div>
</div>

CSS

.comtents {
width: 100%;
overflow-hidden;
}

.main {
float:right:
width: 80%;
}

.side {
float:left;
width: 20%;
}

※数値は仮です

新しく制作する場合に使用することはないかもしれませんが、すこし前のホームページを改修する場合など目にする機会もあるかと思うので、覚えておくと役立ちます。ちなみに、このサイトはかなり前に作ったままなので、floatでホームページの枠組みを作っています。

floatの役どころ

画像を回り込ませる場合に使用

こんな感じで、文章の右横や左横に画像を回り込ませる際に利用することは多いかと思います。

.imgright {
float:right;
margin: 0 0 1em 1em;
}

文章の方が短い場合は下に来る要素が回り込んでしまうため、回り込みを解除したいタグ または、疑似要素でclear:bothを設定し回り込みを解除しておきましょう。

たとえば

HTML

<p class="imgbox"><img class="imgright" src="images.png" alt="" width="150" height="150" />テキストの右に画像を回り込ませる場合に使用。</p>

CSS

.imgbox::after {
content="";
clear:both;
}

.imgright {
float:right;
margin: 0 0 1em 1em;
}

※margin や　padding は調整してください。

dl のリストタグを横並びにする場合

float を使って横並びにすることもできます。

HTML

<dl>
<dt>項目を左に</dt>
<dd>背名を右に</dd>
</div>

css

dl {
width: 100%;
overflow:hidden;
}

dt {
width:30%;
float:left;
}

dd {
width:70%;
float:right;
}

書いては見たもののやはりこの場合も、今はflexboxを使ってますね。
最初の説明で見た通り。

1. 「dt」を「dd」で説明する「記述リスト」<dl>タグ
2. 表組・枠組みの「table」タグ
3. 枠組みならば「flexbox」
4. floatは枠組みではなく、周り込みで使用

というように使い分けるのが良いのではないでしょうか。