MENU
Webの仕事に携わりたい方、今からWebデザインをめざす方、今Webデザインの学習を行っている方へ | 動画で学ぶWebデザイン教室　 Fukuokamiyako

HTML要素　ブロック要素

HTML　基本要素
最初に必ず設定しておくべき要素と属性
HTML インライン要素
用途が高く意味合いがあるインライン要素
目次

代表的なブロック要素

ブロック要素は、ページの構造を定義する中で、新しい行で始まり、水平方向に伸び１行単位での表示となります。

見出しを定義　h1-h6要素(Heading Elements)

見出し要素（Heading Elements）は、ページの構造を階層的に整理するための要素です。見出しは主にページの構造を示し、文書内でテーマやセクションの区別を明確にします。HTMLでは<h1>から<h6>までの見出し要素があり、<h1>が最も高い重要度を示し、<h6>が最も低い重要度を示します。

見出しはCSSを使用してスタイリングを行うため、HTMLの見た目のデザイン上文字の大きさを揃えるため、本来は<h2>要素が意味合い的に適している箇所に<h3>要素を使うことはできません。

<h1>これはH1見出しです</h1>
<h2>これはH2見出しです</h2>
<!-- ... -->
<h6>これはH6見出しです</h6>

段落を定義　p要素 (paragraph element)

<p>要素は、段落（Paragraph）を表現するためのHTML要素です。テキストコンテンツをまとめて一つの段落としてグループ化するために使用されます。

<p>要素内には、他の要素もネスト（入れること）もできますが、他のブロック要素（例: <div>、<h1>など）は通常直接<p>内には配置されません。ブロック要素は配置されませんが、インライン要素は配置します。

<p>これは段落のテキストです。段落は通常、一連の文や文章をまとめるために使用されます。</p>

<!--インライン要素はネストできる-->
<p>これは段落のテキストで、<strong>強調</strong>されています。</p>

<!--<br>で強制的に改行などを入れる場合がある-->
<p>これは最初の段落です。</p>
<p>これは2番目の段落で、前の段落とは<br>マージンによって分離されます。</p>

汎用的な箇所で定義　div要素(division element)

汎用のコンテナ要素で、他の要素をグループ化してCSSでのスタイリングやレイアウトを適用します。そのため意味合いを持たない汎用要素となります。意味のある場所を<div>で定義するのは極力さけたいものです。

<div class="content">
    <!-- 他のブロック要素やインライン要素を含むことができる -->
    <p>これは段落です。</p>
    <ul>
        <li>項目1</li>
        <li>項目2</li>
    </ul>
</div>

順序のないリストと順序つきリストを定義　ul要素,ol要素,li要素

<ul>（Unordered List）、<ol>（Ordered List）、および <li>（List Item）は、HTMLでリストを作成するための要素です。これらを組み合わせて使用することで、順序のないリスト（アンオーダードリスト）や順序つきリスト（オーダーリスト）を構築します。

<ul>（Unordered List）

  • 順序のないリストを表現するための要素です。
  • リストアイテムは通常、点（ディスク、円、四角など）でマークされます。
<ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

<ol>（Ordered List）

  • 順序つきリストを表現するための要素です。
  • リストアイテムは通常、数値や文字で番号付けされます。
<ol>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ol>

<li>（List Item）

  • リスト内の各アイテム（項目）を表現するための要素です。
  • <ul>または<ol>の直下に配置され、リスト内の項目を定義します。
<ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

<ol>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ol>

ul、olの子要素はli要素のみ

<ul>および<ol>の子要素は<li>のみとなっており、下記のように他の要素(例では、<h2>要素）を入れたマークアップを行うことは避けましょう。

<ul>
  <h2>見出し</h2>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

説明リストのための要素(定型型要素)　dl. dt dd

<dl>（Description List）、<dt>（Description Term）、および <dd>（Description Details）は、HTML文書内で説明リストを作成するための要素です。これらの要素は、用語（<dt>）とその説明（<dd>）をグループ化し、関連性を示すのに役立ちます。(定型型要素）

<dl>要素は説明リストのコンテナで、<dt>（用語）と<dd>（説明）を下記のように組み合わせます。

<dl>
    <dt>用語1</dt>
    <dd>用語1の説明</dd>

    <dt>用語2</dt>
    <dd>用語2の説明</dd>

    <!-- 他の用語と説明も同様に追加可能 -->
</dl>


<!--新着情報などにも使われる-->
<dl>
    <dt>2024.01.30</dt>
    <dd>新商品追加しました</dd>

    <dt>2023.12.01</dt>
    <dd>年末年始のお知らせ</dd>
</dl>

blockquote要素

<blockquote>要素は、HTML内で引用されたブロックレベルのテキストを示すための要素です。通常、この要素は引用文や外部からのコンテンツ、他の文書からの引用などに使用されます。<blockquote>要素を使用すると、引用された部分が視覚的に際立ち、意味論的な構造が強調されます。

<p>以下は引用です:</p>
<blockquote>
    <p>引用されたテキストがここに入ります。</p>
</blockquote>

<blockquote cite="https://example.com/quotation">
    <p>引用されたテキストがここに入ります。</p>
</blockquote>

フォーム要素

form要素

<form> 要素は、HTMLでフォームを定義するために使用される重要な要素です。フォームは、ユーザーがテキストを入力したり、ボタンをクリックしたりして情報を送信するためのものです。以下は、<form> 要素の基本的な構造と一般的な属性です。

  • action属性は フォームのデータが送信される先のURLを指定。この属性の値が空の場合、もしくはaction属性が両略されている場合は、同ページにデータは送信されます。送信先は、サーバー側の処理を担当するPHPなどのURLを指定し、PHPがサーバーで処理を行い返すプログラム宛に送ります。
  • method属性は、フォームデータの送信メソッドを指定。method=”get”　や　method=”post” と記述し、値は “GET” または “POST”になります。GET送信 はデータをURLに追加して送信し、POST送信 はデータをHTTPリクエストの本体に格納して送信します。重要なデータやパスワードなどの機密情報が含まれる場合は、”POST” を使用することが一般的です。
<form action="サーバーへのデータ送信先" method="送信メソッド">
  <!-- フォーム内の入力要素やボタンなどのコンテンツ -->
</form>

label要素

<label> 要素は、HTMLでフォーム要素と連携して、その入力フィールドに対するラベルを提供するために使用されます。<label> を使用することで、ユーザビリティが向上し、アクセシビリティが向上します。（推奨）

<label for="input_id">ラベルテキスト</label>
<input type="type" id="input_id" name="input_name">
  • for 属性: ラベルが関連付けられているフォーム要素の id 属性と対応しています。これにより、ユーザーがラベルをクリックすると、関連するフォーム要素がフォーカスされます。
  • ラベルテキスト: フォーム要素に関する説明的なテキストを含みます。このテキストをクリックすることで、関連するフォーム要素にフォーカスが当たります。

input要素 (インライン要素である）

<input>要素はインライン要素になりますので、下記のページで解説しています。

動画で学ぶWebデザイン教室　 Fuku…
HTML要素　インライン要素 | 動画で学ぶWebデザイン教室　 Fukuokamiyako  HTML　基本要素最初に必ず設定しておくべき要素と属性 HTML　ブロック要素 代表的なよく使うブロック要素 インライン要素 HTMLのインライン要素とは、行内に他の要素と共…

テーブル要素

HTMLの <table> 要素は、表を作成するためのコンテナ要素です。表は行と列から構成され、それぞれを <tr>（行）と <td>（データセル）または <th>（見出しセル）要素で表します。HTML5よりレイアウトを作成するための<table>要素を使うことは非推奨になっています。

<table>
    <tr>
        <th>見出しセル1</th>
        <th>見出しセル2</th>
        <th>見出しセル3</th>
    </tr>
    <tr>
        <td>データセル1</td>
        <td>データセル2</td>
        <td>データセル3</td>
    </tr>
    <!-- 追加の行が続く -->
</table>

<tr> は行（table row）を表し、<th> は見出しセル（table header cell）、<td> はデータセル（table data cell）を表します。

  • <table>：全体の表を定義します。
  • <tr>：行を定義します。
  • <th>：見出しセルを定義します。通常、表の最初の行や列に使用されます。
  • <td>：データセルを定義します。実際のデータが表示されます。

<thead>や<tbody>について

<tbody>や<thead>は、表を構造化し、セマンティクスを向上させるために使用されるHTML要素ですが、必ずしも必要ではありません。これらの要素がなくても、ブラウザはテーブルの内容を適切に解釈ています。ブラウザのデベロッパーツールでコードを確認すると入力していない場合も<tbody>などは入っています。但、これらの要素を使用することにより、表の構造が明確になり、アクセシビリティが向上し、CSSやJavaScriptなどのスタイリングや操作が簡単になります。

<table>
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>職業</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>30</td>
            <td>エンジニア</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>25</td>
            <td>デザイナー</td>
        </tr>
    </tbody>
</table>

<thead>要素は表の見出し（ヘッダー）を定義し、<tbody>要素は表の本体（データ）を定義しています。これにより、ブラウザは表の構造を正しく解釈し、スクリーンリーダーやその他の支援技術が正しく理解できるようになります。簡単な表やデザインのみが必要な場合、これらの要素を省略しても構いませんが、大規模な表やセマンティクスが重要な場合は、これらの要素を使用することが推奨されます。

目次