【HTML】code要素の使い方【プログラムなどのコードであることを示します】

Program

code要素を使うことで、プログラムなどのコードであることを示します。

code要素の基本的な使い方

まず、次のプログラムと、ブラウザの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>code要素、pre要素、var要素</title>
</head>
<body>
<code>
const rank = 12;
if (rank > 10) {
    console.log('ランクが10より大きいです');
}
</code>
</body>
</html>

body要素の中に、code要素を含めて記述しました。

そして、code要素の中に、JavaScriptのプログラムコードを記述しました。

このため、ブラウザの表示結果の通り、code要素でマークアップされたJavaScriptのプログラムコードが、1行のプログラムコードとして表示されました。

表示結果をよく見てみると、HTMLのcode要素の中で記述した状態の「スペース文字」は、ブラウザでの表示結果でも表示されております。しかし、「改行」されていた箇所は、半角スペースに変換されて、改行がされない状態で表示されてしまいました。

プログラムコードの「改行」を表示するpre要素の使い方

次に、code要素とpre要素とを併用する方法を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>code要素、pre要素、var要素</title>
</head>
<body>
<pre>
<code>
const rank = 12;
if (rank > 10) {
    console.log('ランクが10より大きいです');
}              
</code>
</pre>
</body>
</html>

先ほどのcode要素を、pre要素でマークアップしました。

そして、ブラウザの表示結果の通り、code要素の中に記述したJavaScriptのプログラムコードは、「改行」された状態も維持して表示されております。

pre要素を使う際の注意点

ここで、pre要素を使った複数の例を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>code要素、pre要素、var要素</title>
</head>
<body>
<pre>
<code>
const rank = 12;
if (rank > 10) {
    console.log('ランクが10より大きいです');
}              
</code>
</pre>
<pre>
    <code>
        const rank = 12;
        if (rank > 10) {
            console.log('ランクが10より大きいです');
        }              
    </code>
</pre>
</body>
</html>

pre要素とcode要素とを併用する場合について、pre要素の中のプログラムコードに、インデントを含んでいる状態とインデントを含んでいない状態とにおける、ブラウザの表示結果を見比べてみます。

HTMLには、pre要素が2つ含まれております。

1つ目のpre要素を使用した部分では、ブラウザの表示結果について、プログラムコードがブラウザの表示領域の左側に寄った状態で表示されています。

これは、HTMLにて記述された状態の通り、記述されたコードの横方向において、pre要素とプログラムコードの最初のコード(const)とが、同じ位置に記述されているため、プログラムコードがブラウザの表示領域の左側に寄った状態で表示されたことになります。

一方、2つ目のpre要素を使用した部分では、プログラムコードがブラウザの表示領域の左側から右側に移動した状態で表示されています。

これは、HTMLにて記述された状態の通り、記述されたコードの横方向において、pre要素の記述された位置から、右側に向けて2回のインデントを使って、プログラムコードの最初のコード(const)が移動した状態となっているためです。

つまり、pre要素を使う際には、HTMLを記述した状態で、コードの横方向におけるpre要素とプログラムコードとの位置関係に注意する必要があるわけです。

変数を示すvar要素の使い方

変数を示すvar要素を使う例についても紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>code要素、pre要素、var要素</title>
</head>
<body>
<pre>
<code>
const <var>rank</var> = 12;
if (<var>rank</var> > 10) {
    console.log('ランクが10より大きいです');
}              
</code>
</pre>
</body>
</html>

先ほどから紹介しているJavaScriptのプログラムコードでは、プログラムコードの中のrankが「変数」として記述されております。

そのため、rankをvar要素でマークアップしました。

ブラウザでの表示結果に示す通り、rankの文字が斜体として表示され、変数であることを示すことができました。

各種ブラウザでの表示結果

code要素、pre要素、var要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
code要素
pre要素
var要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、code要素、pre要素、var要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました