「preタグってなんだろう」や「preタグはどういうときに使うの」と悩んでいませんか？
ここでは、preタグの意味と使い方を、初心者向けに分かりやすくお伝えします。
preタグは、入力した文字をそのまま表示させるタグです。
便利なタグですが、デメリットもあるので、ここでpreタグの意味と使い方をしっかりと確認していきましょう。
■ 【目次】このページを読んで分かること
- preタグの基本知識
- preタグを使うとき
- preタグとCSSの組み合わせ
- preタグと他のタグとの違い
- 【まとめ】preタグとは
|
preタグの基本知識
まずは、preタグの基本知識からお伝えします。
preタグとは
preタグは、入力した文字をそのまま表示させるタグです。
文章を preタグで囲むことで、入力した文章をそのままホームページ上に表示させることができます。
preタグの使い方
preタグを使うことで、次のように、文章をそのままホームページ上に表示させることができます。
■ <pre> タグの記述例
|
<pre>
ホームページに
掲載する文章
</pre>
|
■ ホームページ上の表示
普通の文章を書くときは、スペースや改行は無視されることが多いですが、preタグを使うと、そのまま表示されます。
そのため、コードや詩など、整った形で見せたいテキストを表示するときに便利です。
preタグを使うとき
ここでは、preタグを使うときについて、お伝えします。
コードを表示したいとき
プログラムのコードをきれいに見せたいときに、preタグが役立ちます。
たとえば、下記のように使います。
|
<pre>
function sayHello() {
alert("こんにちは！");
}
</pre>
|
これを使うと、コードのスペースや改行がそのまま表示されて、読みやすくなります。
詩や歌詞を表示したいとき
詩や歌詞など、特定の形で表示したいテキストにも、preタグが便利です。
たとえば、下記のように使います。
|
<pre>
あの青い空の下で
私たちは笑った
楽しい時間だった
</pre>
|
このように書くと、詩や歌詞の形をそのまま見せることができます。
テーブルを表示したいとき
簡単な表を作るときにも、preタグが使えます。
たとえば、下記のように使います。
|
<pre>
名前 年齢
たろう 10
はなこ 12
じろう 11
</pre>
|
このように書くと、スペースや改行がそのまま表示されて、表の形がきれいに見えます。
preタグとCSSの組み合わせ
preタグにCSS（スタイルシート）を使うことで、もっときれいにテキストを見せることができます。
ここでは、preタグとCSSの組み合わせについて、お伝えします。
背景色を変える
たとえば、preタグの背景色を変えたいとき、下記のように書きます。
|
<pre style="background-color: lightblue;">
動画で覚える無料ホームぺージ制作講座
</pre>
|
このように書くと、preタグの中のテキストの背景が水色（lightblue）になります。
テキストの色を変える
テキストの色を変えることもできます。
たとえば、下記のように書きます。
|
<pre style="color: green;">
動画で覚える無料ホームぺージ制作講座
</pre>
|
これで、preタグの中のテキストが緑色（green）になります。
枠をつける
preタグの周りに枠をつけることもできます。
たとえば、下記のように書きます。
|
<pre style="border: 1px solid black;">
動画で覚える無料ホームぺージ制作講座
</pre>
|
これで、preタグの周りに黒い枠がつきます。
いろいろなスタイルを組み合わせる
CSSを使って、いろいろなスタイルを組み合わせることもできます。
たとえば、背景色、テキストの色、枠を一緒に変えたいときは、下記のように書きます。
|
<pre style="background-color: lightyellow; color: blue; border: 2px dashed red;">
動画で覚える無料ホームぺージ制作講座
</pre>
|
このように書くと、背景が黄色、テキストが青色、枠が赤い点線になります。
CSSを使うことで、preタグをもっときれいに、見やすくすることができます。
preタグと他のタグとの違い
ここでは、preタグと他のタグとの違いについて、お伝えします。
preタグとcodeタグの違い
preタグは、テキストのスペースや改行を、そのまま見せるために使います。
一方、codeタグは、コードをインラインで表示するために使います。
なお、インラインとは、普通の文章の中に組み込むことです。
改行やスペースは、そのままにはなりません。
|
<p>
この文の中に<code>alert("こんにちは！");</code>というコードがあります。
</p>
|
preタグとdivタグの違い
preタグは、スペースや改行をそのまま見せるためのタグです。
一方、divタグは、ブロック要素といって、セクションを作るために使います。
テキストの形をそのまま見せるためではありません。
<div>
<p>これはdivタグの中にあるテキストです。</p>
</div>
|
preタグの特徴
preタグは、特にスペースや改行を大切にするテキストに向いています。
コードや詩、特定の形を保ちたいテキストに便利です。
|
<pre>
これがpreタグです。
形がそのまま
保たれます。
</pre>
|
他のタグも便利ですが、使い方が違います。
それぞれの特徴を理解して、うまく使い分けていきましょう。
【まとめ】preタグとは
preタグとは？意味と使い方を初心者にわかりやすく解説！の内容は、いかがでしたでしょうか？
preタグは、入力した文字をそのまま表示させるタグです。
たとえば、スペースや改行が そのまま表示されます。
preタグは、プログラムのコードをきれいに見せたいときに役立ちます。
ただ、preタグを使うと、テキストはそのままの形で表示されるため、折り返しがされません。
そのため、長いテキストがある場合、画面が横に広がってしまいます。
これが preタグのデメリットになるので、最低限必要なときにだけ、preタグは使うようにしましょうね。
