解説一覧

HTML 学習テキスト

HTML Masterで登場する主要な要素と、その使い方を総まとめ。

基礎知識

初心者向けに、タグの意味だけでなく「なぜそのタグを使うのか」という設計思想まで解説した学習ガイドをご用意しています。

HTMLの基礎学習ガイドを読む

基本構造タグ

<!DOCTYPE html>

文書型宣言

このファイルがHTML5であることをブラウザに伝えます。ファイルの最上部に記述します。

詳しく読む →
<html>

ルート要素

HTML文書全体の範囲を指定します。すべての要素はこのタグの中に含まれます。

詳しく読む →
<head>

メタ情報

タイトルや文字コード、検索エンジン向けの情報など、ブラウザに直接表示されない情報を記述します。

詳しく読む →
<body>

本文

サイトを訪れたユーザーが実際に目にする、文字、画像、ボタンなどのすべてのコンテンツを記述します。

詳しく読む →

テキスト系タグ

<h1>〜<h6>

見出し

情報の重要度に応じた見出しを作成します。h1が最も重要で、SEO的にも非常に重要な役割を持ちます。

詳しく読む →
<p>

段落

まとまった文章（テキスト）を記述します。前後に自動的に余白が生まれるのが特徴です。

詳しく読む →
<br>

改行

文章の途中で強制的に改行を入れます。終了タグを持たない「空要素」のひとつです。

詳しく読む →
<span>

インライン要素

文章の一部だけに特定のスタイル（色など）を適用したい時に使用します。

詳しく読む →

メディア・リンク

<a>

アンカー（リンク）

他のページや外部のサイトへ移動するためのリンクを作成します。href属性で遷移先を指定します。

詳しく読む →
<img>

画像表示

ウェブページに画像を挿入します。src属性で場所、alt属性で説明を記述します。

詳しく読む →
<video>

動画埋め込み

ファイルをサーバーから直接読み込んで動画を再生します。複数の属性でコントロールが可能です。

詳しく読む →

レイアウト・グループ

<div>

グループ化

要素をまとめて箱を作り、デザインを調整しやすくします。最も汎用性の高いタグです。

詳しく読む →
<header>

ヘッダー

ページや記事全体の導入部。ロゴやナビゲーションが含まれることが多いです。

詳しく読む →
<footer>

フッター

ページの最後に位置し、著作権情報やサイトマップ、各種リンクが含まれます。

詳しく読む →
<section>

セクション

意味のまとまりごとにコンテンツを区切るための、セマンティックなタグです。

詳しく読む →

CSS・デザイン

Selectors

セレクタと詳細度

特定の要素を選んでスタイルを適用する仕組みと、優先順位のルールを学びます。

詳しく読む →
Box Model

ボックスモデル

全ての要素が持つ「四角い箱」の概念。MarginやPaddingの使い分けを理解します。

詳しく読む →
Colors

色と背景

HEXやRGBAなどの色彩指定方法と、グラデーションや背景画像の設定について。

詳しく読む →
Typography

文字と単位

font-sizeやrem, pxといった単位の使い分け、読みやすい行間の作り方を学びます。

詳しく読む →
Flexbox

レイアウト

要素を並び替え、中央揃えなどを自在に行うモダンなFlexboxの使い方を解説します。

詳しく読む →