HTML コードのフォーマットをマスターする

はじめに

Web 開発では、時々、Web ページにプログラミング関連またはコンピュータ関連のコンテンツを表示する必要があります。特定の用語（たとえば、関数名や変数名など）を表示したい場合、<code> タグを使用してそれらを囲むことができます。このタグは、囲まれたテキストのフォントファミリを courier などの等幅フォントに変更します。

注: index.html でコーディングを練習し、Visual Studio Code で HTML を記述する方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70725{{"HTML のコンピュータコード"}} html/text_head -.-> lab-70725{{"HTML のコンピュータコード"}} html/doc_flow -.-> lab-70725{{"HTML のコンピュータコード"}} html/inter_elems -.-> lab-70725{{"HTML のコンピュータコード"}} html/custom_attr -.-> lab-70725{{"HTML のコンピュータコード"}} end

`<code>` タグを追加する

まず、ローカルシステムに index.html ファイルを作成し、好きなコードエディタで開きます。

次に、HTML ファイルに <code> タグを追加しましょう。このタグの構文は簡単です。表示したいテキストを囲む開始タグと終了タグがあります。

<body>
  <!-- Add the code tag -->
  <p>This is an example of using the <code>code</code> tag in HTML.</p>
</body>

上記のコードブロックでは、<code> タグの中に code という用語を囲みました。これにより、囲まれたテキストが等幅フォントで表示されます。

複数行にわたるコードを表示するために `<pre>` タグを追加する

複数行にわたるプログラミングコードを表示する必要がある場合は、<pre> タグと <code> タグを併用します。index.html ファイルに次のコードを追加することで、その使い方を見てみましょう。

<body>
  <!-- Using the pre tag with the code tag -->
  <pre>
      <code>
         function multiply(a, b) {
            return a * b;
         }
         // Call the function
         multiply(2, 3);
      </code>
   </pre>
</body>

このコードブロックでは、<pre> タグを使用してコードをブロック形式で表示することを示しています。<pre> タグの中には、プログラミングコードを囲んでいることを示すために <code> タグを追加しています。

グローバル属性とイベント属性を使用する

<code> タグでは、グローバル属性とイベント属性を使用できます。

<body>
  <!-- Using global attributes with the code tag -->
  <p>
    <code class="highlight" style="color: red" title="This is a title"
      >Some code</code
    >
  </p>
</body>

上記のコードブロックでは、<code> タグに class、style、title 属性を使用しています。

既定の CSS スタイルを追加する

<code> タグに対して何もスタイルを指定しない場合、既定の CSS 設定が使用されます。ほとんどのブラウザは、<code> タグの既定のフォントファミリとして monospace を使用します。

<body>
  <!-- Default CSS style for HTML code tag -->
  <p>
    <code>Default CSS style</code>
  </p>
</body>

まとめ

<code> タグは、プログラミング関連またはコンピュータ関連のコンテンツを囲むために使用されます。このタグを使用することで、囲まれたテキストを courier のような等幅フォントで表示できます。また、<pre> タグと <code> タグを併用して、複数行にわたるプログラミングコードを表示することもできます。<code> タグは、グローバル属性とイベント属性をサポートしています。<code> タグに対して何もスタイルを指定しない場合、既定の CSS 設定が使用され、既定のフォントファミリは monospace になります。

HTML のコンピュータコード