HTMLチートシート
ウェブ開発志望者各位、こんにちは！今日は、訪れたことのあるすべてのウェブサイトの背骨であるHTMLの世界に飛び込みます。10年以上にわたってHTMLを教えてきた経験から言えることですが、HTMLは初見には少し怖いように見えるかもしれませんが、実際にはそんなに難しいものではありません。実際、私はHTMLをインターネットのレゴブロックのように考えています - 単純なパーツが組み合わさると、素晴らしいものが作れるんです！
目次
旅の始まり前に、カバーする内容を簡単に見てみましょう：
- 基本的なタグ
- ボディ属性
- テキストタグ
- リンク
- フォーマット
- リスト
- グラフィカル要素
- フォーム
- テーブル
- テーブル属性
- HTML5インプットタグ属性
- HTMLエディタとフォーマッタ
では、袖をまくって始めましょう！
基本的なタグ
すべてのHTMLドキュメントは、いくつかの基本的なタグから始まります。これらはあなたのウェブページの基盤です：
<!DOCTYPE html>
<html>
<head>
<title>私の最初のウェブページ</title>
</head>
<body>
Hello, World!
</body>
</html>これを分解すると：
-
<!DOCTYPE html>はブラウザにこれはHTML5ドキュメントであることを伝えます。 -
<html>はページのルート要素です。 -
<head>はドキュメントのメタ情報を含みます。 -
<title>はドキュメントのタイトルを指定します。 -
<body>はドキュメントの本文を定義し、すべての可視コンテンツがここに入ります。
ボディ属性
<body> タグには、コンテンツの表示方法を制御するためのさまざまな属性があります。以下にいくつかの一般的なものを示します：
| 属性 | 説明 |
|---|---|
| bgcolor | 背景色を設定 |
| background | 背景画像を設定 |
| text | テキスト色を設定 |
例：
<body bgcolor="lightblue" text="navy">
Welcome to my blue world!
</body>これにより、ライトブルーの背景とネイビーのテキスト色のページが作成されます。ウェブサイトの部屋を塗るのと同じです！
テキストタグ
HTMLには、テキストをフォーマットするためのさまざまなタグがあります。以下に最も一般的なものを示します：
| タグ | 説明 |
|---|---|
<h1> to <h6>
|
ヘッダー（h1が最大、h6が最小） |
<p> |
パラグラフ |
<br> |
行ブレイク |
<strong> |
太字テキスト |
<em> |
斜体テキスト |
例：
<h1>Welcome to My Website</h1>
<p>This is a <strong>bold</strong> statement.</p>
<p>This is an <em>emphasized</em> point.</p>リンク
リンクはウェブを作るものです！以下に作成方法を示します：
<a href="https://www.example.com">Click me!</a>href 属性はリンク先のURLを指定します。IDを使ってページの特定の部分にリンクすることもできます：
<h2 id="section2">Section 2</h2>
<a href="#section2">Go to Section 2</a>フォーマット
HTMLには、太字と斜体にする以外にも、テキストをフォーマットするさまざまな方法があります。以下にいくつかを示します：
| タグ | 説明 |
|---|---|
<sup> |
上付き文字 |
<sub> |
下付き文字 |
<pre> |
書式設定されたテキスト |
<code> |
コードスニペット |
例：
<p>H<sub>2</sub>O is water.</p>
<p>2<sup>3</sup> equals 8.</p>
<pre>
This text
is preformatted.
</pre>
<p>Here's some <code>inline code</code>.</p>リスト
リストは情報を整理するのに役立ちます。HTMLには3つのタイプがあります：
- 非順序リスト (
<ul>) - 順序リスト (
<ol>) - 定義リスト (
<dl>)
例：
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>グラフィカル要素
画像はあなたのウェブサイトを生き生きとします。以下に追加方法を示します：
<img src="cat.jpg" alt="A cute cat" width="300" height="200">src 属性は画像ファイルを指定し、alt はスクリーンリーダー用の代替テキストを提供し、width と height はサイズを設定します。
フォーム
フォームはユーザーがデータを入力する手段を提供します。以下に簡単なフォームを示します：
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>これは名前とメールフィールド、および送信ボタンを持つフォームを作成します。
テーブル
テーブルはデータを行と列で表示するために使用されます：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>テーブル属性
テーブルはさまざまな属性でカスタマイズできます：
| 属性 | 説明 |
|---|---|
| border | 枠の太さを設定 |
| cellpadding | セルの内容と枠の間のスペースを設定 |
| cellspacing | セル間のスペースを設定 |
| width | テーブルの幅を設定 |
HTML5インプットタグ属性
HTML5は新しいインプットタイプと属性を導入しました：
| タイプ/属性 | 説明 |
|---|---|
| type="email" | メールアドレス用 |
| type="date" | 日付ピッカー用 |
| type="number" | 数値入力用 |
| placeholder | インプットフィールドのヒントテキスト |
| required | フィールドを必須にする |
例：
<input type="email" placeholder="Enter your email" required>
<input type="date" name="birthday">
<input type="number" min="1" max="100">HTMLエディタとフォーマッタ
テキストエディタでHTMLを書くこともできますが、専用のHTMLエディタを使用すると生活が楽になります。以下にいくつかの一般的なオプションを示します：
- Visual Studio Code
- Sublime Text
- Atom
これらのエディタはシンタックスハイライトやオートコンプリートなどの機能を提供し、時間と頭痛を節約してくれます！
結論
そして、みんな！このHTMLチートシートは、あなたが独自のウェブページを作成するために必要な基本をカバーしています。HTMLは始まりに過ぎません。進むにつれて、スタイルを追加するためのCSSやインタラクティブにするためのJavaScriptを学びたいと思うでしょう。
HTMLを学ぶことは新しい言語を学ぶのと同じです - 練習が大事です。失敗を恐れずに実験を続けましょう。それで私たちは学びます！そして、誰もが次の大規模なウェブサイトを構築するかもしれません！
幸せなコーディングをし、あなたのタグが常に適切に閉じられることを祈っています！
Credits: Image by storyset