プログラムコードなどをHTMLで表示するときに便利な<code>タグの解説をします。加えて、ソースコードの字下げや改行をそのまま表示できる<pre>タグと組み合わせて使うことで効率よく作業ができるようになります。また、HTMLで利用可能な「特殊文字」の一覧もありますのでご参考下さい。
|
フルスタックエンジニア |
|
フルリモート |
|
Webアプリケーションの設計／開発／運用経験 他 |
|
|
サーバーサイドエンジニア |
|
|
フルリモート |
|
|
Ruby on Railsを用いた開発経験3年以上 他 |
あなたに合う案件をプロが探し、案件参画から、稼働中のお悩みまで全サポート致します。
まずは気軽にご連絡ください。
1. <code>タグを使ってソースコードを表示する
<code>タグを使うことで、プログラムやHTMLコードの表示をその他の文字列と区別して表示することができます。<code>は「computer code」の略です。
基本の書式
●code.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML入門-コードの表示</title>
</head>
<body>
<h1>ソースコードの表示</h1>
<code>
body{ background-color:#008b8b; }
</code>
</body>
</html>
●ブラウザーの表示
<code>タグで囲まれたソースコード部分はブラウザー上で「等幅フォント」を使って表示されます。違いがわかりにくいので通常の文字列と比較してみましょう。
●code.html
<body>
<h1>ソースコードの表示</h1>
<p>通常の表示：body{ background-color:#008b8b; }</p>
<p>codeタグ使用：
<code>body{ background-color:#008b8b; }</code>
</p>
</body>
<code>タグで囲まれたソースコード部分はブラウザー上で「等幅フォント」を使って表示されます。
2. <pre>タグで整形済みテキストを表示する
<pre>タグを使うと、改行やタブ・スペースを入れて整形したテキストをそのまま表示することができます。<pre>は「preformatted text」の略です。
基本の書式
●code.html
<body>
<h1>ソースコードの表示</h1>
<p>通常の表示：body{ background-color:#008b8b; }</p>
<p>codeタグ使用：
<pre>
<code>
body{
font-size: 22px;
color:#ffffff;
background-color:#008b8b;
}
</code>
</pre>
</p>
</body>
HTMLのソースコードでは連続したスペースやタブは一つにまとめられて表示され、改行はスペースとして表示されます。<pre>タグを使うことで、ソースコードの改行やスペース・タグがそのままブラウザーに表示されますので<br>タグなどを使う必要がありません。
3. 特殊文字の扱い
HTMLコードをブラウザーに表示する場合は、HTML文書内で特殊な意味を持つ小なり記号「<」や大なり記号「>」をそのまま記述するとコードの始まりや終わりと認識される為、そのままでは正常に表示することができません。このような記号を表示するのに使われるのが「エスケープシーケンス（特殊文字）」です。例えば「<html>」と表示する場合は、「<html>」と記述します。以下HTMLでよく使われるエスケープシーケンスをあげますので、実際にブラウザーで表示されるか確かめてみて下さい。
●HTMLでよく使われる特殊文字
| 記号名 | 文字列 | 特殊文字 |
|---|---|---|
| 小なり記号 | < | < |
| 大なり記号 | > | > |
| アンパサンド | & | & |
| ダブルクオーテーション | " | " |
| アポストロフィ | ' | ' |
| コピーライト | © | © |
| 登録商標 | ® | ® |
| トレードマーク | ™ | ™ |
| スペース | |
●通貨記号
| 記号名 | 文字列 | 特殊文字 |
|---|---|---|
| 円 | ¥ | ¥ |
| セント | ¢ | ¢ |
| ポンド | £ | £ |
| ユーロ記号 | € | € |
●その他の記号
| 記号名 | 文字列 | 特殊文字 |
|---|---|---|
| バーティカルバー | ¦ | ¦ |
| マイクロ記号 | µ | µ |
| パーミル | ‰ | ‰ |
| 一般通貨記号 | ¤ | ¤ |
| 上向き矢印 | ↑ | ↑ |
| 右向き矢印 | → | → |
| 下向き矢印 | ↓ | ↓ |
| 左向き矢印 | ← | ← |
| 左右両向き矢印 | ↔ | ↔ |
| 上向き二重矢印 | ⇑ | ⇑ |
| 右向き二重矢印 | ⇒ | ⇒ |
| 下向き二重矢印 | ⇓ | ⇓ |
| 左向き二重矢印 | ⇐ | ⇐ |
| 左右両向き二重矢印 | ⇔ | ⇔ |
| スペードマーク | ♠ | ♠ |
| クラブマーク | ♣ | ♣ |
| ハートマーク | ♥ | ♥ |
| ダイヤマーク | ♦ | ♦ |
| 上付き1 | ¹ | ¹ |
| 上付き2 | ² | ² |
| 上付き3 | ³ | ³ |
| 2分の1 | ½ | ½ |
| 4分の1 | ¼ | ¼ |
| 4分の3 | ¾ | ¾ |
| 8分の1 | ⅛ | ⅛ |
| 8分の3 | ⅜ | ⅜ |
●学術記号（数学）
| 記号名 | 文字列 | 特殊文字 |
|---|---|---|
| マイナス | − | − |
| プラスマイナス | ± | ± |
| 乗算記号 | × | × |
| 除算記号 | ÷ | ÷ |
| 等号否定 | ≠ | ≠ |
| ほぼ等しい | ≈ | ≈ |
| およそ等しい | ≅ | ≅ |
| 大なりイコール | ≥ | ≥ |
| 小なりイコール | ≤ | ≤ |
| 無限大 | ∞ | ∞ |
| ルート記号 | √ | √ |
| 関数記号 | ƒ | ƒ |
| 比例 | ∝ | ∝ |
| 積分記号 | ∫ | ∫ |
| 偏微分 | ∂ | ∂ |
| ナブラ | ∇ | ∇ |
| シグマ、総和記号 | ∑ | ∑ |
| チルダ演算子 | ∼ | ∼ |
| 故に | ∴ | ∴ |
| パイ記号 | ϖ | ϖ |
| 角 | ∠ | ∠ |
| 度記号 | ° | ° |
| 直交する | ⊥ | ⊥ |
| 合同な | ≡ | ≡ |
| 否定記号 | ¬ | ¬ |
| 任意の | ∀ | ∀ |
| 存在する | ∃ | ∃ |
| 論理積 | ∧ | ∧ |
| 論理和 | ∨ | ∨ |
| 空集合 | ∅ | ∅ |
| 積集合 | ∩ | ∩ |
| 和集合 | ∪ | ∪ |
| 属する | ∈ | ∈ |
| 属さない | ∉ | ∉ |
| 元として含む | ∋ | ∋ |
| 含まれる | ⊂ | ⊂ |
| 真部分集合を元として含む | ⊃ | ⊃ |
| 含まれない | ⊄ | ⊄ |
| 部分集合 | ⊆ | ⊆ |
| 部分集合を元として含む | ⊇ | ⊇ |
●ギリシア文字
| 記号名 | 文字列 | 特殊文字 |
|---|---|---|
| アルファ (大文字) | Α | Α |
| アルファ (小文字) | α | α |
| ベータ (大文字) | Β | Β |
| ベータ (小文字) | β | β |
| ガンマ (大文字) | Γ | Γ |
| ガンマ (小文字) | γ | γ |
| デルタ (大文字) | Δ | Δ |
| デルタ (小文字) | δ | δ |
| イプシロン (大文字) | Ε | Ε |
| イプシロン (小文字) | ε | ε |
| ゼータ (大文字) | Ζ | Ζ |
| ゼータ (小文字) | ζ | ζ |
| エータ (大文字) | Η | Η |
| エータ (小文字) | η | η |
| シータ (大文字) | Θ | Θ |
| シータ (小文字) | θ | θ |
| イオタ (大文字) | Ι | Ι |
| イオタ (小文字) | ι | ι |
| カッパ (大文字) | Κ | Κ |
| カッパ (小文字) | κ | κ |
| ラムダ (大文字) | Λ | Λ |
| ラムダ (小文字) | λ | λ |
| ミュー (大文字) | Μ | Μ |
| ミュー (小文字) | μ | μ |
| ニュー (大文字) | Ν | Ν |
| ニュー (小文字) | ν | ν |
| クサイ (大文字) | Ξ | Ξ |
| クサイ (小文字) | ξ | ξ |
| オミクロン (大文字) | Ο | Ο |
| オミクロン (小文字) | ο | ο |
| パイ (大文字) | Π | Π |
| パイ (小文字) | π | π |
| ロー (大文字) | Ρ | Ρ |
| ロー (小文字) | ρ | ρ |
| シグマ (大文字) | Σ | Σ |
| シグマ (小文字) | σ | σ |
| タウ (大文字) | Τ | Τ |
| タウ (小文字) | τ | τ |
| ウプシロン (大文字) | Υ | Υ |
| ウプシロン (小文字) | υ | υ |
| ファイ (大文字) | Φ | Φ |
| ファイ (小文字) | φ | φ |
| カイ (大文字) | Χ | Χ |
| カイ (小文字) | χ | χ |
| プサイ (大文字) | Ψ | Ψ |
| プサイ (小文字) | ψ | ψ |
| オメガ (大文字) | Ω | Ω |
| オメガ (小文字) | ω | ω |
弊社が運営する「プログラマカレッジ（無料プログラミングスクール）」の講師やキャリアアドバイザー、編集部員が担当する以下の記事も参考にしてください。
■ 初心者のためのHTML入門1～HTMLの基本をおさえて実際に書いてみよう
当サイトプロエンジニアのコンサルタントが厳選したおすすめのフリーランス案件特集はこちら
特集ページから案件への応募も可能です！
実際にフリーランスエンジニアとして活躍されている方のインタビューはこちら
