GO!GO!言語聴覚士

    耳鼻科領域で働く言語聴覚士のブログ
    MENU

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

    応援が励みになります!
    ランキングクリックお願いします!

    ブログランキング・にほんブログ村へ

    SHARE

    HTMLでソースコードを表記する方法

    0   0



    世にある多くのIT系ブログではHTMLやCSSのソースコードが丁寧に説明されており、分からないタグを何かを調べるときには大変重宝しております。ですが、たくさん調べていくうちに「そもそもどうやってソースコードを表記しているのだろう?」と疑問を持ち始めました。



    例えば、テキスト欄に




    <strong>強調</strong>



    と記載すると、通常はコードとして読み込まれるため、




    強調



    のように表示されてしまいます。



    実際にはどのような作業を行った結果、コードをコードのまま表記できるのか。この疑問を解消すべく、ソースコード表記の方法を調べたので備忘録として記します。



    HTMLでソースコードを表記



    ソースコードを表記する方法は実にたくさんあります。

    ・SyntaxHighlighter
    ・google-code-prettifyなどなど。


    wordpressのプラグインでは
    ・SyntaxHighlighter Evolvedなどが利用できます。



    ですが、今回はブログ自体のCSSやテンプレートをいじることなく、ソースコードを表記する方法を記します。



    特殊文字を置換



    HTMLでは「<」や「>」などは特殊文字と云い、タグの記号であることからウェブ上では文字として表示されません。HTMLの特殊文字を表示させるためには、「<」は「&lt;」、「>」は「&gt;」と書き換えてタグを無効化(エスケープ)する必要があります。
    この表記できない文字を表記する手法を文字実態参照と云います。













    文字実態参照一覧
    実態参照特殊文字意味
    &amp;&アンパサンド
    &lt;<小なり
    &gt;>大なり
    &nbsp; 空白
    &quot;"クォーテーション
    &apos;'アポストロフィー
    &copy;©コピーライト


    <pre>タグを使用


    次は置換した特殊文字を<pre></pre>タグを使用して記述していきます。



    <pre>~</pre>タグは、囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。







    &lt;pre&gt;テキスト入力画面&lt;/pre&gt;






    <pre>ブラウザ表示画面</pre>



    この方法で難しいプログラム等を利用せずに、HTMLの記述だけでソースコードを表記することができます。



    おまけの装飾


    ここからは外枠などの装飾を施したバージョンを紹介します。



    外枠を設定




    &lt;div style="border:1px solid #aaa; padding-left:2em;"&gt;
       &lt;pre&gt;
      
    枠線を引く

       &lt;/pre&gt;
    &lt;/div&gt;







    <div style="border:1px solid #aaa; padding-left:2em;">
       <pre>
      
    枠線を引く

       </pre>
    </div>




    枠内に色を付ける




    &lt;div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;"&gt;
       &lt;pre&gt;
      
    枠内に色を付ける

       &lt;/pre&gt;
    &lt;/div&gt;





    <div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;">
       <pre>
      
    枠内に色を付ける

       </pre>
    </div>



    文字フォントを設定する




      

    &lt;div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;"&gt;
       &lt;pre&gt;
          &lt;span style="font-family:Meiryo; font-size:small;"&gt;

    文字フォントをメイリオに設定

          &lt;/span&gt;
       &lt;/pre&gt;
    &lt;/div&gt;
      






      

    <div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;">
       <pre>
          <span style="font-family:Meiryo; font-size:small;">

    文字フォントをメイリオに設定

          </span>
       </pre>
    </div>
      




    &表示のコツ



    「<」と表示させたければ 「&lt;」

    「>」と表示させたければ 「&gt;」

    「&gt;」と表示したい時は「&amp;gt;」

    「&amp;gt;」と表示したい時は「&amp;amp;gt;」

    と記述します。




    参考にしたサイト→At Studio TA




    応援が励みになります!
    ランキングクリックお願いします!

    ブログランキング・にほんブログ村へ
    関連記事

    SHARE

    Leave a reply






    管理者にだけ表示を許可する

    Trackbacks

    trackbackURL:http://gogost.blog22.fc2.com/tb.php/313-1061899d
    該当の記事は見つかりませんでした。
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。