サイトにプログラムコードを貼り付けるpreタグのCSS

By , 2012年5月10日

実体参照されていないため、表示されない。
突然ですが、サイトにJavaScriptやC言語などのプログラミングコードを貼り付ける時は、普通にコードを入力していくと、実体参照(<>)などが、&lt;&gt;などに変換されてしまい、普通にコードを記述することは出来ませんよね。

そんなときに、使用するのが<pre>という整形のHTMLタグなのですが、この<pre>をデフォルトのままそのまま記入すると、<pre>で囲んだコードの中身が、一行の記述が長かったりすると、途中で表示が、途切れてしまいます。

例:
<pre>
var browser=(document.compatMode==”CSS1Compat”)? document.documentElement : document.body //IE6かの判定
</pre>

途切れてしまう

これを、回避する方法として、<pre>をCSSで制御するのですが、自分でも驚くことに、管理人はこの<pre>を今まで殆ど使っていなかったりします。なので、「無いなら、これから作るしかない」というわけで、CSSで<pre>を制御する、CSSを書いてみましたので、そのCSSを公開いたします。

<pre>タグのスタイルシート

pre.code {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#eeeeee none repeat scroll 0 0;
border:1px solid #999999;
color:#444444;
display:block;
font-size:1em;
margin:1em;
overflow:scroll;
padding:0.5em;
width:560px;
}

上記、CSSは各自、ご自由にサイトに記入して、お使いいただければと思います。(改変可)

行ったことは、overflow:scroll;とdisplay:block;の指定にて、一行のコードが長くなると、自動的に560pxのところで、折り返すようになります。使い方は、<pre class=”code”>~コードの内容~</pre>
という風にpreのclassにてcodeを入力すれば良いだけです。

実際に使ってみました&このように使います。

<script language="javascript">
document.write("<form><textarea name=(browsermime' rows='10' cols='60'>MIMEタイプ表示スクリプト\n");
for(i=0;i<navigator.mimeTypes.length;i++){
document.write(navigator.mimeTypes[i].type,":",navigator.mimeTypes[i].description,":",navigator.mimeTypes[i].suffixes,"\n");
document.write("</textarea></form>\n");
}

※上記スクリプトは、現在お使いのブラウザのMIMEタイプをすべて表示するスクリプトです。

このように、CSSを使いプログラムコードを、楽に書いていくことが可能となりました。実際に<pre>内にコードを記入する場合は、実体参照に変換を行ってから、コードを書くようにしましょう。

ちなみに、上記サイトを使えば、楽に実体参照を変換することが出来ますが、元々の実体参照の文字列には以下のサイトを参考にすると良いと思います。殆どの実体参照がまとめられています。
HTML4で支える文字実体参照

これで、気兼ねなく、コードを書いていけるようになりました^^

簡単に暗号化できるソフトED

By , 2009年9月2日

暗号化ソフトED

今回は、簡単にドラック&ドロップで簡単にファイルを暗号化を簡単にすることが出来るソフト「ED」の紹介です。

ファイルだけの暗号化だけではなく、ディレクトリ単位の暗号化をすることも可能です。ファイルを暗号化して、外部に情報が漏れないように、守るというのは、現代のセキュリティーにおいて、とても重要な意味を持ちます。

一旦暗号化してしまえば、暗号化した本人以外は、そのファイルデータを読み出し&書き込むことは出来ません。企業のセキュリティにおいても、大切な情報が漏れないように、社員のPCやUSBなどに格納される顧客情報なども、暗号化して保存するという対策を取るという時代になりました。

今回はそんなデータの暗号化を簡単に行えるソフトEDの紹介です。それでは、詳細は続きから

Read more »

携帯ウイルス「Sexy View」について

By , 2009年8月2日

mobile
 名前を聞いただけでは、何かのソフトウェアですか?と感じてしまうかもしれませんが、 「Sexy View」とは、SymbianOS(シンビアンオーエス)搭載の携帯機器に感染する S60 3rd EditionにSMS(Short Messege Service)を経由して感染を広げるYxes.A!ワームの総称のことです。

予備知識
・Symbian OSとはシンビアンによる携帯機器向けオペレーティングシステムであり、関連するライブラリ、ユーザインタフェースフレームワーク、一般的なツールの参照実装が含まれる。Symbian OSの世界シェアはスマートフォンという携帯電話のハイエンドカテゴリの中で世界トップを誇っています。

・シンビアン (Symbian)と は、イギリスのPDAメーカーPSION搭載のオペレーティングシステムEPOC32の開発部門を祖とするソフトウェア・ライセンス会社。本社はイギリスです。

それでは、詳細ニュースは続きから

Read more »

WordPressの続きを読むを個別記事タイトルに変更

By , 2009年8月1日

続きを読む

続きを読む
 突然ですが、WordPressで続きを読むときに大抵デフォルトで表示される「Read more」や「Continue reading」ってなんとなく、味気がないように感じることはありませんか?

 今回はそんなWordPressの続きを読むの文字を「個別記事タイトル+続きを読む」に変えてみることにしました。それでは、詳細は続きから

Read more »

WordPressのページの表示件数は・・・

By , 2009年7月31日

表示件数
WordPressの1ページの表示件数って、WordPressの管理者画面から「設定」→「表示設定」で

・最大・投稿数「 」件
・RSS/Atom フィードで表示する最新の投稿数「 」件

という感じに、「」の部分に数字を入力すればいいだけなんですね。気づかずににテンプレートの方探し続けていました^^;

ちなみに管理人は最大・投稿数ページが「5」記事で、RSS/Atomフィードは「8」件表示にしました。


OfficeFolders theme by Themocracy