VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の三十九本目は、プリタグです。
0:06プリは、整形済みという意味の英語の略で、ソースに書いた改行や空白、字下げを、
0:11そのままの形で画面に表示するためのタグです。
0:15ふつうの段落では詰まってしまう空白も、プリの中では保たれます。
0:19今回は、基本の書き方から、コードタグとの組み合わせ、記号の書き換えの注意点までを順に確認していきます。
0:26形そのものに意味がある文章を扱うときに欠かせないタグですので、使いどころをしっかり押さえましょう。
0:33コード例の見え方がなぜ崩れないのか、その理由もこのタグを知るとはっきり分かります。
0:39どんな場面で使うのか、具体例から考えてみましょう。
0:43代表的なのは、プログラムのコード例です。
0:46コードは字下げや改行位置に意味があるため、形を崩さずに見せる必要があります。
0:53ほかに、行ごとに区切られた詩、空白で形を作る文字の図、簡単な表のような並びなど、
0:59見た目の配置そのものが内容の一部になっている文章にも向いています。
1:05反対に、ふつうの説明文や段落にまで何でもプリを使うのは避けてください。
1:10改行位置が固定されると、画面幅に合わせた読みやすい折り返しができなくなります。
1:17形を保つ必要があるかどうかが、判断の基準です。
1:21エディターで整えた見た目をそのまま届けたい、そんな要望に応えるのがプリの強みです。
1:27基本の書き方を確認します。
1:29プリタグには開始タグと終了タグがあり、その間に表示したいテキストを書きます。
1:35スライドの例では、二行目の先頭に置いた空白による字下げも、そのまま画面に残ります。
1:40改行した位置で実際に改行され、連続した空白も一つにまとめられません。
1:45もう一つの特徴は、多くのブラウザーで等幅フォント、つまりすべての文字の幅がそろった書体で表示されることです。
1:53そのため文字の位置が縦にもそろいやすく、コードや図の表示に向いています。
1:58まずは短い文章で、書いた形と表示が一致することを自分の目で確かめてみてください。
2:04段落を示すピータグとの違いを比べてみましょう。
2:08ピータグの中では、ソースで改行しても画面では続けて表示され、連続した空白も一つの空白にまとめられます。
2:17これは、文章を画面幅に合わせて自然に折り返すための仕組みです。
2:22一方プリタグでは、改行も空白も書いたとおりに保たれ、折り返しも基本的に行われません。
2:30つまりピーは流れる文章用、プリは形が決まったテキスト用、という役割の違いがあります。
2:37見た目を整えたいからという理由だけでプリを選ぶのではなく、そのテキストが本当に整形済みの内容かどうかで判断してください。
2:48コード例を表示するときは、コードタグと組み合わせるのが標準的な書き方です。
2:54役割分担はシンプルで、プリが改行や字下げという形を保ち、コードがこの中身はプログラムのコードである、
2:59という意味を伝えます。
3:05スライドの例のように、プリの中にコードを入れ子にします。
3:10実務では、コードタグのクラスに言語名を付けて、色付けの仕組みと連携させることもよくあります。
3:18なお、短いコードを文中に一語だけ示す場合は、プリは使わずコードタグだけで十分です。
3:25複数行にわたるかどうかが、組み合わせるかどうかの目安になります。
3:31ここが最も大切な注意点です。
3:33プリの中に書いても、エイチティーエムエルの解析は無効になりません。
3:38たとえば見出しタグをそのまま書くと、文字として表示されるのではなく、本物の見出しとして解釈されてしまいます。
3:46タグを文字として見せたいときは、山括弧の記号を専用の書き方に置き換える、
3:50エスケープという作業が必要です。
3:54小なり記号はアンパサンド、エル、ティー、セミコロン、大なり記号も同様に置き換えます。
4:00アンド記号自体も、アンパサンドから始まる書き方に変えます。
4:04この一手間を忘れると表示が大きく崩れるので、コード例を載せるときの必須の手順として覚えてください。
4:12属性について整理します。
4:14プリタグには、この要素だけの専用属性はありません。
4:18代わりに、どの要素でも使える共通属性を利用します。
4:22アイディーは要素を一つだけ特定する目印、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、
4:28ラングは内容の言語を示す指定です。
4:33独自の値を保持するデータ属性も使えます。
4:37つまりプリは、属性で何かを設定するタグではなく、中のテキストの形を保つことに集中した、
4:41とてもシンプルな要素です。
4:46色や余白を変えたい場合は属性ではなく、次に紹介するシーエスエスで調整します。
4:52見た目はシーエスエスで整えます。
4:54特に重要なのが、長い行への対策です。
4:57プリは折り返しをしないため、長いコード行があると画面からはみ出してしまいます。
5:03そこでオーバーフローエックスにオートを指定し、プリの領域の中だけで横スクロールできるようにします。
5:10スマートフォンでも、ページ全体が横にずれることなくコードを読めるようになります。
5:16ほかには、背景色を薄く付けたり、内側に余白を持たせたりすると、本文との区切りが分かりやすくなります。
5:24フォントサイズを少し小さめに整える例も多いですが、読みにくくならない範囲にとどめてください。
5:31使うときの注意点を三つ挙げます。
5:34一つ目、開始タグの直後に入れた最初の改行は、表示に反映されません。
5:39コードをきれいに改行して書き始めても、一行目が詰まって見えることがあるため、
5:44意図と違う場合は書き方を調整してください。
5:49二つ目、長い行や大きな空白は、そのままレイアウト崩れの原因になります。
5:55前のセクションの横スクロール対策と合わせて確認しましょう。
6:00三つ目、余白を空けるためだけなど、見た目の配置目的でプリを使わないことです。
6:07意味としては整形済みテキストである場合にだけ使う、という原則を守ると、読み手にも検索や支援技術にも正しく伝わります。
6:17タブ文字の幅も環境で変わるため、空白でそろえるほうが意図が伝わりやすい場合があります。
6:24ブラウザー互換性を確認します。
6:26記事が参照するエムディーエヌの記録では、プリタグはクロームがバージョン一以降、
6:31エッジが十二以降、ファイアフォックスが一以降、サファリがバージョン四以前からと、
6:36主要ブラウザーで非常に古くから対応しています。
6:41エイチティーエムエルの初期からある基本要素の一つですので、対応状況を心配して使用をためらう必要はほとんどありません。
6:49ただし、等幅フォントの種類や余白といった細かな見え方はブラウザーや環境で異なる場合があります。
6:56公開前には、対象のブラウザーとスマートフォンで、行がはみ出していないかを一度確認しておくと安心です。
7:03古いブラウザーを対象に含める場合でも、プリ自体は安心して使える要素と言えます。
7:08最後にまとめです。
7:10プリタグは、改行や空白、字下げといった形そのものに意味がある、整形済みテキストを表示するためのタグでした。
7:19ポイントは三つです。
7:21一つ目、ふつうの文章にはピータグ、形を保ちたい内容にプリタグ、と意味で使い分けること。
7:28二つ目、複数行のコード例ではコードタグと組み合わせ、山括弧などの記号は必ずエスケープすること。
7:36三つ目、長い行に備えて横スクロールのシーエスエスを用意し、スマートフォンでも読める形にすることです。
7:44練習として、字下げ入りの短いコードをプリとコードで書き、表示を確認してみてください。
7:52お疲れさまでした。
7:53次回は、画像を出し分けるピクチャータグを解説します。

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

この動画で学べること

preタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。改行や空白を保って表示。コード例では code と組み合わせ、HTMLの記号はエスケープします。

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