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

コメントについて

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

例えば：

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

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

特徴

  • チームでホームページをで作る時
    他の開発者に説明を加えたり、特定の部分のコードが何をしているかを簡潔に伝えるために使います。仮にお1人で作る場合も、更新する方のために、残しておくと親切です。
  • 一時的な無効化
    コードの一部を無効にしたいとき、例えば後で再度有効にする予定がある場合などに、コメントとして囲むことで無効化できます。

    使い方の例

    <html>
<head>
    <title>京ばあむの説明</title>
</head>
<body>
    <!-- 大まかな説明 -->
    <h1>京ばあむについて</h1>
    <p>
        京ばあむは、ふわっとした食感の生地と<br />
しっとりとした甘さが特徴のバウムクーヘンです。<br />
京都の風味を生かした味わいが楽しめ<br />
贈り物やお土産としても人気です。
   </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と逆順のリストを作ることが出来ます。

    コメント