プログラミング

プログラミング学習⑥【HTML 表現できるリスト3種類について学ぶ】

こんばんは、本日はドットインストールでHTMLで表現できるリスト3種類について学んでいきたいと思います。

HTMLでは箇条書きリスト、順序付きリスト、説明リストとがありますので、どのようにマークアップしていくか書いていきたいと思います。

 

箇条書きリスト

箇条書きリストは次のように項目を並べたものになります。

箇条書きリストは、順番を入れ替えても意味が変わらないようなリストに使っていきます。

箇条書きリストの場合は全体をulタグで囲ってあげます。

ulタグはunordered listの略で、順序がついていないリストという意味です。

ulタグはlist itemの略です。

使用例

◎HTMLソース

<ul>

<li>すごい</li>

<li>やばい</li>

<li>つよい</li>

</ul>

◎ブラウザ上の表示

・すごい

・やばい

・つよい

 

 

順序付きリスト

順序付きリストは項目を並べる順序が大事になるリストです。

順序付きリストの場合は全体をolタグで囲ってあげます。

olタグはordered listの略で、順序付きリストという意味です。

使用例

◎HTMLソース

<ol>

<li>動画を見る</li>

<li>コードを書く</li>

<li>コードを改造する</li>

</ol>

◎ブラウザ上の表示

1.動画を見る

2.コードを書く

3.コードを改造する

 

 

説明リスト

説明リストは項目に加えて、その説明も含めたい場合に使うリストです。

説明リストの場合は全体をdlタグで囲ってあげます。

dlタグはdescription listの略で、説明付きリストという意味です。

次に項目の方はdt、説明の方はddタグを使います。

deはdtdesvription termの略

ddはdescription detailの略

になります

使用例

◎HTMLソース

<dl>

<dt>質問A</dt>

<dd>回答A</dd>

<dt>質問B</dt>

<dd>回答B</dd>

</dl>

◎ブラウザ上の表示

質問A

回答A

質問B

回答B

 

%d人のブロガーが「いいね」をつけました。