HTMLとは？
HTML（HyperText Markup Language）は、ウェブページの構造を記述するマークアップ言語です。タグと呼ばれる要素を使って、文章の構造やデザインを定義します。最新バージョンはHTML5から、動画や音声の埋め込みが簡単にできるようになりました。
本記事では、HTML5における基本を解説します。
HTMLの要素
前述の通り、HTML文書はタグと呼ばれる要素を使用して、文章の構造やデザインを定義します。タグは「開始タグ」と「終了タグ」で囲むことで、意味を持たせます。
|
<h1>これは見出しです</h1> |
また、要素は入れ子で指定することもできます。ただし入れ子にする際は、他の要素の中もしくは外で開始し、終了しなければいけません。
|
<p>これは<strong>段落</strong>です。</p> ※以下は間違い |
また、タグによっては属性と呼ばれる追加情報を設定できます。
|
<p>次は<a href="https://example.com">リンク</a>の例です。</p> |
HTMLでは、多くのタグを組み合わせてウェブサイトの構造を記述する、ということを覚えておきましょう。
HTMLの基礎構造
次に、HTMLの基本構造の具体例を紹介します。以下のコードは、シンプルなHTML文書の例です。
|
<!DOCTYPE html> |
このコードを解説します。
- <!DOCTYPE html>：DOCTYPE宣言で、文書の先頭に記載します。ブラウザにHTML5を使用していることを伝えます。
- <html lang="ja">：文書全体を囲むタグです。lang属性で言語を日本語に指定しています。
- <head>：headタグ内に、メタ情報（タイトルや文字コードなど）やタイトルを記述します。
- <meta charset="UTF-8">：metaタグで、文字コードをUTF-8に指定します。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：ビューポートの設定を行い、モバイルデバイスに対応させます。
- <title>サンプルページ</title>：ページのタイトルを設定します。
- <body>：実際に表示されるコンテンツを記述します。
- <h1>これは見出しです</h1>：見出しを表すh1タグを使用します。
- <p>これは段落です。ウェブページのコンテンツがここに表示されます。</p>：段落を表すpタグを使用します。
- <ul>：順序なしリストを表すulタグを使用し、リスト項目を表すliタグで囲んだテキストを含めます。
- <a href="https://example.com">リンク</a>：リンクを表すaタグを使用し、href属性でリンク先を指定します。
- <img src="sample-image.jpg" alt="サンプル画像">：imgタグで画像を表示させます。
HTMLでよく使うタグ一覧
HTMLを使いこなせるようになるには、まずタグを覚えることが重要です。ここでは、頻繁に使用するタグについて紹介します。
①見出しタグ（h1～h6）
見出しタグは、h1からh6までの6段階で表現されます。h1が最も大きく、h6が最も小さい見出しです。
②段落タグ（p）
文章の段落はpタグで囲みます。
③リンクタグ（a）
aタグを使って、他のページへのリンクを作成します。href属性にリンク先のURLを指定します。
④画像タグ（img）
imgタグで画像を表示します。src属性に画像のURLを指定します。
⑤リストタグ（ul, ol, li）
リストは、順序なしリスト（ul）と順序ありリスト（ol）があります。いずれも、リスト項目（li）で囲むことで作成できます。
⑥tableタグ(table)
tableタグを使って表を作成します。trタグで行を、thタグやtdタグでセルを作成します。
⑦改行タグ（br）
文章内で改行したい場合は、brタグを使用します。
HTMLのコメントアウトの方法
HTMLの記載内容を分かりやすくする方法として、コメントがあります。HTML内でコメントを残したい場合は、<!-- ここにコメント -->の形式で記述します。コメント部分はブラウザに表示されないため、HTMLの内容を理解するのに役立ちます。
コメントアウトの構文はHTML独自のものであり、他のプログラミング言語では異なる書き方がされることがあります。例えば、JavaScriptでは以下のようにコメントアウトを行います。
|
// JavaScriptの1行コメント /* |
CSSとは？
CSS（Cascading Style Sheets）は、HTMLで記述したコンテンツのデザインやレイアウトを制御する言語です。HTMLで構造を作成し、CSSで見た目を整えることが一般的です。
CSSは、セレクタと呼ばれる要素を指定し、プロパティでスタイルを定義します。例えば、pタグの文字色を赤にする場合、「p { color: red; }」と記述します。
HTMLでも、コンテンツのデザインやレイアウトを記述することは可能です。しかし、HTMLでは同じ設定をすべてのHTMLファイルに記述する必要があり、デザインやレイアウトを統一するのが大変です。CSSにまとめて記述し、HTMLと連携すれば、簡単にデザインやレイアウトを統一できます。
HTMLメールとは？
HTMLメールとは、HTMLを使用して構成したメールのことです。テキストメールと異なり、文字の装飾や画像・動画の埋め込みなど、ウェブページと同じくデザイン性の高いメールを作成することができます。
ただし、HTMLメールは画像や動画を使用することでメールそのもののサイズが大きくなってしまうことや、メールクライアントによっては正しく表示されない可能性があるというデメリットもあります。
どちらの形式を使用するかは、送信目的や対象者によって決定されます。リッチなデザインやレイアウトが重要な場合はHTMLメールを、互換性やシンプルな表示が求められる場合はテキストメールを選択することが一般的です。
まとめ
本記事では、HTMLの基礎知識を中心として、HTMLメールやCSSまで触れながら解説しました。HTMLの知識と実践スキルを磨いて、素晴らしいウェブページの制作や、HTMLメールを活用していってくださいね！
