どんなタグ?
コードを表す場合に
<code>タグを使う
<p>
JavaScriptでid属性で要素を取得するメソッドは、
<code>getElementById()</code>です。
</p>
<code>
〜</code>
で挟まれた箇所がHTMLやCSS、JavaScriptなどのコードであることを表します。言語名以外にも、ファイル名、コンピュータプログラム、その他コンピュータが認識できる文字列であることも表します。
また、<code>タグは、どの言語のコードであるか表す方法が無いのでclass属性に「language-」から始まるクラスを付けることがあります。
- どのカテゴリに属しているの?
- <code>タグは フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは?
- <code>タグに梱包できるタグ(コンテンツ・モデル)は、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。
コードを表したいときに使うタグです!
どうやって使うの?
コードを表す文字列を、
<code>
タグで挟んで使います。
<codeタグ>は、 コードとして表したい文字列を <code>
〜 </code>
で挟みます。
- 使い方
<code>コードとして表したい文字列</code>
<p>
JavaScriptで詰まった時は、
<code>console.log()</code>で味見しましょう!
</p>
https://codehero.shibajuku.net/html/code/codesample01/
- どこでも使えるの?
- <code>タグは フレージング・コンテンツ が配置できるところならどこでも使えます。
- 気をつけることは?
- HTML上で何かしら役割を持っている「<」や「>」などは、「<」や「>」のように文字参照で記述する必要があります。
<code>タグ内でHTMLのタグを文字として扱う場合は、文字参照をする。
使える属性は?
グローバル属性のみ使えます。
<code>
タグには、どの要素にでも使えるグローバル属性のみが使えます。
class属性やtitle属性などのグローバル属性が使えます。
サンプルが見たい
<code>タグを使ったサンプルを紹介。
<code>
タグを使ったサンプルを紹介します。
基本的な<code>タグのサンプル
<p>
<code><h1>見出し</h1></code>
</p>
https://codehero.shibajuku.net/html/code/codesample02/
複数行のコードを表す時のサンプル
<pre><code>
for(let i = 0; i < 5; i++ ) {
console.log("pre要素に包むと改行や空白が反映されます");
}
</code></pre>
https://codehero.shibajuku.net/html/code/codesample03/
空白や改行をそのまま表示させたい時は、<pre>タグ内にに記述する!
デフォルトスタイルは?
デフォルトでは、
文字が等幅フォントになる
一般的なブラウザで <code>タグを表示した場合、文字が等幅フォントになります。
具体的には、下記のCSSと同等のスタイルが適用されます。
code {
font-family: monospace;
}
デフォルトでは、「等幅フォント」というフォントの種類だけ指定されているので、書体を指定する場合はCSSのfont-familyプロパティを使いましょう
対応ブラウザは?
基本的にどのブラウザでも使えます。
<code>タグは HTML1.0以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar あり ~
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome 4 ~
- Firefox
- Firefox 2 ~
- Safari
- Safari あり ~
- Opera
- Opera あり ~
モダンブラウザは問題ありません。