HTMLで<code>タグを使ってコードをサイトに表示させる方法

LINEで送る
Pocket

%e3%83%8f%e3%82%9a%e3%82%bd%e3%82%b3%e3%83%b3%e2%91%a2

HTMLを使って、サイトにソースコードを表示するにはどうしたらいいのでしょうか。サイトにソースコードを表示したい場合は、codeタグを使えば解決します。ここでは、「HTMLで<code>タグを使ってコードをサイトに表示させる方法」について、紹介いたします。これからHTMLを勉強しようと考えている方や、Webサイトを作ってみたい方は、参考にご覧ください。

スポンサーリンク

1.codeを使ってソースコードをサイトに表示させる方法

%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab

ここでは、codeのHTMLタグを使ってソースコードをサイトに表示させる方法について、紹介します。

1.codeタグとは

codeタグとは、computer codeの略です。ソースコードがあることを示すための要素であり、使用するとブラウザ上では等幅フォントでソースコードが表示されます。一般的にはcodeタグだけでなく、preタグの中にcodeタグを入れて使うのが多いです。

2.preタグとは

preformatted textの略です。タグの範囲内にタブやスペースがないことを意味し、インデントや改行を表示させる場合に使います。ブラウザ上にソースコードを表示したい場合は、codeタグとセットで使ったりします。

3.codeタグを使ってコードをサイトに表示する

HTMLを使ってコードをサイトに表示させるためにはcodeタグを使います。<code>〜</code>で使い、タグで囲まれた部分に表示したいコードを記述します。これにより、codeタグで囲まれた部分のコードがサイトに表示されます。また、インデントや改行も表示させる場合は、<pre>〜</pre>タグでさらに外側を囲みます。

2.HTML・CSSを勉強する際のおすすめの本

ここでは、HTML・CSSを勉強をする際に役立つ、初心者・中級者向けのおすすめ本を紹介します。

1.HTML5&CSS3デザインブック

HTML5&CSS3デザインブックは、は実際にパーツを組み立てながら学ぶことができます。しっかりと基礎から学べ、勉強が苦手な方でも、Webサイトを楽しみながら作れるため勉強に取り組みやすいです。HTML・CSS初心者向けの本です。構成内容:Webページにおける段組み/Webページを作成する準備/ブログ・ニュース系サイトのトップ+コンテンツページ/ビジネスサイト風のトップ+コンテンツページなど

2.HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座は、HTML・CSS初心者向けの入門書です。文法学習など基礎的な内容から、サイト制作の流れなどまで学べます。講義パートと実習パートがあり、本を読み込んで知識を得ていくことも、実際にサンプルページを作りながら勉強もできるため、自然と基礎力が身に付きます。分かりやすく解説してあるため、これからWebサイトを作っていきたい方におすすめです。

構成内容:HTMLで文書を作成する/CSSで文書を装飾する/CSSレイアウトの基本/本格的なHTML5によるマークアップを行うための基礎知識/本格的なWeb制作のための設計と準備/実践的なWebサイトのコーディング/CSS3入門/マルチデバイス対応の基礎知識/レスポンシブ・ウェブデザインのコーディングなど

3.スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほんは、HTML・CSS初心者向けの本です。フリー素材をインストールして、実際に作業しながら勉強ができ、ページを完成させられるようになります。Webサイトを作るにあたっての知識が満載の本なため、実際にWebサイトが作れるようになっても使っていけます。

構成内容:Webサイト制作を始める前に/HTMLの基礎/制作の準備と基本のHTML/見出し、段落、リスト/リンクと画像の挿入/2ページ目以降を効率的に作成する/CSSの基礎/CSSでページのスタイルを調整/フロートとテーブルのスタイル/フォームの作成/Webサイトの公開/

4.デザインの学校これからはじめるHTML&CSSの本

デザインの学校これからはじめるHTML&CSSの本は、HTMLとCSSを基礎からしっかりと学びたい方むけの本です。初心者がつまづきやすいポイントなども、丁寧に解説してあるため勉強が進みます。Webページを作り上げるまでの工程が実践的に学べます。

構成内容:Webページについて知ろう/HTMLの基本を理解しよう/Webページを作ろう/サブページを作ろう/CSSの基本を理解しよう/CSSでレイアウトしよう/ページをデザインしよう/CSSでテキストをデザインしよう/Webページを公開しようなど

5.作りながら学ぶHTML/CSSデザインの教科書

作りながら学ぶHTML/CSSデザインの教科書は、HTMLやCSSを勉強したことがある方向けの本です。まったくの未経験の人が読んでも分からないことだらけになってしまいます。テキストを読むだけでなく、実際に手を動かしてサンプルサイトを作りながら実践的スキルが学べます。

構成内容:HTMLファイルを作成しよう/CSSで装飾しよう/画像を編集し、HTMLで表示しよう/共通部分の作成とレイアウト/リンクを設定し、ナビゲーションを作り込もう/各ページを作成しよう/サイトに動きをつけよう/サイトの公開と仕上げなど

6.HTML5/CSS3モダンコーディング

HTML5/CSS3モダンコーディングは、既にHTMLとCSSの基礎的知識を身に付けている人向けの本です。タイトルの通り、HTMLとCSSを使ってモダンなサイトを制作するための知識や技術について勉強できます。

スタンダードレイアウト、グリッドレイアウト、シングルページレイアウトの3つのサイトを制作しながら、実践的なコーディングテクニックが身に付きます。要所要所で達成感を得れる構成となっていますので、モチベーションを維持したまま勉強をしていくことが可能です。構成内容:スタンダードレイアウト/グリッドレイアウト/シングルページレイアウトなど

7.HTML5+CSS3の新しい教科書

HTML5+CSS3の新しい教科書は、HTMLとCSSをある程度勉強したことや触ったことがある方向けの本です。まったくの初心者向けの本ではありません。実際に手を動かして実践的な勉強をすることはありませんが、基本から応用までの知識をしっかりと学べます。

多くのHTMLやCSSのタグや要素が載っているのも特徴です。構成内容:Webサイトの構造を理解する/制作に入る前の準備/HTMLでページの骨格をつくる/HTML&CSSの基本ルール/文字・見出し・段落の設計/リンクと画像の設定/リストとテーブルを組む/ナビゲーションをつくる/フォームをつくる/Webページをレイアウトする/HTML5+CSS3への対応など

まとめ

いかがでしたでしょうか。今回は、「HTMLで<code>タグを使ってコードをサイトに表示させる方法」について、紹介いたしました。codeタグを使うことで、サイトにソースコードの表示ができます。プログラムなどを説明するサイトを作る際などに活用してみましょう。

また、これからWebサイト制作などを目的として、HTMLの勉強を検討している方は、HTML・CSSを勉強する際に役立つおすすめの本も紹介していますので、活用してみてください!

スポンサーリンク

LINEで送る
Pocket

Facebookでのご購読が便利です