VIDEO LESSON

HTMLのcodeタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:31動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の九十五本目は、コードタグです。
0:08コードは、ソースコードやファイル名など、コンピューター上の表記を示す要素です。
0:13説明文の中で、関数名やコマンド、ファイル名だけを周りと区別したいとき、その部分をコードで囲みます。
0:21多くのブラウザーでは等幅フォントで表示されるため、普通の文章との違いがひと目で分かります。
0:27今回は、コードの意味、プレとの組み合わせ、基本の使い方、エスケープの注意、
0:33コード例、ブラウザー互換性、そしてよくある間違いまで、順番に確認します。
0:38まず、コードの役割を整理します。
0:40コードは、ここはプログラムに関わる表記です、と意味で伝えるための要素です。
0:46たとえば関数名、変数名、コマンド、ファイル名、短いコードの断片などが対象になります。
0:53画面の例では、キー操作に近い表記とファイル名を、それぞれコードで囲んでいます。
0:59大切なのは、等幅フォントにしたいから使うのではありません。
1:03見た目を変えたいだけならシーエスエスで対応し、内容が本当にコードに関わる表記かどうかで判断します。
1:11強調したい文章や、普通の固有名詞まで何でもコードで囲むのは、意味がずれてしまうため避けましょう。
1:18コードの書き方と配置を確認します。
1:21コードは、開始タグと終了タグをセットで書き、その間にコードとして示したい文字を入れます。
1:27空要素ではないので、終了タグの書き忘れに注意してください。
1:31コードは文章の流れの中に置けるインラインの要素で、段落や見出し、リストの中などに自然に入れられます。
1:38記事の例でも、段落の中でファイル名だけをコードで囲んでいます。
1:42特定の要素の中にしか置けない、といった強い制限は基本の使い方ではありませんが、
1:47周りの文章の構造を崩さないよう、段落の中の必要な範囲だけを囲むのが基本です。
1:53意味を持つタグの選択と、見た目の指定は分けて考えましょう。
1:57ここがコードで最も重要なポイント、プレとの組み合わせです。
2:01コード単体では、ソースに書いた改行や連続した空白は保持されません。
2:06通常の文章と同じように、改行は一つの空白のように扱われてしまいます。
2:12一方、プレは整形済みテキストを表し、改行や空白、インデントをそのまま表示します。
2:18そこで複数行のコードでは、プレで全体を囲み、その内側にコードを置く形が定番になります。
2:25プレが改行や空白という表示の形を担当し、コードがこれはプログラムのコードですという意味を担当する、
2:30という役割分担です。
2:34短い一行だけならコード単体で十分です。
2:37基本のコード例を見ていきます。
2:40記事の活用事例のテーマは、ファイル名と複数行コードを書き分けることです。
2:45まず文中の短い表記です。
2:47画面のように、インデックスエイチティーエムエルというファイル名を、段落の中でコードで囲みます。
2:54これだけで、これは普通の単語ではなくファイル名だ、と読み手にもプログラムにも伝わります。
3:01関数名やコマンドも同じ書き方です。
3:03逆に言えば、文章全体をコードで囲む必要はありません。
3:07必要な部分だけを囲むことで、文章の読みやすさと、コード部分の分かりやすさが両立します。
3:14まずはこの一行の使い方をしっかり身に付けましょう。
3:17記事の活用例のもう半分、複数行コードの書き方です。
3:21画面の例では、プレの中にコードを置き、その中にコンソールログの二行を書いています。
3:27プレのおかげで改行がそのまま残り、コードらしい形で表示されます。
3:32二つ目の例のように、クラスで言語名を示す書き方もよく見られます。
3:37これはシンタックスハイライトなどの仕組みと組み合わせるための目印で、コード要素自体に専用の言語属性があるわけではありません。
3:46長い行がある場合は、画面からはみ出さないよう、シーエスエスで横スクロールを許すなどの配慮も必要です。
3:54保存後は再読み込みし、開発者ツールで構造を確認しましょう。
3:58エスケープの注意です。
4:00コードとして表示したい内容の中に、小なり記号や大なり記号が含まれている場合、
4:03そのまま書いてはいけません。
4:07ブラウザーはそれをエイチティーエムエルのタグの始まりだと解釈してしまい、
4:11表示が崩れたり、内容が消えたように見えたりします。
4:16そこで、小なりはアンドエルティーセミコロン、大なりはアンドジーティーセミコロン、
4:21アンド記号自体はアンドエーエムピーセミコロン、という形に置き換えて書きます。
4:27これがエスケープです。
4:29貼り付けたコードが実行されたり、タグとして解釈されたりしないようにするための、
4:33コード表示では欠かせない手順です。
4:37画面のオッケーの例の書き方を覚えてください。
4:40属性について確認します。
4:42コードには、この要素専用の必須属性はありません。
4:45必要に応じて、アイディー、クラス、ラングなどの共通属性を使います。
4:50クラスは特に実務でよく使い、言語の目印を付けたり、シーエスエスでまとめて見た目を整えたりするときに役立ちます。
4:59画面の例では、シーエスエスでコードに薄い背景と少しの余白を付けて、文章の中で見つけやすくしています。
5:06ただし、色や背景を付けても要素の意味は変わりません。
5:10クラスで見た目を変えることと、その部分がコードであるという意味は、別の話として分けて考えてください。
5:18データスター属性に秘密情報を置かない点も共通です。
5:22関連する要素との使い分けも押さえておきます。
5:25利用者が押すキーや入力する内容を示すときは、ケービーディーのキーボード入力要素が適しています。
5:33プログラムが出力した結果を示すときは、サンプの出力要素を使います。
5:38数式やプログラムの中の変数そのものを示すときは、バーの変数要素が担当します。
5:45そして、コードはソースコード全般やファイル名などの表記を受け持ちます。
5:50見た目が似ていても、意味が違う要素が用意されているのがエイチティーエムエルの特徴です。
5:57何を伝えたいのかを先に考え、その意味に合った要素を選ぶと、読み手にも支援技術にも正しく伝わります。
6:05ブラウザー互換性を確認します。
6:07記事が紹介するエムディーエヌのデータでは、コード要素本体は、クロームが一以降、
6:13エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。
6:19かなり古くから使われてきた基本要素なので、現在の主要ブラウザーでは安心して使えると考えてよいでしょう。
6:26プレと組み合わせた複数行コードの表示も、広く対応しています。
6:30ただし、この表は要素本体の対応を示すもので、クラスを使った色付け表示などの追加の仕組みまで保証するものではありません。
6:39新しい仕組みを組み合わせる場合は、その対応状況を別に確認してください。
6:44まとめとして、よくある間違いを三つ挙げます。
6:47一つ目は、複数行のコードなのにプレで囲まず、改行が消えて一行に詰まってしまうことです。
6:54複数行ならプレとコードの組み合わせを使ってください。
6:58二つ目は、コード中の小なりや大なりをエスケープせずに書き、タグとして解釈されてしまうことです。
7:05三つ目は、等幅フォントにしたいだけの理由で、コードではない文章までコードで囲んでしまうことです。
7:13意味で選ぶ、という原則を思い出してください。
7:16コードは、ソースコードやファイル名など、コンピューター上の表記を示す要素です。
7:22これでコードタグの解説を終わります。
7:25ぜひ、自分のページでファイル名を囲む練習から始めてみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

codeタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。ソースコードやファイル名など、コンピューター上の表記です。

解説記事・サンプルコードを読む：HTMLのcodeタグとは？属性・使い方・ブラウザー互換性と活用例 →