【HTML & CSS入門】新人エンジニアのための記号の読み方と使い方まとめ
山崎講師
こんにちは。ゆうせいです。
Web制作を始めたばかりの方にとって、HTMLやCSSに出てくる記号はとても不思議に見えるかもしれません。< > や {}、#、.、: など…「これって何の意味？」と戸惑うのは当然です。
今回はそんなあなたのために、HTMLとCSSで使われる記号の読み方と使い方を、わかりやすく解説していきます！
HTMLとCSSでよく使う記号一覧
| 記号 | 読み方 | 主な用途（HTML / CSS） |
|---|---|---|
< > | 山かっこ | HTMLタグの囲い |
</> | スラッシュ付きタグ | タグの終了 |
= | イコール | 属性に値を代入 |
" ' | ダブル/シングルクオート | 文字列の囲い |
{} | 波かっこ | CSSのスタイルブロック |
: | コロン | CSSのプロパティと値の区切り |
; | セミコロン | CSSの命令区切り |
. | ドット | クラスセレクタ |
# | シャープ | IDセレクタ |
/* */ | コメント | CSSのコメントアウト |
<!-- --> | コメント | HTMLのコメントアウト |
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内でコメントを書くときはこのように書きます：
/* これはコメントです */
よくある間違いと注意点
| ミス例 | 誤りの原因 | 正しい形 |
|---|---|---|
<div class=header> | クオートがない | <div class="header"> |
color = red; | = を使ってしまう | color: red; |
.title { color: red } | セミコロンが抜けている | .title { color: red; } |
#title .text {} | 意味を理解していない | 「ID title の中の class text」 |
練習問題（ちょっとやってみよう！）
Q. 以下のコードは何を意味していますか？
<p class="message">こんにちは</p>.message {
font-weight: bold;
color: blue;
}
→ 答え：
「クラス名 message がついた段落に、太字＋青色の文字スタイルを適用している」
今後の学習の指針
- HTMLは「構造」、CSSは「装飾」だということを意識しましょう！
- 記号は単なる飾りではなく、「意味」を持っています。ひとつひとつの役割を丁寧に覚えてください。
- ブラウザでコードを書きながら学ぶと、理解が早まります。
次のステップでは、「セレクタの優先順位」や「CSSの入れ子構造（ネスト）」について学ぶと、より実践的になります！
焦らず、でも確実に！進んでいきましょう！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
- 代表取締役
-
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
