html,css

【html】リスト・テーブル・フォームの作成

更新日:

リストの作成

htmlでリストを作成したい際は、
1.リスト全体を<ul>で括る
2.各項目を<li>で括る

    <h1>サンプル</h1>
    <ul>
        <li>サンプル1</li>
        <li>サンプル2</li>
        <li>サンプル3</li>
    </ul>

出力例:

また、先頭の中黒の有無などのデザインを変更したい場合、<ul>にlist-style-typeを指定する。
中黒を消したい場合はlist-style-type:noneだが、他にもdisc、circle、squareなど様々なスタイルが存在する。

    <h1>サンプル</h1>
    <ul style="list-style-type:none">
        <li>サンプル1</li>
        <li>サンプル2</li>
        <li>サンプル3</li>
    </ul>

出力例:

テーブルの作成

テーブルを作成したい場合は、
1.全体を<table>で括る
2.見出し行を<thead>で括る
3.各見出しを<th>で括る
4.見出しより下の、テーブルデータ部分全体を<tbody>で括る
5.各行を<tr>で括る
6.各項目を<td>で括る
という形で作成する。
(thはtable-head、trはtable-row、tdはtable-dataの略だと思われる。そう覚えると覚えやすい)

  <h1>動物</h1>
    <table>
        <thead>
            <tr>
                <th>種族名</th>
                <th>分類</th>
                <th>食性</th>
                <th>生息域</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>蛙</td>
                <td>両生類</td>
                <td>肉食</td>
                <td>沼沢地など</td>
            </tr>
            <tr>
                <td>鹿</td>
                <td>哺乳類</td>
                <td>草食</td>
                <td>山岳地など</td>
            </tr>
       <tr>
                <td>烏</td>
                <td>鳥類</td>
                <td>雑食</td>
                <td>都市部など</td>
            </tr>
        </tbody>
    </table>

出力例

フォームの作成

フォームは下記の要領で作成する。
1.全体を<form>で括る
2.各フォームパーツに対し、<label>を設定する
3.必要に応じ<input><select><button>などを配置する
4.配置したフォームにname、idを設定する(入力データの識別に使用する)

    <h1>入力フォーム例</h1>
    <form action="#">
        <label for="form1">入力フォーム</label>
        <input tyle="text" name="form1" id="form1">
        <label for="form2">ラジオボタン</label>
        <input tyle="radio" name="form2" id="form2">
        <label for="form3">プルダウン</label>
        <select name="form3" id="form3">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
        <button type="submit">送信する</button>
    </form>

出力例:

-html,css

Copyright© Code Custom , 2022 All Rights Reserved.