だいまる。の副業的な生活

どこにでもいそうな30代サラリーマンが脱社畜を目指して副業に挑戦してみるブログです。日々考えていることや副業の成果などを書いていきます。気まぐれなので時期によって考え方等に矛盾が出るかもしれませんが、寛容に受け止めてあげてください。

HTMLでソースコードやHTMLタグを表示する方法

どうも。だいまる。です。

ブログ上でソースコードを表示して説明している記事ってたくさんありますよね?
(いつも大変お世話になっております。)

で、私もちょっとHTMLでの右寄せとか左寄せの方法を書いてみたのですが、ここでもちょっと詰まったので備忘録として書いておきます。

f:id:daimaru-side:20180923230115j:plain

HTMLのタグと本文

HTMLはブログやWEBサイトの記事か書かれている言語(超大雑把)でタグと呼ばれるもので表示する文字を大きくしたり色をつけたりと色々加工して表示することができます。

で、ブログの本文にタグをそのまま書き込んでしまうと、”本文”としてではなく”タグ”として扱われてしまい、ブラウザにうまく表示されません。

なので、ちょっと工夫をした書き方をしないといけないというわけです。

HTMLでHTMLのソースコードを書く方法

で、具体的にどんなことをするのかというと、タグの一部を特殊文字で記載します。

ちょっと何言ってるかわかりませんね笑

要するに、「記号を別の書き方で表現する」と思ってください。(ざっくり)

HTMLのタグの場合<タグ>の形で表記しますが、実はこの半角の<と>は、特殊文字で記載しないといけません。

そのまま半角の括弧で書くとHTMLのタグとして表示してしまい、本文として認識してもらえないのです。

具体的な書き方としてはこんな感じ
< は「&lt;」
> は「&gt;」
※全部半角で書きます。

なので、HTMLの改行タグはこんな感じ
「&lt;/BR&gt;」

コレで「</BR>」と表示されます。(もちろん全部半角で書かないといけない。)

ちゃんとコードとして書く<code>タグと<pre>タグ

一応「ここはコードですよ!」と明記するルールがあるっぽいので、ご紹介しておきます。

それはコードの部分は<code>タグでくくるということです。

具体的にはこんな感じ

<code>
ここにコードを書くといいことがあるよ
</code>

コレをきちんと書くとこう表示されます

ここにコードを書くといいことがあるよ


うん。まだなんか微妙ですね。。。

そんな時はコレ!

<pre>タグ〜!!!

複数行にわたるコードの場合(ほとんどがそうなんだけど)は、この<pre>タグを使います。

するとよくある枠で囲まれた部分にコードが表示されるって寸法です。

具体的にはこんな感じ

<pre>
ここにコードを書くといいことがあるよ
</pre>

コレをきちんと書くとこう表示されます


ここにコードを書くといいことがあるよ



こんな感じです。だいぶそれっぽくなりましたね。

終わりに

IT社畜をやっているのに知りませんでした笑

こういうのは業務であんまり使わないので。。。

しかし、今回調べてみて、知らなかったことが知れたという意味ではいい機会になりました。

あと、ちょっと賢くなった気がします笑

また、なにか調べ物をして新しいことが知れた時にはブログを通じて共有できたらいいな思います。

それではまた。

だいまる。