HTML&CSS入門「いろんなタグを使ってみよう」

スポンサーリンク
Pocket
LINEで送る

いろんなhtmlタグを使ってみよう

htmlタグはたくさん種類があります。

今回はその一部のタグを使っていきたいと思います。

リスト系タグ

サイドバーのメニューや文章の箇条書きなどリスト形式で表現したい時がありますね。

リスト系のタグにはol,ul,li,dl,dt,ddがあります。

この2文字タグは単語の略で

<ol> = orderedlist

<ul> = unorderdlist

<li> = list item

<dl> = definition list

<dt> = definition term

<dd> = definition description

となっています。

 

olは順番のあるリスト(例:料理の手順)で使い、ulは順番のないリスト(例:料理の材料)で使います。

dlは定義の説明(例:各調味料の説明)で使います。

 

ol,ulはliとセットで使い、dlはdt,ddとセットで使います。

りんごを食べる手順

<ol>
  <li>りんごを半分に切ります</li>
  <li>りんごの皮を向きます</li>
  <li>食べます</li>
</ol>

 

りんごを食べる為に必要なもの

<ul>
  <li>包丁</li>
  <li>まな板</li>
  <li>りんご</li>
</ul>

スポンサーリンク

 

定義の説明

<dl>
  <dt>包丁</dt>
  <dd>食物の調理に使う薄くて平たい刃物。</dd>
</ul>

 

汎用タグdiv,span

divやspanは囲ったものをひとまとまりのグループとして扱うことができる汎用タグでdivはレイアウトによく使われます。spanは文章中の文字の色を変えたりするときに使ったりもします。

 

文字に意味を付与するタグ

文字に意味を持たせるタグはいくつかあります。

<strong> = 強調させる

文章中に何か強調したい言葉などがあったらstrongタグで囲みましょう

例:Webサービスを作るには<strong>プログラミング言語の習得が必須</strong>です。

 

<br> = 改行

brタグを使うと改行されます。これは改行を意味するのでレイアウトを整えるのに使ってはいけません。

 

<b> = 区別させるキーワード

お店の名前やゲームのアイテム名など区別させたいキーワードに使います。bタグには強調させる意味はありません。

例:体力を回復するには<b>ポーション</b>が必要です。