HTML のコンピュータコード

HTMLHTMLBeginner
今すぐ練習

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

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> タグに classstyletitle 属性を使用しています。

既定の 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 になります。