見出し画像

HTMLの基本その2

フルスタコマ

HTMLの全体像

まずはじめに、HTMLの基本構造を見てみましょう。HTML（HyperText Markup Language）は、ウェブページを作成するためのマークアップ言語です。以下は、基本的なHTMLのコードです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML 基本その2</title>
  </head>
  <body>
    <h1>フォームを書いてみよう</h1>
    <form action="/submit" method="post">
      <label for="name">お名前</label>
      <input type="text" id="name" name="name" /><br /><br />
      <label for="email">メールアドレス</label>
      <input type="email" id="email" name="email" /><br /><br />
      <input type="submit" value="submit" />
    </form>
    <h1>テーブルを書いてみよう</h1>
    <table border="1">
      <caption>
        テーブルの例
      </caption>
      <thread>
        <tr>
          <th>お名前</th>
          <th>ご年齢</th>
          <th>ご出身</th>
        </tr>
      </thread>
      <tbody>
        <tr>
          <td>山田太郎</td>
          <td>30歳</td>
          <td>東京都</td>
        </tr>
        <tr>
          <td>田中花子</td>
          <td>27歳</td>
          <td>千葉県</td>
        </tr>
        <tr>
          <td>ジョン・ジョンソン</td>
          <td>45歳</td>
          <td>アメリカ</td>
        </tr>
      </tbody>
    </table>
    <h1>要素を横並びにし、さらにその中に縦並びにする方法</h1>
    <p>本来はCSSを使うものの、HTMLでおこなう場合</p>
    <div style="display: flex">
      <div style="margin-right: 20px">
        <p>要素1</p>
        <p>要素2</p>
        <p>要素3</p>
      </div>
      <div style="margin-right: 20px">
        <p>要素4</p>
        <p>要素5</p>
        <p>要素6</p>
      </div>
      <div style="margin-right: 20px">
        <p>要素7</p>
        <p>要素8</p>
        <p>要素9</p>
      </div>
    </div>
  </body>
  <footer><p>Copyright &copy; by フルスタコマツ</p></footer>
</html>

HTMLの基本中の基本

HTMLの基本中の基本は前回のHTMLの基本 その1をお読みいただけたら嬉しいです。

フォームの作り方

<h1>フォームを書いてみよう</h1>
<form action="/submit" method="post">
  <label for="name">お名前</label>
  <input type="text" id="name" name="name" /><br /><br />
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" /><br /><br />
  <input type="submit" value="submit" />
</form>

  • formタグ：フォームの開始を示し、action属性は送信先のURLを指定し、method属性は送信方法を指定します。

  • labelタグ：フォーム入力の説明をします。

  • inputタグ：実際の入力フィールドを作成します。type属性で入力タイプを指定し、id属性で関連付けるための識別子を指定します。

  • brタグ：改行を挿入します。

テーブルの作り方

<h1>テーブルを書いてみよう</h1>
<table border="1">
  <caption>
    テーブルの例
  </caption>
  <thread>
    <tr>
      <th>お名前</th>
      <th>ご年齢</th>
      <th>ご出身</th>
    </tr>
  </thread>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>東京都</td>
    </tr>
    <tr>
      <td>田中花子</td>
      <td>27歳</td>
      <td>千葉県</td>
    </tr>
    <tr>
      <td>ジョン・ジョンソン</td>
      <td>45歳</td>
      <td>アメリカ</td>
    </tr>
  </tbody>
</table>

  • tableタグ：テーブル全体を囲むタグで、border属性は境界線を指定します。

  • captionタグ：テーブルのタイトルを指定します。

  • threadタグ：テーブルのヘッダー部分を示します。

  • trタグ：テーブルの行を示します。

  • thタグ：ヘッダーセルを示します。

  • tbodyタグ：テーブルのボディ部分を示します。

  • tdタグ：データセルを示します。

要素を横並びにしてさらにその中に縦並びにする方法

<h1>要素を横並びにし、さらにその中に縦並びにする方法</h1>
<p>本来はCSSを使うものの、HTMLでおこなう場合</p>
<div style="display: flex">
  <div style="margin-right: 20px">
    <p>要素1</p>
    <p>要素2</p>
    <p>要素3</p>
  </div>
  <div style="margin-right: 20px">
    <p>要素4</p>
    <p>要素5</p>
    <p>要素6</p>
  </div>
  <div style="margin-right: 20px">
    <p>要素7</p>
    <p>要素8</p>
    <p>要素9</p>
  </div>
</div>

divタグ：ブロックレベルのコンテナを作成します。ここでは、style属性を使用してフレックスボックスレイアウトを設定し、要素を横並びに配置します。

まとめ

これで、HTMLの基本的な構造と各要素についての解説を終わります。初めての方でも理解しやすいように心掛けて書きましたので、実際に手を動かして試してみてくださいね。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！


この記事が気に入ったらサポートをしてみませんか？