Home / プログラミング / HTMLで<code>タグを使ってコードをサイトに表示させる方法

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

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標準デザイン講座

1 2

スポンサーリンク

Check Also

リンクタグって何?リンクタグの使い方と役割、カスタマイズ方法

リンクタグという言葉を聞いたこ …

Facebookでのご購読が便利です