HTMLでdlタグでnewsページを作る方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLでdlタグでnewsページを作る方法について解説しています。newsページを作成する場合の基本の構成や記述形式、dl・dt・ddタグを使った定義・説明リストの書き方を説明します。ぜひ参考にしてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでdlタグでnewsページを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
dlタグでnewsページを作る方法について詳しく説明していくね！
お願いします！
HTMLでdlタグでnewsページを作る方法
コーポレートサイトやサービスのサイトのトップページでよく見かけるNEWSのコーディングでよく使われる作成方法を紹介します。
まずは、NEWSがどんな情報が必要なのか？を理解しておくことから
少し企画・ディレクションの内容になりますが、まずはどんな情報が必要なのかを事前に知っておくと良いでしょう。
- いつ
- どこで
- だれが
- どうした
- どんなこと（どんなジャンルであるか？）
…これらをすべてトップページで表示する必要はありません。必要に応じて、下層ページやPDFリンクを張り、そこで紹介をすれば良いのです。イメージとしてや、ポータルサイトのニュースタイトルのようなものですね。ミニマルに情報を伝える場合、以下になります。
- いつ
- どうした・どうであるか
長々と文章を書かないで良いので、デザインや実装の時点では字数制限を考慮しておくと良いでしょう。表示エリアの面積によりますが、トップページにNEWSを挟み込む場合は、20〜30文字程度であると簡潔でおすすめです。
定義・説明リストタグってどんなもの？
どんなタグを使うとよいでしょうか？表示が同じであれば、どんなタグを使ってもいいじゃない…ではありますが、定義リストまたは説明リストと呼ばれる、dl・dt・ddタグがおすすめです。
定義・説明リスト！って一見難しそうなタグではありますが、意味が分かれば使い所たくさんの便利なタグです。こんなタグです。例文を入れてみました。
<dl> <dt>ドラえもん</dt> <dd>未来から来た猫型ロボット</dd> </dl>
- dl => 英語／description list 訳／説明リスト（箇条書きであるulと同じような役割）
- dt => 英語／description term 訳／説明したい単語
- dd => 英語／description list 訳／説明文
dtで説明したい単語（ドラえもん）を入れ、ddでは、説明したい単語についての解説文（未来から来た猫型ロボット）を入れている。それらをdl（説明リストなんだよ〜というくくり）で囲む。それだけです(*^^*)
ul・liの箇条書きではダメなの？
情報の優先順位が並列のliタグとすると、関係性がおかしなものになるので、定義リストを使います。箇条書きのliタグは関係性は等しいもの。であるので、日付と内容という関係のNEWSには適しません。
<ul> <li>ドラえもん</li> <li>未来から来た猫型ロボット</li> </ul>
…なんだかおかしいですよね。以下のように情報が対等である場合は、liタグが適切でしょう。
<ul> <li>ドラえもん</li> <li>のび太</li> <li>しずかちゃん</li> <li>スネ夫</li> <li>ジャイアン</li> </ul>
実際に書いてみよう
<dl> <dt>日付</dt> <dd>ニュースタイトル</dd> </dl>
dl・dt・ddの良いところ
そもそもタグとして分かれているから、classを各タグに入れたりしなくても、cssでの着色や配置がとっても簡潔です。また、2行に渡る場合は折り返ししてくれるので読みやすいものになります。
See the Pen
MWYObqo by Yuka Sato (@yuka-sato)
on CodePen.
横並びで実装する場合は、日付の幅を揃えておく（これは、floatか、日付となる値をすべて同じ文字数（1桁の場合は01と表記する）とすると良いでしょう！
dl・dt・ddの定義・説明リストタグの意味を理解し、いい感じのNEWSページを作ってみてくださいね！
監修してくれたメンター
| ゆかちん先生
フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
