HTMLテーブルとフォーム要素、CSSセレクタの基本

HTMLテーブル構造

テーブルは

タグで定義され、行は、セルは
で構成されます。ヘッダーセルにはを使用します。

<table border="1" cellspacing="10" cellpadding="5">
    <thead>
        <tr><th>見出し</th></tr>
    </thead>
    <tbody>
        <tr><td>データ</td></tr>
    </tbody>
    <tfoot>
        <tr><td>フッター</td></tr>
    </tfoot>
</table>

セル結合機能

colspan属性で列を結合、rowspan属性で行を結合できます。

<table border="1" width="300">
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr>
        <td>1</td>
        <td colspan="2">2と3を結合</td>
    </tr>
    <tr>
        <td rowspan="2">4と7を結合</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
    </tr>
</table>

HTMLフォーム要素

フォームはユーザー入力を収集するために使用され、

タグで囲みます。

<form action="/process" method="post">
    <label>ユーザー名:</label>
    <input type="text" name="user_name" placeholder="ユーザー名を入力" /><br>
    
    <label>パスワード:</label>
    <input type="password" name="password" /><br>
    
    <label>性別:</label>
    <input type="radio" name="gender" value="male" />男性
    <input type="radio" name="gender" value="female" />女性<br>
    
    <label>趣味:</label>
    <input type="checkbox" name="hobby" value="reading" />読書
    <input type="checkbox" name="hobby" value="sports" />スポーツ<br>
    
    <select name="country">
        <option value="japan">日本</option>
        <option value="us">アメリカ</option>
    </select><br>
    
    <textarea name="comment" rows="4" cols="30">コメント</textarea><br>
    
    <input type="submit" value="送信" />
    <input type="reset" value="リセット" />
</form>

CSSセレクタ体系

CSSはスタイルを定義し、HTMLの構造と表現を分離するための技術です。

ユニバーサルセレクタ

すべての要素にスタイルを適用します。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

基本セレクタ

  • 要素セレクタ: p, div, h1 など
  • クラスセレクタ: .class-name
  • IDセレクタ: #element-id
/* 要素セレクタ */
p {
    font-size: 16px;
    line-height: 1.5;
}

/* クラスセレクタ */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

/* IDセレクタ */
#main-header {
    color: navy;
    text-align: center;
}

グループセレクタ

複数のセレクタに同じスタイルを適用します。

h1, h2, h3 {
    color: #333;
    font-family: Arial, sans-serif;
}

コンテキストセレクタ

  • 後孫セレクタ: div p
  • 子セレクタ: div > p
  • 隣接兄弟セレクタ: h1 + p
/* 後孫セレクタ */
.container span {
    color: blue;
}

/* 子セレクタ */
.nav > li {
    display: inline-block;
}

/* 隣接兄弟セレクタ */
h2 + p {
    margin-top: 0;
}

属性セレクタ

特定の属性を持つ要素を選択します。

/* placeholder属性を持つinput */
input[placeholder] {
    border: 1px solid #ccc;
}

/* type属性がtextのinput */
input[type="text"] {
    background-color: #f9f9f9;
}

/* 複数属性の組み合わせ */
input[name="email"][required] {
    border-color: red;
}

疑似クラス

要素の特定状態にスタイルを適用します。

a:link {
    color: #0066cc;
    text-decoration: none;
}

a:visited {
    color: #800080;
}

a:hover {
    color: #ff6600;
    text-decoration: underline;
}

a:active {
    color: #ff0000;
}

スタイル優先順位

スタイルの適用順位は以下の通りです：

  1. インラインスタイル（style属性）
  2. IDセレクタ
  3. クラスセレクタ、属性セレクタ、疑似クラス
  4. 要素セレクタ
  5. ユニバーサルセレクタ

同じ重要度のスタイルが複数ある場合、後に記述されたものが適用されます。

タグ: HTML CSS Table form Selector

7月22日 16:04 投稿

ホットタグ

©2026 異端開発室