HTML/CSS2-3 HTMLの基本 リスト要素とテーブル要素

Posted on

HTMLの要素には他にもいくつかルールがあります。

引き続きルールを覚えていきましょう。

箇条書きリスト

要点を箇条書きで記述すれば、ユーザーは重要な点がすぐに頭に入ってきますし、検索エンジンも重要な点が理解しやすくなります。リスト要素は箇条書きを行う時に使うタグです。<ul>,<ol>と<li>でマークアップします。

まず、箇条書きにしたいテキストを<ul></ul>で囲みul要素にします。「ul」はUnordered　List（番号なしの箇条書き）の略です。

※<ol>要素はOrder List（番号ありの箇条書き）の略で、番号をつけたリストを作る際は<ol></ol>でマークアップします。

次に箇条書きしたいそれぞれの行を<li></li>で囲んでli要素にします。リスト要素は必ず<ul>と<li>要素がセットになっており、<ul>要素のみ、<li>要素のみでHTML上に記載されることはありません。

<!doctype html>
<html lang="ja">
　<head>
　<meta charset="utf-8">
<!-- エンコードの指定はutf-8 -->
　<title>Web Design Lesson</title>
　</head>
　<body>

　   <ul>
　    <li>TOP</li>
　    <li>自己紹介</li>
 　   <li>問い合わせ</li>
　   </ul>

　　　<ol>
       <li>Web関係</li>
       <li>DTP関係</li>
       <li>その他</li>
　　　</ol>

　　<h1>はじめまして！</h1>
    <p>はじめまして、〇〇と申します。HTMLを学習しはじめました。</p>
　</body>
</html>

番号なしの箇条書きと番号ありの箇条書きの違いを見てみましょう。以前作成したsample.htmlに上記の<ul>要素と<ol>要素をマークアップして、Webブラウザで確認してください。

sample3

ul要素にはリストマーク（・）がついています。ol要素には　番号が振られています。これはブラウザ上で、リスト要素を指定することでコンピューターが判断して自動で表示されるようになっています。

ul要素はナビゲーションなどによく使われます。今回はul要素を<nav>要素としましょう。ol要素はいったん削除してください。

<!doctype html>
<html lang="ja">
　<head>
　<meta charset="utf-8">
<!-- エンコードの指定はutf-8 -->
　<title>Web Design Lesson</title>
　</head>
　<body>
　　<nav>
　   <ul>
　    <li>TOP</li>
　    <li>自己紹介</li>
 　   <li>問い合わせ</li>
　   </ul>
　　</nav>


　　<h1>はじめまして！</h1>
    <p>はじめまして、〇〇と申します。HTMLを学習しはじめました。</p>
　</body>
</html>

ここまで書き込んだらいったんhtmlファイルを保存します。

テーブル要素

Webページに、Excelのような表が記載されていることがあります。この表は<table>要素でマークアップします。英語で表を「table」といいます。

余談ですが、HTMLは英語の表現を多く使う言語です。英語圏で発達したプログラム言語なので、日本語表記で表現する場合、若干の不具合が生じる場合があります。CSSで詳しくは理解できるようになりますが、文字のカウント方法などで違いが出ることがあります。英語圏には全角、半角という考えがありません。英語はすべて半角文字となります。htmlが半角での記載が必要なのもそういったことと関係あります。

<table>要素に話は戻りますが、<table>要素はリスト要素のように子タグが決められています。<tr>要素と<td>要素です。

<tr>要素は「table　row（表の行）」の略で、行を記載するためのタグになります。

<td>要素は「table　date（表のデータ）」の略で、列の区切りとして使われます。

sample

u9805u76eeu8a73u7d30
u4f4fu6240u3012u3007u3007u3007u25b3u25b3u25b3u25b3u3000u3000u6771u4eacu90fdu3007u3007u533a1-2-3
u96fbu8a71u756au53f703-u00d7u00d7u00d7u00d7u2010u25b3u25b3u25b3u25b3
テーブルサンプル

上記のような表を作成する場合、

<!doctype html>
<html lang="ja">
　<head>
　<meta charset="utf-8">
<!-- エンコードの指定はutf-8 -->
　<title>Web Design Lesson</title>
　</head>
　<body>
　　<nav>
　   <ul>
　    <li>TOP</li>
　    <li>自己紹介</li>
 　   <li>問い合わせ</li>
　   </ul>
　　</nav>


　　<h1>はじめまして！</h1>
    <p>はじめまして、〇〇と申します。HTMLを学習しはじめました。</p>

　　<table>
     <tr>
       <td>項目</td>
       <td>詳細</td>
     </tr>
     <tr>
       <td>住所</td>
       <td>〒〇〇〇△△△△　　東京都〇〇区1-2-3</td>
     </tr>
     <tr>
       <td>電話番号</td>
       <td>03-××××‐△△△△</td>
     </tr>
    </table>
　</body>
</html>

上記のようにマークアップします。いったん保存して、Webブラウザで確認してください。

 sample4

CSSでのコーディングはしていませんが、行と列の中に文字がきちんと収まっています。こういった見えづらい部分をのちほどきれいに装飾するので、今はこのままで大丈夫です。

また、テーブルの行や列を結合させることもできます。

 

Attention: The internal data of table “2” is corrupted!

ソースコードは下記の通りです。試しにsample.htmlに入れてブラウザで表示させてみてください。わかりやすいようにボーダーをつけています。

colspan（number　of　columns　spnned　by　cell　セルにぶら下がる列数）

rowspan（number　of　rows　spanned　by　cell　セル＝td、th　に横たわる行数）

<table border="1">
<tr>
　<td colspan="3">水平方向の結合</td>
</tr>
<tr>
　<td>データ1</td>
　<td>データ2</td>
　<td>データ3</td>
</tr>
</table>

sample5

上の行が一つのますになっているのが確認できたら、htmlからコードを削除しておいて保存してください。他にもいくつかテーブルレイアウトのサンプルコードを下記に記載しますので、コピー＆ペーストして保存し、Webブラウザで確認してみてください。

<table border="1">
<tr>
　<td rowspan="3">垂直方向の結合</td>
　<td>データ1</td>
</tr>
<tr>
　<td>データ2</td>
</tr>
<tr>
　<td>データ3</td>
</tr>
</table>

<table border="1">
<tr>
　<td colspan="3" rowspan="3">9つのセルを結合</td>
　<td>データ1-4</td>
</tr>
<tr>
　<td>データ2-4</td>
</tr>
<tr>
　<td>データ3-4</td>
</tr>
<tr>
　<td>データ4-1</td>
　<td>データ4-2</td>
　<td>データ4-3</td>
　<td>データ4-4</td>
</tr>
</table>

 

セルの結合を使うと表のレイアウトなどデザインの幅が広がります。
横方向の結合「colspan」は結合した数だけセルを減らすだけなので簡単ですが、
縦方向の結合「rowspan」は上下左右のセルの位置関係をしっかり把握しないといけません。
位置関係を間違えやすいので注意してください。

また、<table>要素の子要素として<table>の見出しという意味で<th>タグが使われることもあります。

<table border="1">
<tr>
　<th>左側見出</th>
　<th rowspan="2">右側見出</th>
</tr>
<tr>
　<td>データ</td>
</tr>
</table>

表をたくさん使われているサイトなどで、いくつか結合テーブルのソースを見て覚えるようにしてください。

Scroll Up