• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / プログラミング入門 / 説明リストとは?HTMLで用語説明ページを作るのに最適!使い方を確認しよう

説明リストとは?HTMLで用語説明ページを作るのに最適!使い方を確認しよう

2020-09-26 By takayama

Tweet
このエントリーをはてなブックマークに追加
Pocket

目次

  • 1 はじめに
    • 1.1 動画解説
  • 2 説明リストとは
    • 2.1 dl要素
    • 2.2 dt要素
    • 2.3 dd要素
  • 3 使用例で確認しよう
    • 3.1 用語と同じ行に説明を書くことはできる?
    • 3.2 箇条書きを使って書いてはいけないの?
  • 4 まとめ
  • 5 今すぐメルマガ登録!
  • 6 動画で学ぶプログラミング入門

はじめに

用語説明の写真

HTMLの「説明リスト」をご存知ですか?

<ul>タグと<li>を使う箇条書き(順序なしリスト)や、<ol>と<li>を使う順序付きリストは知っていても、説明リストを使ったことがまだない方もいらっしゃるかもしれません。

この記事では説明リストとはどんなものか?を説明し、使い方についても解説します。

動画解説

本動画の内容を動画でも解説しています。

説明リストとは

まず、説明リストがどんなものなのかを見ていきましょう。

先にイメージがあるとわかりやすいですね。下記のようなものを説明リストと呼びます。

説明リスト例

用語があってその下にその用語の説明がつく、このセットが3つ並んでいますね。

このように、ある用語の説明に特化したリストを説明リストと呼びます。

この説明リストを記述したHTMLは下記の通りです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>説明リストの練習</title>
  </head>
  <body>
    <dl>
      <dt>用語1</dt>
      <dd>説明1</dd>
      
      <dt>用語2</dt>
      <dd>説明2</dd>
      
      <dt>用語3</dt>
      <dd>説明3</dd>
    </dl>
  </body>
</html>

コードの内容を紐解いていきましょう。

dl要素

dl要素は「Description List」の略で、説明リストであることを表します。

<dl>〜</dl>の中に後述の<dt>タグと<dd>タグを記述して説明リストを構成する訳です。

dt要素

dt要素は「Description Term」の略で、<dt>〜</dt>の中に説明対象となる用語や文章を記載します。

dd要素

dd要素は「Description Definition」の略で、dt要素が指す単語や用語の意味や説明を記載します。

<dd>〜</dd>の中に内容を書いてください。

使用例で確認しよう

理解を深めるために順を追って使用例を確認しましょう。

まず、完成イメージは下記の通りです。

このサイトでもよく取り上げているWebプログラミング言語の説明リストですね。

プログラミング言語の説明リスト

まずはエディタで新規ファイル「description-list.html」を作成してください。

下記の通りコードを記述しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>説明リストの練習</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>文章構造を定義するマークアップ言語です</dd>

      <dt>CSS</dt>
      <dd>ウェブページのスタイルを指定するための言語です</dd>

      <dt>JavaScript</dt>
      <dd>動的なウェブページを作成する事のできるプログラミング言語です</dd>
    </dl>
  </body>
</html>

ファイルを保存し、完成イメージと同じようにできていればOKです。

ここで、説明リストについてよくある質問とその答えを確認しましょう。

用語と同じ行に説明を書くことはできる?

スタイル(CSS)を適用すればそのように表示することが可能です。別の記事で取り上げます。

ただし、HTMLはあくまで文書の構造を定義するために使用すべきなので、HTMLでは実施しません。

必ず用語はdt要素、説明はdd要素で書くようにしてください。

箇条書きを使って書いてはいけないの?

<ul>と<li>を使って箇条書きにしても同じような表示はできるので、間違いではありません。

しかしながら、似たような表示であっても箇条書きと説明リストでは書く側が文書に持たせたい意味合いが異なります。

例えば下記のような文書を比べてみましょう。

文書1:お買い物リスト

  • りんご
  • ぶどう
  • みかん

文書2:果物の説明

りんご

バラ科リンゴ属の植物。7500以上の品種が栽培されている。

ぶどう

ブドウ科の植物。果実はワインの原料ともなる。

みかん

ミカン科の植物。正式名称はウンシュウミカン。

文書1は単なる列挙、文書2では用語とそれに対する説明となっていますね。

その文書に何が書かれているのかをマークアップするのがHTMLの役割であり、ブラウザや検索エンジンはそれを頼りに機能します。

ブラウザでその文書に合った表示をさせたり、検索エンジンに正しく文書の内容を解析してもらうためにも意味合いに合ったタグを選んで記述するよう心がけましょう。

まとめ

オフィスにいる女性

説明リストの紹介と、HTMLでの記述方法解説を行いました。

用語の説明にぜひ活用してみてください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門(Proglus)

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Tweet
このエントリーをはてなブックマークに追加
Pocket

Filed Under: プログラミング入門 Tagged With: dd, dl, dt, HTML, 説明リスト

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQL WorkbenchをMacにインストールする方法
  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • VSCodeで画像が表示されない場合の対処法
  • MySQL 5.7 for Windowsのアンインストール方法
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介

最近の投稿

  • 【04/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • Cloud9が容量不足? EBSボリュームを拡張する方法を解説します!
  • Linuxの標準エディタvi(vim)の超基本的な使い方!動画で初心者にもわかりやすく解説!
  • swpファイルが作成されてvimでファイルが編集できない時の対処法とは?
  • 【無料モニター(2期生)募集!】「就職活動用のポートフォリオ制作講座」

カテゴリー

  • AWS
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー