CSS(スタイルシート)HTMLのTips☆SEO対策やアクセスアップの方法などを載せていきます♪FC2ブログの無料テンプレート公開中！"> ブログカスタム☆

Sponsor

絵文字エディター

絵文字エディターの一覧
more...

ブログやサイトにタグやcssを表示する方法

ブログやWEBサイトなどにタグやcssを紹介したい！
でも、そのまま書くと、表示されません^^;
そんなときの裏技を紹介いたします♪


「<」「>」「&」などは、特殊文字として認識されるので、「&lt;(&#60;)」「&gt;(&#62;)」「&amp; (&#38;)」で置き換えます
　< >&まで無視したらHTMLが成り立たないためです


<html>
  <head>
    <meta>
    <title></title>
  </head>
  <body>
    <h1></h1>
    <p></p>
    <address></address>
  </body>
</html>

ソース上の表示

&#60;html&#62;
  &#60;head&#62;
    &#60;meta&#62;
    &#60;title&#62;&#60;/title&#62;
  &#60;/head&#62;
  &#60;body&#62;
    &#60;h1&#62;&#60;/h1&#62;
    &#60;p&#62;&#60;/p&#62;
    &#60;address&#62;&#60;/address&#62;
  &#60;/body&#62;
&#60;/html&#62;


タグを<pre>〜</pre>で挟むとソース中のスペースや改行をそのまま表示します
ソースコードなどを表示する際に便利です♪

< や > や & をそのまま表示するには <plaintext> や <xmp>を用いる方法がありますが、これらのタグは「行儀の悪いタグ」として HTML4.0 では廃止されているので非推奨です

私の好みですが、<pre class="code">〜</pre>でclass付けしてます

スタイルシートでコードを線で囲むにはコチラ♪
細い黒い線で囲むのが好きです
シンプル好きなので・・・

.code{
    border: 1px solid #000000;
    padding: 5px;
    white-space: pre;
    width: 400px;
    background-color: #ffffff;
}

panda-02公開中！

panda_02.jpg



シンプルなパンダがワンポイントなテンプレートを公開しました

共有テンプレートに登録したものの、しばらく承認中のままで、その存在をすっかり忘れてました

アクセスが急にアップして初めて気付きました♪
順次このシリーズを公開していくつもりです☆

バクなどの報告などありましたら、コメントからどうぞ

カラーコード　文字色版　セーフカラー216色

　8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色をWEBセーフカラーといいます
　セーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 両方の環境で同じ色を使うことができます
　ブログやhtmlの色の指定には、WEBセーフカラーを使用されることをお勧めします♪
　とはいうものの、macとwinの両方でほぼ同じに見せれることがウリのWEBセーフカラーですが、macでは薄め、winでは濃い目に表示されます＾＾；


ここのカラーコード見本はlove cherry様よりお借りしました。

特殊文字：その他の特殊な文字

記号
タグ其の一
タグ其の二
" &quot; &#34;
& &amp; &#38;
< &lt; &#60;
> &gt; &#62;
Π&OElig; &#338;
œ &oelig; &#339;
Š &Scaron; &#352;
š &acaron; &#353;
Ÿ &Yuml; &#376;
ˆ &circ; &#710;
˜ &tilde; &#732;
  &ensp; &#8194;
  &emsp; &#8195;
  &thinsp; &#8201;
‌ &zwnj; &#8204;
‍ &zwj; &#8205;
‎ &lrm; &#8206;
‏ &rlm; &#8207;
– &ndash; &#8211;
— &mdash; &#8212;
‘ &lsquo; &#8216;
’ &rsquo; &#8217;
‚ &sbquo; &#8218;
“ &ldquo; &#8220;
” &rdquo; &#8221;
„ &bdquo; &#8222;
† &dagger; &#8224;
‡ &Dagger; &#8225;
‰ &permil; &#8240;
‹ &lsaquo; &#8249;
› &rsaquo; &#8250;
€ &euro; &#8364;

Sponsor

プロフィール

Author:えみりぃ
ＦＣ２ブログへようこそ！

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

スポンサードリンク

ブログ内検索


RSSフィード

リンク

このブログをリンクに追加する

友達申請フォーム

この人と友達になる