minablog

hugo/github/wordpress/プログラミング言語/美容/ビジネス/マーケティングなど、ミレニアム世代やZ世代に有益な情報を共有するブログ。

小学生でもわかるHTML/CSSタグ講座 表・リストタグ

皆さんこんにちは!

minablog管理人のみなです。

今回は表とリストを作るタグをご紹介します。

難しいことは全くなく、正しいタグで囲めば見た目が綺麗なサイトを作ることができます。

それでは、小学生でもわかるHTML/CSS講座 表・リストタグをご紹介します!

 

f:id:mkmkblog:20191116231152j:plain

ちなみに、以前のHTML/CSS講座はこちらです。

www.mkmkblog.site

 

 

tableタグとは?

tableタグとは<body>内に記述するタグです。

見た目を綺麗に整えるタグですが、CSSではなくHTMLに記述します。

 

用語説明

table =表を作る宣言となるタグ

tr       =table row

thead=table head

tbody=table body

th      =table header cell

td      =table date cell

※見出し行がないときはtheadを省くことができる

 

記述方法

<table>

  <thead>  -見出し行開始

    <tr>

     <th>みかん</th>  -見出し①

  <th>りんご</th>   -見出し②

 </tr>

  </thead>  -見出し行終了

  <tbody>  -説明行開始

    <tr>

      <td>黄色</td>    -説明①-1

      <td>赤色</td>    -説明①-2

    </tr>

    <tr>

      <td>すっぱい</td>    -説明②-1

      <td>あまい</td>     -説明②-2

    </tr>

  </tbody>  -説明行終了

</table>

 

見え方はこちら

f:id:mkmkblog:20191224111346p:plain

※表をつなげるときにはつなげたい"td"もしくは"th"をrowspan="つなげたいセルの数"とします。

例)

    <tr>

      <td>黄色</td>    -説明①-1

      <td rowspan="2">赤色</td>    -説明①-2

    </tr>

    <tr>

      <td>すっぱい</td>    -説明②-1

      <!--ここにはなにも記述しない-->     -説明②-2

    </tr>

 

《見え方》

f:id:mkmkblog:20191224111531p:plain

 ”りんご”の”赤色”のセルが統合されていることがわかります。

 

上記のHTMLで作った表を見てもわかるとおり、CSSの装飾がないと見づらくそっけない印象となってしまいます。

CSSの付け方はこちらのブログで詳しく書かれています。

saruwakakun.com

f:id:mkmkblog:20191115230418j:plain

リストタグとは?

リストタグは項目をリスト分けするときに記述します。

箇条書き・順序あり・項目+説明によって記述方法が変わりますのでご注意ください。

 

用語説明

ul  =undered list

li   =list item

ol  =ordered list

dl  =description list

dt  =description term

dd =description detail

 

記述方法/見え方

①箇条書きリストを作る場合

<ul>

  <li>さんすう</li>

  <li>こくご</li>

  <li>えいご</li>

</ul>

 

《見え方》

 

f:id:mkmkblog:20191224111905p:plain

 

②順序ありリストを作る場合

<ol>

  <li>デスクトップ</li>

  <li>タブレット</li>

  <li>モバイル</li>

</ol>

 

《見え方》

 

f:id:mkmkblog:20191224111941p:plain

 

③項目+説明リストを作る場合

<dl>

  <dt>アナリティクス</dt>

    <dd>ウェブサイトの改善やオーディエンスリストのカスタマイズなどを行う</dd>

  <dt>アドセンス</dt>

    <dd>オンラインコンテンツから収益を得ることができる</dd>

</dl>

 

《見え方》

f:id:mkmkblog:20191224112031p:plain

f:id:mkmkblog:20191217165850j:plain

まとめ

今回は小学生でもわかるHTML/CSS講座として表・リストの作り方をご紹介しました。

用語の意味さえ分かってしまえば簡単に作ることができますし、見た目も整ってキレイになります。

表やリストで表示した方がいい場合は積極的に使うようにしましょう。

 

 

それでは、次回もぜひご覧ください。