CSSfacebookTweethatenaline2019.06.10レシピマークアップ定義リストを使って、キーワードと説明をマークアップする定義リストであるdl要素、dt要素、dd要素のマークアップ例をご紹介します。定義リストとはマークアップ例キーワードと説明文が横並びになるようにレイアウトする定義リストとは定義リストとは、キーワードと説明文がセットになったリストです。定義リストの例この場合、「HTML」や「CSS」がキーワードとなり、「Webサイトを構成する〜」と続くテキストが説明文です。定義リストは親となるdl要素と、キーワードをマークアップするdt要素、説明文をマークアップするdd要素の3点セットが基本的な形です。定義リストの具体的なマークアップ例を解説します。定義リストのマークアップ例<section><dl><dt>HTML</dt><dd>Webサイトを構成するマークアップ言語。</dd><dt>CSS</dt><dd>HTMLを装飾するためのテキストファイル。</dd><dt>JavaScript</dt><dd>HTMLを動的に表現するために使うプログラミング言語。</dd></dl></section>キーワードとなる「HTML」や「CSS」をdt要素、キーワードに対する説明文をdd要素に記述します。キーワードと説明文が横並びになるようにレイアウトする定義リストの表示を、CSSを使って調整します。78%;}</style><section><dl><dt>HTML</dt><dd>Webサイトを構成するマークアップ言語。</dd><dt>CSS</dt><dd>HTMLを装飾するためのテキストファイル。</dd><dt>JavaScript</dt><dd>HTMLを動的に表現するために使うプログラミング言語。left;」をかけて横並びにしています。both;」を指定して、dd要素に続くdt要素の回り込みを解除しているところがポイントです。clearプロパティを指定しなかった場合は、次のような崩れたレイアウト表示になってしまいます。dt要素にclearプロパティを指定しなかったときの表示例こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。