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

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

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

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

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

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

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

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

1.pre要素とは?

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

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

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

2.pre要素の使い方

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

・・・

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

・・・

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

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

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

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

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

「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

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

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?