こんにちは。ゆうせいです。

Web制作を始めたばかりの方にとって、HTMLやCSSに出てくる記号はとても不思議に見えるかもしれません。
< > や {}、#、.、: など…「これって何の意味？」と戸惑うのは当然です。

今回はそんなあなたのために、HTMLとCSSで使われる記号の読み方と使い方を、わかりやすく解説していきます！

HTMLとCSSでよく使う記号一覧

HTML編：基本の記号と使い方

< >（山かっこ）：タグを囲む

HTMLはすべて「タグ」で構成されています。タグは山かっこで囲んで使います。

<p>こんにちは</p>

この <p> は「段落」を意味するタグです。

</>：閉じタグ（終了タグ）

HTMLでは、多くのタグが開始タグと終了タグのペアで使われます。

<h1>タイトル</h1>

スラッシュ / がついた </h1> は「閉じタグ」と呼ばれ、ここで終了を意味します。

=（イコール）：属性に値を設定

タグの中で「属性（ルールや指定）」を使うときに = を使います。

<img src="photo.jpg" alt="風景">

この例では src="photo.jpg" で画像のファイル名を指定しています。

" または '：属性値を囲む

属性の値は クオート（引用符）で囲むのがルールです。通常は " を使いますが ' も使えます。

<a href="https://example.com">リンク</a>

<!-- -->：HTMLコメント

コードに説明を加えるためのコメントはこのように書きます：

<!-- これはコメントです -->

コメントはブラウザには表示されません。

CSS編：見た目を整えるための記号たち

{}（波かっこ）：スタイルのグループ化

CSSでは、どの要素にどんなスタイルを適用するかを {} で囲みます。

p {
  color: red;
  font-size: 16px;
}

p はセレクタ（対象）で、その中の波かっこの中にプロパティと値を書きます。

:（コロン）：プロパティと値の区切り

CSSでは、プロパティ名 : 値 の形でスタイルを指定します。

color: blue;

読み方は「カラーはブルー」となります。

;（セミコロン）：文の区切り

CSSでは、複数のプロパティを区切るために ; を使います。

h1 {
  color: green;
  text-align: center;
}

最後にもセミコロンをつけるのが一般的です。

.（ドット）：クラスセレクタ

class 属性で指定された要素をCSSで装飾するときは、. を使います。

<p class="notice">お知らせ</p>

.notice {
  color: orange;
}

「noticeというクラスに色をつける」という意味になります。

#（シャープ）：IDセレクタ

HTML要素に id をつけたときは、CSSでは # を使って指定します。

<div id="header">見出し</div>

#header {
  background-color: lightgray;
}

IDはページ内に1つだけ使うのがルールです。

/* */：CSSのコメント

CSS内でコメントを書くときはこのように書きます：

/* これはコメントです */

よくある間違いと注意点

練習問題（ちょっとやってみよう！）

Q. 以下のコードは何を意味していますか？

<p class="message">こんにちは</p>

.message {
  font-weight: bold;
  color: blue;
}

→ 答え：
「クラス名 message がついた段落に、太字＋青色の文字スタイルを適用している」

今後の学習の指針

• HTMLは「構造」、CSSは「装飾」だということを意識しましょう！
• 記号は単なる飾りではなく、「意味」を持っています。ひとつひとつの役割を丁寧に覚えてください。
• ブラウザでコードを書きながら学ぶと、理解が早まります。

次のステップでは、「セレクタの優先順位」や「CSSの入れ子構造（ネスト）」について学ぶと、より実践的になります！

焦らず、でも確実に！進んでいきましょう！

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。

学生時代は趣味と実益を兼ねてリゾートバイトにいそしむ。長野県白馬村に始まり、志賀高原でのスキーインストラクター、沖縄石垣島、北海道トマム。高じてオーストラリアのゴールドコーストでツアーガイドなど。現在は野菜作りにはまっている。

最新の投稿

• 新人エンジニア研修講師2026年2月28日初心者が選ぶべき道しるべ！データ分析の魔法「クラスタリング」完全ガイド
• 新人エンジニア研修講師2026年2月28日f(x, y) とf(x; y) って何が違うの？
• 新人エンジニア研修講師2026年2月28日AIの深層へようこそ！逆伝播バックプロパゲーションの仕組みを完全マスター
• 新人エンジニア研修講師2026年2月28日機械学習で必須のscikit-learn関数ベスト10