プロフィール

長太郎

Author:長太郎
プログラマーやってます。

カレンダー
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
月別アーカイブ
最近の記事
最近のコメント
最近のトラックバック
カテゴリー
ブログ内検索
RSSフィード
リンク
FC2カウンター
メールフォーム

名前:
メール:
件名:
本文:

小さな天気予報

-天気予報コム- -FC2-
QRコード
QRコード
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-)
【PC】ソースコード表示用のCSSを設定
先日このblogにソースコードを書いたのですが、ブラウザでの表示のされ方がイマイチなのでCSSを設定してみました。

具体的にはFC2 BLOG管理ページの [・テンプレートの設定] - [~のスタイルシート編集]に次の設定を追加。


/*ソースコード表示用*/
pre {
background-color: #F0F0F0;
overflow: scroll;
padding: 0.7em 0.8em;
margin: 2.0em 0;
font-family: "courier new";
}

pre.dos {
background-color: black;
border: solid 3px ActiveBorder;
color: white;
font-family: "MSゴシック";
font-size: 100%;
padding: 4px;
}

.content code {
font-family: monospace;
font-size: medium;
font-weight: normal;
line-height: 120%;
text-align: left;
margin-bottom: 10px;
}


さて、どうなったか確認。



●<pre>~</pre>で囲んだ場合

// CSSテスト。 わざと横に長ぁ~~~~~~~~~~~~~~~~~~~~~~~~~~~いコメントを書いてみる
#include <stdio.h>
int main()
{
printf("Hello World");
return 0;
}


●<pre class="dos">~</pre>で囲んだ場合

// CSSテスト。 わざと横に長ぁ~~~~~~~~~~~~~~~~~~~~~~~~~~~いコメントを書いてみる
#include <stdio.h>
int main()
{
printf("Hello World");
return 0;
}


●<pre><code>~</code></pre>で囲んだ場合

// CSSテスト。 わざと横に長ぁ~~~~~~~~~~~~~~~~~~~~~~~~~~~いコメントを書いてみる
#include <stdio.h>
int main()
{
printf("Hello World");
return 0;
}



●<pre class="dos"><code>~</code></pre>で囲んだ場合

// CSSテスト。 わざと横に長ぁ~~~~~~~~~~~~~~~~~~~~~~~~~~~いコメントを書いてみる
#include <stdio.h>
int main()
{
printf("Hello World");
return 0;
}



こんな感じになりました。

#include <stdio.h>の「<」は「&lt;」と、htmlタグを書いて指定しています。
<pre>~</pre>で囲っていても、そのままでは表示されません。

そのまま記述すると、次のようになります。(正しく表示されていません)
#include 


「<」の後にスペース1つを入れると、次のようになります。
#include < stdio.h>


これのいい解決手段は?
スポンサーサイト


PC | 【2008-07-07(Mon) 00:23:11】 | Trackback:(0) | Comments:(0)
コメントの投稿
管理者にだけ表示を許可する

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