神戸ホームページ制作プロ公式ブログ
6.202023
webデザイン用語「preタグ」を全部教えて！
こんにちは、ハナさん。WEBデザイン用語のpreタグについてお伝えします。 preタグは、”preformatted text” からきており、テキストを整形済みの状態で表示させるタグです。preタグを使用すると、コードなどの様式美を保ったまま、正確なテキスト表示を行えます。preタグを使用する時には、必要に応じてstyle属性を使用してスタイルを指定することができます。また、preタグの中には、他のHTMLタグを自由に入れることができます。このように、preタグは、WEBデザイナーにとって、重要なタグの1つです。今後、ぜひ学習に取り入れてみてくださいね。
このブログは、webデザイナーになりたい女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。
preタグとは何か？
ハナ：リュウさん、preタグって何ですか？
リュウ：preタグというのは、HTMLのコード内で表示される文章を規定するタグの一つですよ。テキストがどのように表示されるかを指定するために使われます。
例えば、コンピューターコードやプログラムのコードなど、特定の書式が必要な場合に使われます。
例えば、コンピューターコードやプログラムのコードなど、特定の書式が必要な場合に使われます。
ハナ：なるほど、わかりました！
リュウ：良かったですね。preタグはHTMLの基礎的なマークアップとして覚えておくといいですよ。
preタグの意味とは？
ハナ:リュウさん、preタグって何ですか？
リュウ:preタグは、HTMLのタグの一種で、プログラムのコードやテキストファイルの中身など、あらかじめ書かれた文章をそのまま表示するためのタグです。
ハナ:あー、わかりました！preって前置詞のpreじゃないんだね。
リュウ:そうですね。preはpreserve(保存する)から来ていると言われています。文章を保存して、そのまま表示するというイメージです。
preタグはどんな時に使うべきか？
ハナ：リュウさん、preタグってどういう時に使うの？
リュウ：preタグは、テキストの書式をそのまま保持するために使いますよ。例えば、コードやプログラムの表示などですね。通常のテキストと異なり、空白や改行もそのまま反映されます。
ハナ：そうなんですね。preタグって、文章が見やすくなるんですか？
リュウ：そうですね。preタグを使うことで、文章が整然と表示されるので読みやすくなります。ただし、preタグを使うと上手くレイアウトが決まらなかったり、レスポンシブ対応ができなかったりする場合もありますので、使いどころには注意が必要です。
preタグとcodeタグの違いは？
ハナ: リュウさん、preタグとcodeタグの違いって何ですか？
リュウ: ふふ、良い質問だね。preタグは、文字などの装飾をせずにそのまま表示するためのタグだよ。例えば、コードの表示に使われるんだ。一方、codeタグは、コンピューターの命令文など、特定のテキストを表示するときに使われるタグだね。具体的に言うと、ハイライトやフォントなどの特定の装飾ができるんだ。分かりやすいかな？
preタグの使い方は？
ハナ:リュウさん、preタグって何ですか？
リュウ:ねえ、ハナさん。preタグは、文章中に書かれたコードや空白を保持し、正確に表示することができるタグだよ。例えば、スペースや改行が細かく入ったコードを表示するときに使うと良いんだ。わかるかな？それとももう少し詳しく説明したほうがいいかな？
preタグで表示されるテキストの改行とスペースの扱い方は？
ハナ：preタグで表示されるテキストの改行とスペースの扱い方は？
リュウ：preタグは文字列のまま表示されるタグで、改行やスペースもそのまま反映されます。例えば、改行をしたい場合はbrタグではなく、改行文字を入力する必要があります。スペースもそのまま反映されますので、スペースが必要な場合はそのまま入力することで反映されます。何かわからないことがあったら、随時聞いてくださいね。
preタグの属性について教えて！
ハナ:リュウさん、preタグの属性って何ですか？
リュウ:ふむふむ、preタグの属性についてですね。preタグはプログラミングのコードなどを表示する時に使うタグで、属性とはそのタグに付ける情報のことです。例えば、そのコードの言語が何なのか、テキストの色やフォントを指定してあげることができますよ。わかりやすく言うと、お弁当箱に入れるおかずを選ぶ時に、そのおかずが何かを表す付箋のようなものだと思ってください。
preタグの属性であるtabindexは何をするためのものか？
ハナ: リュウさん、preタグの属性であるtabindexは何をするためのものなんですか？
リュウ: ほんとうにいい質問だね、ハナさん。tabindexは、ページ内の要素をキーボードでフォーカスしたときに、タブキーの順番を決めるためのものだよ。例えば、ウェブページに名前、郵便番号、住所の入力フォームがあった場合、「名前」をタブキーでフォーカスすると「郵便番号」に移って、次に「住所」に移るように、順序を指定するためのものだよ。わかったかな、ハナさん？
preタグの属性であるwrapは何をするためのものか？
ハナ：リュウさん、preタグの属性であるwrapは何をするためのものか教えてください。
リュウ：わかりました、ハナさん。preタグの属性であるwrapは、テキストを折り返す際の動作を指定するためのものです。指定する値によって、テキストが折り返されるか、またどのように折り返されるかが変わってきますよ。例えば、wrap属性をoffにすると、テキストが行末にあっても折り返されず、そのまま表示されます。一方で、wrap属性をonにすることで、テキストが指定された幅に収まらなくなった場合に自動的に折り返されます。いかがでしょうか？
preタグには閉じタグが必要なのか？
ハナ:リュウさん、preタグって閉じタグが必要なんですか？
リュウ:そうですね、preタグには開始タグと閉じタグの両方が必要です。preタグで囲まれたテキストは、そのままの形式で表示されるため、閉じタグがないとエラーが起こる可能性があります。まるでお菓子の袋を開けるときに、開けた袋を閉じないでおくと中身が乾燥してしまうような感じですね。理解できましたか？
preタグ内にHTMLタグを記述することはできるのか？
ハナ: リュウさん、preタグ内にHTMLタグを書けるんですか？
リュウ: ええ、書くことができますよ。preタグ内ではHTMLタグがそのまま表示されます。まるでコードを見ているような感覚になりますね。
ハナ: そうなんですね！preタグって便利だなあ。でも、どんなときに使うんですか？
リュウ: 例えば、HTMLやCSS、JavaScriptのコードを表示したいときにpreタグを使うことができます。コードを掲載するときはpreタグがおすすめです。
ハナ: なるほど！コードを掲載するときにはpreタグが便利なんですね。リュウさん、いつも教えてくれてありがとうございます！
リュウ: どういたしまして、ハナさん。また何か質問があったら気軽に聞いてくださいね。よく分からないことがあれば、現実の世界でも何でも例えて説明しますよ。
preタグで表示されるテキストの色やフォントを変更するには？
ハナ:リュウさん、preタグで表示されるテキストの色やフォントを変更するにはどうしたら良いですか？
リュウ: preタグで表示されるテキストの色やフォントを変更するためには、CSSを使います。CSSとは、HTML文書の見た目を装飾するための言語です。例えば、preタグに対して「color」プロパティを指定することで、テキストの色を変えることができます。
ハナ:なるほど、CSSというのはHTMLの見た目を変えるための言語なんですね。preタグに指定する「color」プロパティって何色に指定することができるんですか？
リュウ: 「color」プロパティには、たくさんの色が使えます。例えば、赤色を指定する場合は「color: red;」、青色を指定する場合は「color: blue;」といった具合です。また、色を指定する方法には色の名前を使う方法以外にも、RGBやHEXといった方法があります。具体的には、このように書きます。「color: #FF0000;」（赤のHEXコード）、「color: rgb(255,0,0);」（赤のRGB値）。
ハナ:なるほど、たくさんの色が使えるんですね。それと、preタグのフォントも変更できるんですか？
リュウ: はい、preタグのフォントも変更できます。例えば、フォントを「メイリオ」にする場合は「font-family: Meiryo, sans-serif;」と指定します。また、フォントサイズを変更する場合には「font-size」プロパティを使います。例えば、「font-size: 14px;」と指定することで、14ピクセルのフォントサイズに変更することができます。
preタグで表示されるテキストの幅を調整するには？
ハナ：リュウさん、preタグで表示されるテキストの幅を調整するにはどうすればいいですか？
リュウ：preタグはあらかじめ指定された幅で表示されますが、CSSを使って幅を調整することができますよ。CSSっていうのは、お洋服に例えると、デザインや色を変えるために使う布のようなものです。preタグなどのHTMLで構造を作って、CSSで見た目をカスタマイズすることができます。分かりやすく言うと、お菓子の型でクッキー生地を抜いて焼く感じですね。生地は変わっていないけど、型に合わせて形が決まるんです。CSSも同じで、HTMLの構造はそのままで、CSSで形を決めるイメージです。わかりやすいでしょうか？
preタグで表示されるテキストの高さを調整するには？
ハナ:リュウさん、preタグで表示されるテキストの高さを調整するにはどうしたらいいですか？
リュウ:preタグに表示されるテキストの高さを調整するには、CSSのプロパティ「height」を使います。このプロパティに適切な値を指定することで、preタグの表示高さを調整することができますよ。例えば、height: 200px; のように指定すると、preタグは高さ200ピクセルになります。なお、preタグにはスクロールバーが自動で表示されるため、テキストがはみ出した場合にはスクロールして表示させることができます。分かりやすいですか？
preタグで表示されるテキストの行間を調整するには？
ハナ：preタグで表示されるテキストの行間を調整するにはどうしたらいいですか？
リュウ：それはCSSのプロパティで行います。具体的には「line-height」というプロパティを使用します。これを使うことで、テキストの行間を調整することができます。例えば、line-heightを1.5にすると、通常よりも1.5倍の行間になります。分かりましたか？
preタグを使ったコード片を見やすくする工夫にはどんなものがあるか？
ハナ:リュウさん、preタグを使ったコード片を見やすくする工夫にはどんなものがあるんですか？
リュウ:そうですね、例えばコードのインデントを揃えたり、コメントを入れることでわかりやすくできますよ。コードの色を変えたり、文字の大きさを変えることもできますね。
ハナ:なるほど、コードの色を変えるとどういう風にわかりやすくなるんですか？
リュウ:たとえば、変数や関数名、キーワードなど、違う色で表示することで、それらをすぐに見つけられるんです。もし例えば、あなたがプログラムのバグを探す時には、色で分かりやすくなるのは大きなアドバンテージになりますね。
preタグで表示されるテキストがはみ出す場合の対処法は？
ハナ：リュウさん、preタグで表示されるテキストがはみ出す場合の対処法って何ですか？
リュウ：そうですね、例えばpreタグに入れた文章が画面幅を超えてしまう場合は、CSSのoverflowプロパティでスクロールバーを表示するように設定することができますよ。スクロールバーが表示されることで、ユーザーはテキストを見ることができます。わかりますか？例えば長いお弁当を持ち運ぶのに箱に収まらなくても、箱の中に入れておけば傾いてもこぼれたりしないようにする感じです。
preタグの代わりに使えるタグには何があるか？
ハナ:リュウさん、preタグの代わりに使えるタグには何がありますか？
リュウ:それはね、preタグはテキストをプレフォーマットするために使われますが、代わりに使えるタグはいくつかあるんだよ。例えば、「codeタグ」や「sampタグ」、「kbdタグ」といったものがあるよ。これらのタグを使うと、テキストをプレフォーマットしつつ、読みやすくすることができるんだ。分かりやすいかな？
preタグの応用技術にはどんなものがあるか？
ハナ:リュウさん、preタグの応用技術にはどんなものがあるの？
リュウ:ほう、preタグの応用技術か。例えば、コードを表示する際に、文字の色や背景色を設定することができるぞ。
ハナ:なるほど！それ以外にもあるの？
リュウ:あるよ。例えば、タブを表示する際に、スペースを挿入することによって、見やすい表現にすることもできるんだ。要するに、preタグはコードを表示するだけでなく、その見やすさを向上させるための機能もあるってことだね。
ハナ:なるほど！そういう使い方があるんだね。ありがとうございました！
preタグを使ったレスポンシブデザインの考え方とは？
ハナ:リュウさん、preタグを使ったレスポンシブデザインの考え方とは？
リュウ:ハナさん、preタグは、コードやソースコードの表記に使われるタグです。ただ、そのまま使うとレスポンシブデザインに対応しないことがあります。ですが、preタグに属性を追加することで、レスポンシブデザインでも綺麗な表示ができるようになります。
ハナ:属性って何ですか？
リュウ:属性とは、要素に関する情報を指定するためのもので、preタグには、width属性やoverflow属性を指定することで、コードを綺麗に、かつ見やすく表示することができます。例えば、width属性は、コードの幅を指定するために使われます。また、overflow属性は、コードがはみ出した時の処理を指定することができます。
ハナ:なるほど。属性って大事なんですね。ありがとうございました、リュウさん！
