コメントと特殊文字・リスト

2025.07.26

コメントについて

<!-- --> は、htmlにおけるコメントを示すための構文です。この構文を使うと、htmlコード内にメモや説明を書いても、その内容はブラウザに表示されません。主にコードの注釈や、デザイナーやコーダー間でのメモ、次の更新者用に、説明を書いておくために使用されます。

<!-- これはHTMLコメントです -->
<p>こんにちは</p>

上記の例では、<!-- これはHTMLコメントです --> はコメントとして扱われ、ブラウザには表示されません。「こんにちは」のpタグで囲まれた文字は実際にウェブページ上に表示されます。

使い方の例

<html>
<head>
    <title>京ばあむの説明</title>
</head>
<body>
    <!-- 大まかな説明 -->
    <h1>京ばあむについて</h1>
    <p>
        京ばあむは、ふわっとした食感の生地と<br />
しっとりとした甘さが特徴のバウムクーヘンです。<br />
京都の風味を生かした味わいが楽しめ<br />
贈り物やお土産としても人気です。
   </p>
   <p>豆乳が使用されています。お抹茶は、宇治の...
<!-- 材料について続き --></p>
</body>
</html>

よく使われる特殊文字

文字エンティティ名エンティティコード説明
&&amp;&#38;アンパサンド（&）
<&lt;&#60;小なり（<）
>&gt;&#62;大なり（>）
"&quot;&#34;ダブルクォート（”）
'&apos;&#39;アポストロフィ（’）
©&copy;&#169;著作権記号（©）
®&reg;&#174;登録商標記号（®）
€&euro;&#8364;ユーロ記号（€）
¥&yen;&#165;円記号（¥）
←&larr;&#8592;左矢印（←）
→&rarr;&#8594;右矢印（→）

特殊文字を使う理由

htmlで一部の文字は構文上の意味を持っているため、そのまま使うと、期待しない結果が生じることがあります。例えば、< や > はHTMLタグの始まりと終わりを表すため、そのまま記述するとタグとして認識されます。これを回避するために、&lt; や &gt; を使用します。

リストについて

リストタグというものがあります。箇条書きをしたい時、キーボード上にある「・」を使うのは、SEO的にNGです。必ずリストタグを使いましょう。リストタグは、olやulと一緒に使います。リストタグだけ、olやulだけで表すことは出来ませんので、下記を見て使い方を覚えましょう。

ulタグの使い方

<ul>
  <li>太陽と月</li>
  <li>月と太陽</li>
<ul>

簡単に、便利なリストスタイルが出来上がります。箇条書きをするとき、ぜひ使いましょう。

olタグの使い方

<ol>
 <li>八つ橋</li>
 <li>京ばあむ</li>
</ol>

<ol type=a>
 <li>東本願寺</li>
 <li>西本願寺</li>
</ol>

<ol type=A>
 <li>京都駅</li>
 <li>新大阪駅</li>
</ol>

<ol type=i>
 <li>おばんざい</li>
 <li>にしき蕎麦</li>
</ol>

<ol type=I start=3>
 <li>京都タワー</li>
 <li>ろうそく</li>
</ol>

どう表示されるかやってみましょう。これらolタグを使ったリストタグは、ordered list（順序のあるリスト）なんです。

olタグ「1.1.3.4…」です。
olタグにtype＝a「a.b.c.d…」
olタグにtype＝A「A.B.C.D…」
start=3を追加すると、3.2.1と逆順のリストを作ることが出来ます。

コメント