👻

【入門 #1】HTMLまとめ

2022/01/01に公開

HTML

tech

はじめに

こんにちは。このページは初学者である僕が以下の本を消化したものと不明だった点や補足情報との融合物です。

｢ゼロから覚えるHTML&CSSの基本｣

基礎の基礎

この本が扱う HTML と CSS はWebサイトを作るための言語であり、厳密にはプログラミング言語ではないです。

HTML : Webページの構造を指定する言語
CSS : Webページのデザインを指定する言語

それぞれ担当を分けることで可読性や生産性を上げています。

HTMLの用語

ここで使われる用語について軽く説明します。例えば、

<h1 id="myHeader">Hello World!</h1>

上記の<h1>は開始タグや要素、</h1>は終了タグ、idは属性、"myHeader" は値です。
タグが文字を囲むことでその文字に意味付けをすることができます。また属性と値が1対1となりオプションの役割を果たします。タグと属性には多くの種類がありますが、詳細はW3SchoolsのHTMLリファレンスを見てください。HTML Elements Reference

id属性と class属性

両方とも各要素に分かりやすい名前を付けるものです。
上の例では "Hello World!" という見出しに "myHeader" という名前を付けたということです。

<h1 class="intro">こんにちは！</h1>

これも "こんにちは！" に "intro" という名前を付けたということです。id は重複できませんが class は重複できます。

書いてみる

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Linのなんとかブログ</title>
    </head>
    <body>
        <header>
		Linのなんとかブログ
        </header>

        <div id="container">
		<main>
			駅前のラーメン屋さん行ったんだけど美味しかった！
		</main>
		
		<aside>
			ほかの記事一覧はこちら
		</aside>
        </div>

        <footer>
		サイトマップ、プライバシーポリシー
        </footer>
    </body>
</html>

これがHTMLの一般的な基本構造です。意味不明だと思いますのでコメントで説明します。

コメント説明入りのコード

<!DOCTYPE html>   <!--HTMLファイルであることの宣言-->
<html>   <!--ここからHTMLファイルであることを示す-->
    <head>   <!--サイトのデータについて-->
        <meta charset="UTF-8">   <!--文字コードをUTF-8に指定する-->
        <title>Linのなんとかブログ</title>   <!--ブラウザのタブに表示される文字列-->
    </head>
    <body>   <!--ここからがWebページ本体に表示される部分-->
        <header>   <!--ページ上部に表示されるもの-->
		Linのなんとかブログ
        </header>

        <div id="container">   <!--Webページの大部分-->
		<main>   <!--メインコンテンツ-->
			駅前のラーメン屋さん行ったんだけど美味しかった！
		</main>
		
		<aside>   <!--サブコンテンツ-->
			ほかの記事一覧はこちら
		</aside>
        </div>

        <footer>   <!--ページ下部に表示されるもの-->
		サイトマップ、プライバシーポリシー
        </footer>
    </body>
</html>

ここで  がコメントです。これはHTMLの動作に影響を及ぼしません。

ここには <main> と <aside> が出てきましたが他にも触れておきます。

<section>: レポートなど章、節、項と文章がそれぞれ繋がりをもつとき
<article>: ブログや記事など各コンテンツがそれぞれ独立しているとき

覚えるべき要素

`<h1>, <h2>, ...<h6>` 見出し (headings)

<h1>が最大で<h6>が最小です。また前後にそれぞれ1行分の空白行が入ります。

`<p>` 段落 (paragraph)

囲まれた部分が1つの段落となります。また前後にそれぞれ1行分の空白行が入ります。

`<br>` 改行 (break)

この直後に空白行が挿入されます。終了タグはなくそれらは空要素と呼ばれます。

`<nav>` ナビゲーション

箇条書きリストを作るものです。使い方は、

<nav>
    <ul>
        <li>りんご</li>
        <li>みかん</li>
        <li>いちじく</li>
        <li>レモネード</li>
    </ul>
</nav>

これで

りんご
みかん
いちじく
レモネード

ができます。また<ul>の代わりに<ol>を使うと番号付きリストになります。

`<a>` リンク (anchor)

使い方

<a href="https://zenn.dev/lin_24">Lin*24</a>

ここで href="#myHeader", にすると id名がmyHeader の部分に飛び、 href=".intro" にすると class名がintroの部分に飛びます。

`<img>` 画像 (image)

<img src="image01.jpg" alt="部分月食">

終了タグがない空要素です。alt="部分月食"の部分は画像が表示されなかった場合の代替テキストです。

`<table>` 表

表を作成します。情報を整理したいときにも使えます。

<table>
    <caption>夕食の食材</caption>
    <tr>
        <th></th><th>食材</th><th>量</th><th>値段</th>
    </tr>
    <tr>
        <th>1</th><td>豚の肩ロース</td><td>200g</td><td>$3.50</td>
    </tr>
    <tr>
        <th>2</th><td>手羽元</td><td>150g</td><td>$1.80</td>
    </tr>
    <tr>
        <th>3</th><td>キャベツ</td><td>2玉</td><td>$1.10</td>
    </tr>
    <tr>
        <th>4</th><td>ケチャップ</td><td>小さめサイズ</td><td>$1.50</td>
    </tr>
</table>

表の例
ブラウザでの表示

フォームの作成

これだけでは情報の送信は実装できませんので別途PHPなどを学ぶ必要があります

<form action="contact01.html" method="post"></form>

actionには入力されたデータの送付先、methodには送付するパスを指定します。

<label for="name">お名前 : </label><input type="text" name="name" id="name"><br><br>

<label>をつけることで "お名前 : " をクリックするとカーソルが表示され入力可能になります。そのため <label> の "for" は <input> のidを指定します。また <input> の type では "text" のフィールドを指定します。"name" はフォームデータを受け取ったプログラムが認識するための文字です。

ラジオボタン

<input type="radio" name="sex" value="male" id="male"><label for="male">男性</label>

属性value はそれぞれのラジオボタンの値です。

チェックボックス

<input type="checkbox" name="category" value="programming" id="programming"><label for="programming">プログラミング</label>

セレクトボックス

<select name="contact">
    <option value="bugs">バグ・エラーのご報告</option>
</select><br><br>

テキストエリア

<textarea name="comment" id="comment" cols="40" rows="10"></textarea>

<cols> と <rows> でテキストエリアの大きさを指定します｡

送信ボタン

<input type="submit" value="送信">

フォーム全体

以上の要素を使ったサンプルフォームです｡

サンプルフォームのコード

<form action="contact01.html" method="post">
    <label for="name">お名前 : </label><input type="text" name="name" id="name"><br><br>

    <label for="mail">メールアドレス : </label><input type="email" name="email" id="mail"><br><br>

    性別 : 
    <input type="radio" name="sex" value="male" id="male"><label for="male">男性</label>
    <input type="radio" name="sex" value="female" id="female"><label for="female">女性</label>
    <input type="radio" name="sex" value="others" id="others"><label for="others">その他</label><br><br>
    
    カテゴリ :<br>
    <input type="checkbox" name="category" value="programming" id="programming"><label for="programming">プログラミング</label>
    <input type="checkbox" name="category" value="cooking" id="cooking"><label for="cooking">自炊レシピ</label>
    <input type="checkbox" name="category" value="self_management" id="self_management"><label for="self_management">自己マネジメント</label><br>
    <input type="checkbox" name="category" value="web_design" id="web_design"><label for="web_design">Webデザイン</label>
    <input type="checkbox" name="category" value="life" id="life"><label for="life">生活の知恵</label><br><br>

    お問い合わせ内容<br>
    <select name="contact">
        <option value="bugs">バグ・エラーのご報告</option>
        <option value="opinions">改善点・ご要望</option>
        <option value="requests">お仕事のご依頼</option>
        <option value="others">その他</option>
    </select><br><br>

    <label for="comment">コメント</label><br>
    <textarea name="comment" id="comment" cols="40" rows="10"></textarea><br>

    <input type="submit" value="送信"><br>
</form>

フォームの例
ブラウザでの表示

HTML5 での要素の分類

以前のブロック要素、インライン要素は廃止され HTML5 から以下のモデルに分類されました。

【フロー】 <p>, <div> など以前のブロック要素
【フレージング】 <a>, <img> など従来のインライン要素
【メタ】 <meta>, <link> など
【セクショニング】 <section>, <article>, <aside> など
【ヘディング】 <h1>, <h2> など
【エンベディッド】 <audio>, <embed> など
【インタラクティブ】 <button>, <input> など