WEBVTT

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

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

3
00:00:03.911 --> 00:00:06.984
HTMLタグ編の三十九本目は、プリタグです。

4
00:00:06.984 --> 00:00:11.174
プリは、整形済みという意味の英語の略で、ソースに書いた改行や空白、字下げを、

5
00:00:11.174 --> 00:00:15.364
そのままの形で画面に表示するためのタグです。

6
00:00:15.364 --> 00:00:19.694
ふつうの段落では詰まってしまう空白も、プリの中では保たれます。

7
00:00:19.694 --> 00:00:26.817
今回は、基本の書き方から、コードタグとの組み合わせ、記号の書き換えの注意点までを順に確認していきます。

8
00:00:26.817 --> 00:00:33.661
形そのものに意味がある文章を扱うときに欠かせないタグですので、使いどころをしっかり押さえましょう。

9
00:00:33.661 --> 00:00:39.388
コード例の見え方がなぜ崩れないのか、その理由もこのタグを知るとはっきり分かります。

10
00:00:39.388 --> 00:00:43.505
どんな場面で使うのか、具体例から考えてみましょう。

11
00:00:43.505 --> 00:00:46.798
代表的なのは、プログラムのコード例です。

12
00:00:46.798 --> 00:00:53.055
コードは字下げや改行位置に意味があるため、形を崩さずに見せる必要があります。

13
00:00:53.055 --> 00:00:59.066
ほかに、行ごとに区切られた詩、空白で形を作る文字の図、簡単な表のような並びなど、

14
00:00:59.066 --> 00:01:05.076
見た目の配置そのものが内容の一部になっている文章にも向いています。

15
00:01:05.076 --> 00:01:10.839
反対に、ふつうの説明文や段落にまで何でもプリを使うのは避けてください。

16
00:01:10.839 --> 00:01:17.261
改行位置が固定されると、画面幅に合わせた読みやすい折り返しができなくなります。

17
00:01:17.261 --> 00:01:21.049
形を保つ必要があるかどうかが、判断の基準です。

18
00:01:21.049 --> 00:01:27.800
エディターで整えた見た目をそのまま届けたい、そんな要望に応えるのがプリの強みです。

19
00:01:27.800 --> 00:01:29.658
基本の書き方を確認します。

20
00:01:29.658 --> 00:01:35.087
プリタグには開始タグと終了タグがあり、その間に表示したいテキストを書きます。

21
00:01:35.087 --> 00:01:40.946
スライドの例では、二行目の先頭に置いた空白による字下げも、そのまま画面に残ります。

22
00:01:40.946 --> 00:01:45.804
改行した位置で実際に改行され、連続した空白も一つにまとめられません。

23
00:01:45.804 --> 00:01:53.520
もう一つの特徴は、多くのブラウザーで等幅フォント、つまりすべての文字の幅がそろった書体で表示されることです。

24
00:01:53.520 --> 00:01:58.664
そのため文字の位置が縦にもそろいやすく、コードや図の表示に向いています。

25
00:01:58.664 --> 00:02:04.380
まずは短い文章で、書いた形と表示が一致することを自分の目で確かめてみてください。

26
00:02:04.380 --> 00:02:08.417
段落を示すピータグとの違いを比べてみましょう。

27
00:02:08.417 --> 00:02:17.370
ピータグの中では、ソースで改行しても画面では続けて表示され、連続した空白も一つの空白にまとめられます。

28
00:02:17.370 --> 00:02:22.811
これは、文章を画面幅に合わせて自然に折り返すための仕組みです。

29
00:02:22.811 --> 00:02:30.184
一方プリタグでは、改行も空白も書いたとおりに保たれ、折り返しも基本的に行われません。

30
00:02:30.184 --> 00:02:37.556
つまりピーは流れる文章用、プリは形が決まったテキスト用、という役割の違いがあります。

31
00:02:37.556 --> 00:02:48.088
見た目を整えたいからという理由だけでプリを選ぶのではなく、そのテキストが本当に整形済みの内容かどうかで判断してください。

32
00:02:48.088 --> 00:02:54.584
コード例を表示するときは、コードタグと組み合わせるのが標準的な書き方です。

33
00:02:54.584 --> 00:02:59.938
役割分担はシンプルで、プリが改行や字下げという形を保ち、コードがこの中身はプログラムのコードである、

34
00:02:59.938 --> 00:03:05.293
という意味を伝えます。

35
00:03:05.293 --> 00:03:10.208
スライドの例のように、プリの中にコードを入れ子にします。

36
00:03:10.208 --> 00:03:18.284
実務では、コードタグのクラスに言語名を付けて、色付けの仕組みと連携させることもよくあります。

37
00:03:18.284 --> 00:03:25.482
なお、短いコードを文中に一語だけ示す場合は、プリは使わずコードタグだけで十分です。

38
00:03:25.482 --> 00:03:31.100
複数行にわたるかどうかが、組み合わせるかどうかの目安になります。

39
00:03:31.100 --> 00:03:33.210
ここが最も大切な注意点です。

40
00:03:33.210 --> 00:03:38.183
プリの中に書いても、エイチティーエムエルの解析は無効になりません。

41
00:03:38.183 --> 00:03:46.320
たとえば見出しタグをそのまま書くと、文字として表示されるのではなく、本物の見出しとして解釈されてしまいます。

42
00:03:46.320 --> 00:03:50.238
タグを文字として見せたいときは、山括弧の記号を専用の書き方に置き換える、

43
00:03:50.238 --> 00:03:54.156
エスケープという作業が必要です。

44
00:03:54.156 --> 00:04:00.486
小なり記号はアンパサンド、エル、ティー、セミコロン、大なり記号も同様に置き換えます。

45
00:04:00.486 --> 00:04:04.856
アンド記号自体も、アンパサンドから始まる書き方に変えます。

46
00:04:04.856 --> 00:04:12.240
この一手間を忘れると表示が大きく崩れるので、コード例を載せるときの必須の手順として覚えてください。

47
00:04:12.240 --> 00:04:14.212
属性について整理します。

48
00:04:14.212 --> 00:04:18.319
プリタグには、この要素だけの専用属性はありません。

49
00:04:18.319 --> 00:04:22.426
代わりに、どの要素でも使える共通属性を利用します。

50
00:04:22.426 --> 00:04:28.094
アイディーは要素を一つだけ特定する目印、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、

51
00:04:28.094 --> 00:04:33.762
ラングは内容の言語を示す指定です。

52
00:04:33.762 --> 00:04:37.048
独自の値を保持するデータ属性も使えます。

53
00:04:37.048 --> 00:04:41.649
つまりプリは、属性で何かを設定するタグではなく、中のテキストの形を保つことに集中した、

54
00:04:41.649 --> 00:04:46.249
とてもシンプルな要素です。

55
00:04:46.249 --> 00:04:52.492
色や余白を変えたい場合は属性ではなく、次に紹介するシーエスエスで調整します。

56
00:04:52.492 --> 00:04:54.897
見た目はシーエスエスで整えます。

57
00:04:54.897 --> 00:04:57.604
特に重要なのが、長い行への対策です。

58
00:04:57.604 --> 00:05:03.467
プリは折り返しをしないため、長いコード行があると画面からはみ出してしまいます。

59
00:05:03.467 --> 00:05:10.834
そこでオーバーフローエックスにオートを指定し、プリの領域の中だけで横スクロールできるようにします。

60
00:05:10.834 --> 00:05:16.847
スマートフォンでも、ページ全体が横にずれることなくコードを読めるようになります。

61
00:05:16.847 --> 00:05:24.364
ほかには、背景色を薄く付けたり、内側に余白を持たせたりすると、本文との区切りが分かりやすくなります。

62
00:05:24.364 --> 00:05:31.280
フォントサイズを少し小さめに整える例も多いですが、読みにくくならない範囲にとどめてください。

63
00:05:31.280 --> 00:05:34.023
使うときの注意点を三つ挙げます。

64
00:05:34.023 --> 00:05:39.679
一つ目、開始タグの直後に入れた最初の改行は、表示に反映されません。

65
00:05:39.679 --> 00:05:44.736
コードをきれいに改行して書き始めても、一行目が詰まって見えることがあるため、

66
00:05:44.736 --> 00:05:49.792
意図と違う場合は書き方を調整してください。

67
00:05:49.792 --> 00:05:55.791
二つ目、長い行や大きな空白は、そのままレイアウト崩れの原因になります。

68
00:05:55.791 --> 00:06:00.762
前のセクションの横スクロール対策と合わせて確認しましょう。

69
00:06:00.762 --> 00:06:07.276
三つ目、余白を空けるためだけなど、見た目の配置目的でプリを使わないことです。

70
00:06:07.276 --> 00:06:17.217
意味としては整形済みテキストである場合にだけ使う、という原則を守ると、読み手にも検索や支援技術にも正しく伝わります。

71
00:06:17.217 --> 00:06:24.588
タブ文字の幅も環境で変わるため、空白でそろえるほうが意図が伝わりやすい場合があります。

72
00:06:24.588 --> 00:06:26.726
ブラウザー互換性を確認します。

73
00:06:26.726 --> 00:06:31.573
記事が参照するエムディーエヌの記録では、プリタグはクロームがバージョン一以降、

74
00:06:31.573 --> 00:06:36.419
エッジが十二以降、ファイアフォックスが一以降、サファリがバージョン四以前からと、

75
00:06:36.419 --> 00:06:41.266
主要ブラウザーで非常に古くから対応しています。

76
00:06:41.266 --> 00:06:49.534
エイチティーエムエルの初期からある基本要素の一つですので、対応状況を心配して使用をためらう必要はほとんどありません。

77
00:06:49.534 --> 00:06:56.233
ただし、等幅フォントの種類や余白といった細かな見え方はブラウザーや環境で異なる場合があります。

78
00:06:56.233 --> 00:07:03.361
公開前には、対象のブラウザーとスマートフォンで、行がはみ出していないかを一度確認しておくと安心です。

79
00:07:03.361 --> 00:07:08.920
古いブラウザーを対象に含める場合でも、プリ自体は安心して使える要素と言えます。

80
00:07:08.920 --> 00:07:10.452
最後にまとめです。

81
00:07:10.452 --> 00:07:19.471
プリタグは、改行や空白、字下げといった形そのものに意味がある、整形済みテキストを表示するためのタグでした。

82
00:07:19.471 --> 00:07:21.172
ポイントは三つです。

83
00:07:21.172 --> 00:07:28.490
一つ目、ふつうの文章にはピータグ、形を保ちたい内容にプリタグ、と意味で使い分けること。

84
00:07:28.490 --> 00:07:36.488
二つ目、複数行のコード例ではコードタグと組み合わせ、山括弧などの記号は必ずエスケープすること。

85
00:07:36.488 --> 00:07:44.997
三つ目、長い行に備えて横スクロールのシーエスエスを用意し、スマートフォンでも読める形にすることです。

86
00:07:44.997 --> 00:07:52.144
練習として、字下げ入りの短いコードをプリとコードで書き、表示を確認してみてください。

87
00:07:52.144 --> 00:07:53.676
お疲れさまでした。

88
00:07:53.676 --> 00:07:58.100
次回は、画像を出し分けるピクチャータグを解説します。