HTML・CSS：ソースコードをそのまま表示させるpreタグ・codeタグ、preタグとcode

<pre>タグとは？

<pre>タグとは、ソースコードをそのまま表示させるタグになります。…ソースコードって何？って感じかも知れません。ソースというのはプログラミング言語で書かれた全体の文章のことで、プログラムをそのままダイレクトに載せるという意味です。<pre>で囲った部分は、スペースであろうが何であろうがそのまんま表示させることになります。

<pre>「あああ～
川の流れのように～」</pre>

これを表示させるとこうなります↓

「あああ～
川の流れのように～」

そのまま表示されていますね。

<pre>タグはどんな時に使うの？

じゃあその<pre>ですが、一体どこに使うのよ！？って思いますよね。公式サイトで調べてみました。

…う、うん、えっと～。とりあえずは<pre>で囲った部分というのはソースコードの途中に入れられた空白すらもそのまま反映して表示してくれるよってことでしょう。おまけに箇条書きの・なんかもつけちゃって～ってことが出来るんですね。
そしてなんと！アスキーアートも表示できちゃう！ってことで<pre>タグ内にコピペしてみました。ハイ、ドーン！！

　　 ∩＿＿＿∩
　　 | ノ　　　　　 ヽ/⌒)　あばばばばばば
　 /⌒) (ﾟ)　　　(ﾟ)　|　.|
　/　/　 　( _●_)　 ミ/　　　　∩―－、
.（　　ヽ　　|∪|　　／ 　　　／　(ﾟ)　､_ ｀ヽ
　＼　　　 ヽノ　/ 　　　 　/　　(　●　 (ﾟ) |つ
　 /　　　　　　/　　 　　　|　／(入__ノ 　 ミ　　　あばばっあびゃばびゃばば
　|　　　　　　 / 　　 　　　､　(＿／　　　 ノ
　|　　／＼　＼ 　　 　　　＼＿＿＿　ノﾞ ─ｰ
　|　/　　　 )　 )　　　　　　　＼ 　　　　　　＿
　∪　　　 （　 ＼　　　　　　　　＼　　　　　＼
　　　　　　 ＼＿) 

………んっ？？？

な、なんか…違くない？ｗｗｗ
ま、まあいいや。ということで、AAにも使えるタグということでした。

<pre>タグの使い方

そういうわけで<pre>タグは書いたコードやらなんやらをそのまま表示してくれるタグでございました。使い方は超簡単、<pre>と</pre>の間にそのまま表示させたい内容を書くだけです。

<pre>ここに書きたいcodeを　そのまま　書くだけ</pre>

これを表示させたらこうなります↓

ここに書きたいcodeを　そのまま　書くだけ

見事に空白までもがそのまま反映されましたね。

<code>タグとは？

<code>タグはタグで囲まれた部分がコードであるということを示すタグです。とは言っても<code>タグはさきほどの<pre>タグのように空白などをそのまま反映してくれるわけではありません。(改行は反映される)
その証拠にさっきのAAを<code>タグ内にコピペしたらこの惨状です。↓

<code>タグはどんな時に使うの？

じゃあ<code>は一体なんの役にたつのさ！？というと、<code>内で書いた文字はそれっぽい感じに表示されます。読みやすくするためってことですね。

<p style="text-align:center;">これがそれっぽいでしょ</p>

それともう一つ、検索エンジン側にこれがプログラムなんだよってことを伝えるというSEO対策的意味合いもあります。

<code>タグの使い方

簡単です。<code>と</code>の間にコードを書いてあげましょう。もしも空白まで含めて表示させたい場合は<pre>タグと組み合わせて表示させると良いと思います。

<pre>
　<code>
　<p style="text-align:center;">これが　それっぽいでしょ</p>
　</code>
</pre>

　
　
これが　それっぽいでしょ
　

<pre>タグと<code>タグの違いまとめ

<pre>タグはプログラムをそのまま表示してくれるタグでしたが、「空白」も含めそのまま表示をする働きをしてくれました。
一方、<code>タグは「空白」はガン無視で等幅のフォントに変換、そして検索エンジン側にこれはプログラムなんですよってことを伝える働きを持っていました。
それぞれの特色を活かしてタグを使い分けしていきたいところですね。