• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

ソースコードをwebサイトに表示する方法

投稿者アイコン
2019/09/03
書いた人:
rurippa!
カテゴリ:
HTML
198 views

ソースコードをwebサイトに表示する方法を紹介します。

ソースコードをwebサイトに表示する方法

今回は、ソースコードをwebサイトに表示する方法を紹介します。

目次

codeタグについて

code(computer codeの略)タグで囲んだものは、ソースコード(javascriptやHTMLなど)であると認識され、一般的なブラウザでは等幅フォントで表示されるようになります。

ただしデメリットとして、インデントや改行が消えてしまいます。

表示サンプル

p{ font-size: 16px; color: #333; }
<code>
	p{
		font-size: 16px;
		color: #333;
	}
</code>

preタグについて

preformatted textの略で、フォーマット(整形)済みのテキストという意味になります。その名の通り、preタグで囲んだものは brタグなど使わずとも、改行や半角スペースをそのまま表示します。

表示サンプル

preタグを使えば、
 改行などそのまま表示されます。
<pre>
preタグを使えば、
 改行などそのまま表示されます。
</pre>

使い方

ではどのように表示するのがベストかと言うと、codeタグ・preタグの特徴を活かして、両方で囲むことです。

まず、preタグで囲むだけではソースコードと認識されませんので、codeタグで囲みます。それをさらにpreタグでマークアップしましょう。

表示サンプル


	p{
		font-size: 16px;
		color: #333;
	}

<pre>
	<code>
		p{
			font-size: 16px;
			color: #333;
		}
	</code>
</pre>

最後に

どうでしたか?
使う機会は限られると思いますが、使ってみてくださいね。

参考サイト


この記事を読んだ人はこんな記事も読んでいます