折り返し改行するpreタグとは? 使い方も分かりやすく解説!

pre要素について知りたい人

pre要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

pre要素はpreformatted textの略で日本語で整形済みテキストと訳せます。

整形済みテキストはプログラムのソースコードのように、空白、タブ、改行も含め、ソース・テキストをそのまま表示するテキストのことです。

pre要素はメールの写し、ソースコード、文字を揃えたいときに使用します。

覚えておくといい要素の一つなのでしっかりと理解しておきましょう。

そこでこの記事ではpre要素について詳しく解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

pre要素の評価

頻出度

(3.0)

重要度

(3.0)

総合評価

(3.0)

pre要素は整形済みテキストを表します。

整形済みテキストはプログラムのソースコードのように空白、タブ、改行も含めソースやテキストをそのまま表示するテキストのことです。

pre要素は自動的な折り返しがされなくなるので、ソースコードなどをそのまま表示する時に便利です。

注意点

「<」、「>」、「&」などは特殊文字として認識されるので、実体参照に置き換えて書く必要があります。

それではpre要素の使い方をみていきましょう。

・・・

<pre>
 <code>
  function pre() {
   console.log("pre要素とは?")
  }
  pre()
 </code>
</pre>

・・・

上記はpreタグとcodeタグを用いてJavaSctriptのソースコードをHTML内に埋め込んだものとなっています。

codeタグはcomputer codeの略語を示すタグです。

ブラウザに対してcodeタグで囲んだ文字列が、ソースコードであるということを示すためのものです。

codeタグの外側をpreタグで囲むことでソースコードのインデントが揃い、読みやすいソースコードになっています。

コードを記載する際にはこちらのcodeタグを用いることをおすすめします。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

リンク

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント