ダジャレをしんちゃんキャラでぶっこんで見ましたが、HTML に使うタグ<code>～</code>の話です。

    筆者は独学で勉強しながら色々実験して来ましたが、ブラウザにソースコードのサンプルを載せるのに、ずっと<textarea>～</textarea>で囲んで来ました。必要によっては、<textare>をCSSでスタイルを指定したりします。

    <textarea>に関しては、下記記事に詳しい説明を書きました。


    しかし最近、何やら<code>タグが一般的に使われる事を知り、海外テンプレートのCSSも全部細かく探して行くと、確かに多くのテンプレートに<pre>タグと<code>タグを装飾してあって、ソースコード用に準備してありました。もう、早く教えてよ～、こっちの方が簡単そうですけど。

    勿論<textarea>タグでコードを表示するのも全然ありですが、文の途中での使い方は出来ません。独学に良く見る「あるある」ですね～、もう～w

    そうとわかれば、とことん勉強しましょう。

タグの<code>～</code>で囲む意味と使い方

    ブラウザにコードを表示させる為のインライン要素で、文の途中でも使えます。

    インライン要素は、ブロック要素に対するもので、ブロック要素は文も丸ごと囲むので、文の途中では使えません。

    <code>タグは、プログラム言語の種類を問わず、HTML、Javascript、Ruby、Python、CSS･･････等、全てのコードに使えます。

    使用目的はブラウザにコードを表示させる事だけでなく、検索エンジンにそれがブラウザに表示させる為のコードである旨を知らせます。

    CSSを使う事で、見た目が分かり易い様、人それぞれの好みで装飾できます。

    使い方は主にこんなものがあります。

・文の途中にあげる短いコード
・ユーザーに見せたいサンプルコード（長さ問わず）

<code>～</code>の使用例

① 文の途中にコードを表示

    CSS部分

 code { display: inline-block;
        padding: 1px 0px;
        color: green;
        background-color: #cefff1;
        border-radius: 3px;
        border: solid 1px green; }

    HTML部分 

 <code><code></code>タグを文中で使う場合、
 <code>display: inline-block;</code>がないと、
 <code>padding</code>や<code>margin</code>等、
 余白の調整が反映されません。

    ブラウザ表示

<code>タグを文中で使う場合、
display: inline-block;がないと、
paddingやmargin等、
余白の調整が反映されません。