WEBVTT

1
00:00:00.000 --> 00:00:00.881
こんにちは。

2
00:00:00.881 --> 00:00:03.963
エイチティーエムエルリファレンス解説です。

3
00:00:03.963 --> 00:00:08.219
エイチティーエムエルタグ編の九十五本目は、コードタグです。

4
00:00:08.219 --> 00:00:13.943
コードは、ソースコードやファイル名など、コンピューター上の表記を示す要素です。

5
00:00:13.943 --> 00:00:21.134
説明文の中で、関数名やコマンド、ファイル名だけを周りと区別したいとき、その部分をコードで囲みます。

6
00:00:21.134 --> 00:00:27.738
多くのブラウザーでは等幅フォントで表示されるため、普通の文章との違いがひと目で分かります。

7
00:00:27.738 --> 00:00:33.095
今回は、コードの意味、プレとの組み合わせ、基本の使い方、エスケープの注意、

8
00:00:33.095 --> 00:00:38.452
コード例、ブラウザー互換性、そしてよくある間違いまで、順番に確認します。

9
00:00:38.452 --> 00:00:40.947
まず、コードの役割を整理します。

10
00:00:40.947 --> 00:00:46.716
コードは、ここはプログラムに関わる表記です、と意味で伝えるための要素です。

11
00:00:46.716 --> 00:00:53.265
たとえば関数名、変数名、コマンド、ファイル名、短いコードの断片などが対象になります。

12
00:00:53.265 --> 00:00:59.346
画面の例では、キー操作に近い表記とファイル名を、それぞれコードで囲んでいます。

13
00:00:59.346 --> 00:01:03.867
大切なのは、等幅フォントにしたいから使うのではありません。

14
00:01:03.867 --> 00:01:11.508
見た目を変えたいだけならシーエスエスで対応し、内容が本当にコードに関わる表記かどうかで判断します。

15
00:01:11.508 --> 00:01:18.992
強調したい文章や、普通の固有名詞まで何でもコードで囲むのは、意味がずれてしまうため避けましょう。

16
00:01:18.992 --> 00:01:21.328
コードの書き方と配置を確認します。

17
00:01:21.328 --> 00:01:27.375
コードは、開始タグと終了タグをセットで書き、その間にコードとして示したい文字を入れます。

18
00:01:27.375 --> 00:01:31.361
空要素ではないので、終了タグの書き忘れに注意してください。

19
00:01:31.361 --> 00:01:38.232
コードは文章の流れの中に置けるインラインの要素で、段落や見出し、リストの中などに自然に入れられます。

20
00:01:38.232 --> 00:01:42.492
記事の例でも、段落の中でファイル名だけをコードで囲んでいます。

21
00:01:42.492 --> 00:01:47.784
特定の要素の中にしか置けない、といった強い制限は基本の使い方ではありませんが、

22
00:01:47.784 --> 00:01:53.075
周りの文章の構造を崩さないよう、段落の中の必要な範囲だけを囲むのが基本です。

23
00:01:53.075 --> 00:01:57.060
意味を持つタグの選択と、見た目の指定は分けて考えましょう。

24
00:01:57.060 --> 00:02:01.656
ここがコードで最も重要なポイント、プレとの組み合わせです。

25
00:02:01.656 --> 00:02:06.886
コード単体では、ソースに書いた改行や連続した空白は保持されません。

26
00:02:06.886 --> 00:02:12.275
通常の文章と同じように、改行は一つの空白のように扱われてしまいます。

27
00:02:12.275 --> 00:02:18.615
一方、プレは整形済みテキストを表し、改行や空白、インデントをそのまま表示します。

28
00:02:18.615 --> 00:02:25.430
そこで複数行のコードでは、プレで全体を囲み、その内側にコードを置く形が定番になります。

29
00:02:25.430 --> 00:02:30.105
プレが改行や空白という表示の形を担当し、コードがこれはプログラムのコードですという意味を担当する、

30
00:02:30.105 --> 00:02:34.781
という役割分担です。

31
00:02:34.781 --> 00:02:37.792
短い一行だけならコード単体で十分です。

32
00:02:37.792 --> 00:02:40.060
基本のコード例を見ていきます。

33
00:02:40.060 --> 00:02:45.502
記事の活用事例のテーマは、ファイル名と複数行コードを書き分けることです。

34
00:02:45.502 --> 00:02:47.316
まず文中の短い表記です。

35
00:02:47.316 --> 00:02:54.421
画面のように、インデックスエイチティーエムエルというファイル名を、段落の中でコードで囲みます。

36
00:02:54.421 --> 00:03:01.072
これだけで、これは普通の単語ではなくファイル名だ、と読み手にもプログラムにも伝わります。

37
00:03:01.072 --> 00:03:03.642
関数名やコマンドも同じ書き方です。

38
00:03:03.642 --> 00:03:07.572
逆に言えば、文章全体をコードで囲む必要はありません。

39
00:03:07.572 --> 00:03:14.073
必要な部分だけを囲むことで、文章の読みやすさと、コード部分の分かりやすさが両立します。

40
00:03:14.073 --> 00:03:17.852
まずはこの一行の使い方をしっかり身に付けましょう。

41
00:03:17.852 --> 00:03:21.614
記事の活用例のもう半分、複数行コードの書き方です。

42
00:03:21.614 --> 00:03:27.784
画面の例では、プレの中にコードを置き、その中にコンソールログの二行を書いています。

43
00:03:27.784 --> 00:03:32.599
プレのおかげで改行がそのまま残り、コードらしい形で表示されます。

44
00:03:32.599 --> 00:03:37.414
二つ目の例のように、クラスで言語名を示す書き方もよく見られます。

45
00:03:37.414 --> 00:03:46.744
これはシンタックスハイライトなどの仕組みと組み合わせるための目印で、コード要素自体に専用の言語属性があるわけではありません。

46
00:03:46.744 --> 00:03:54.268
長い行がある場合は、画面からはみ出さないよう、シーエスエスで横スクロールを許すなどの配慮も必要です。

47
00:03:54.268 --> 00:03:58.632
保存後は再読み込みし、開発者ツールで構造を確認しましょう。

48
00:03:58.632 --> 00:04:00.203
エスケープの注意です。

49
00:04:00.203 --> 00:04:03.915
コードとして表示したい内容の中に、小なり記号や大なり記号が含まれている場合、

50
00:04:03.915 --> 00:04:07.627
そのまま書いてはいけません。

51
00:04:07.627 --> 00:04:11.982
ブラウザーはそれをエイチティーエムエルのタグの始まりだと解釈してしまい、

52
00:04:11.982 --> 00:04:16.336
表示が崩れたり、内容が消えたように見えたりします。

53
00:04:16.336 --> 00:04:21.905
そこで、小なりはアンドエルティーセミコロン、大なりはアンドジーティーセミコロン、

54
00:04:21.905 --> 00:04:27.473
アンド記号自体はアンドエーエムピーセミコロン、という形に置き換えて書きます。

55
00:04:27.473 --> 00:04:29.043
これがエスケープです。

56
00:04:29.043 --> 00:04:33.041
貼り付けたコードが実行されたり、タグとして解釈されたりしないようにするための、

57
00:04:33.041 --> 00:04:37.039
コード表示では欠かせない手順です。

58
00:04:37.039 --> 00:04:40.180
画面のオッケーの例の書き方を覚えてください。

59
00:04:40.180 --> 00:04:42.014
属性について確認します。

60
00:04:42.014 --> 00:04:45.682
コードには、この要素専用の必須属性はありません。

61
00:04:45.682 --> 00:04:50.725
必要に応じて、アイディー、クラス、ラングなどの共通属性を使います。

62
00:04:50.725 --> 00:04:59.131
クラスは特に実務でよく使い、言語の目印を付けたり、シーエスエスでまとめて見た目を整えたりするときに役立ちます。

63
00:04:59.131 --> 00:05:06.772
画面の例では、シーエスエスでコードに薄い背景と少しの余白を付けて、文章の中で見つけやすくしています。

64
00:05:06.772 --> 00:05:10.746
ただし、色や背景を付けても要素の意味は変わりません。

65
00:05:10.746 --> 00:05:18.387
クラスで見た目を変えることと、その部分がコードであるという意味は、別の話として分けて考えてください。

66
00:05:18.387 --> 00:05:22.208
データスター属性に秘密情報を置かない点も共通です。

67
00:05:22.208 --> 00:05:25.790
関連する要素との使い分けも押さえておきます。

68
00:05:25.790 --> 00:05:33.441
利用者が押すキーや入力する内容を示すときは、ケービーディーのキーボード入力要素が適しています。

69
00:05:33.441 --> 00:05:38.814
プログラムが出力した結果を示すときは、サンプの出力要素を使います。

70
00:05:38.814 --> 00:05:45.000
数式やプログラムの中の変数そのものを示すときは、バーの変数要素が担当します。

71
00:05:45.000 --> 00:05:50.698
そして、コードはソースコード全般やファイル名などの表記を受け持ちます。

72
00:05:50.698 --> 00:05:57.699
見た目が似ていても、意味が違う要素が用意されているのがエイチティーエムエルの特徴です。

73
00:05:57.699 --> 00:06:05.676
何を伝えたいのかを先に考え、その意味に合った要素を選ぶと、読み手にも支援技術にも正しく伝わります。

74
00:06:05.676 --> 00:06:07.806
ブラウザー互換性を確認します。

75
00:06:07.806 --> 00:06:13.627
記事が紹介するエムディーエヌのデータでは、コード要素本体は、クロームが一以降、

76
00:06:13.627 --> 00:06:19.449
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。

77
00:06:19.449 --> 00:06:26.690
かなり古くから使われてきた基本要素なので、現在の主要ブラウザーでは安心して使えると考えてよいでしょう。

78
00:06:26.690 --> 00:06:30.949
プレと組み合わせた複数行コードの表示も、広く対応しています。

79
00:06:30.949 --> 00:06:39.327
ただし、この表は要素本体の対応を示すもので、クラスを使った色付け表示などの追加の仕組みまで保証するものではありません。

80
00:06:39.327 --> 00:06:44.296
新しい仕組みを組み合わせる場合は、その対応状況を別に確認してください。

81
00:06:44.296 --> 00:06:47.726
まとめとして、よくある間違いを三つ挙げます。

82
00:06:47.726 --> 00:06:54.429
一つ目は、複数行のコードなのにプレで囲まず、改行が消えて一行に詰まってしまうことです。

83
00:06:54.429 --> 00:06:58.482
複数行ならプレとコードの組み合わせを使ってください。

84
00:06:58.482 --> 00:07:05.809
二つ目は、コード中の小なりや大なりをエスケープせずに書き、タグとして解釈されてしまうことです。

85
00:07:05.809 --> 00:07:13.292
三つ目は、等幅フォントにしたいだけの理由で、コードではない文章までコードで囲んでしまうことです。

86
00:07:13.292 --> 00:07:16.722
意味で選ぶ、という原則を思い出してください。

87
00:07:16.722 --> 00:07:22.801
コードは、ソースコードやファイル名など、コンピューター上の表記を示す要素です。

88
00:07:22.801 --> 00:07:25.607
これでコードタグの解説を終わります。

89
00:07:25.607 --> 00:07:30.596
ぜひ、自分のページでファイル名を囲む練習から始めてみてください。