プログラムコードなどを説明するページにこだわってみる

Web Frontier » ウェブデザイン » スタイルシートの技 » プログラムコードなどを説明するページにこだわってみる

スタイルシートの技

プログラムコードなどを説明するページにこだわってみる

このページでも紹介していますが、プログラムコードを記述する時の話です。恐らくこれを見ている人はプログラムコードをサイト内に記述しようとしている人というのを前提としますが、プログラムコードを記述する際には等幅フォントであった方が見やすいのは言うまでもありません。 HTMLではpre要素が用意されていますね。 <pre>～</pre>内で書いた部分は自動的に等幅フォントになり、空白も改行もタブもそのまま出力するというもので、プログラムコードを書くときには必須の要素です。それに加えて、code要素も使います。 code要素はプログラムである事を示すための要素です。

プログラムを記載する際に、ただこれらの要素を組み合わせて中に書いても無味乾燥でおもしろみがありません。せっかくサイトをみんなに見てもらう訳ですからもうちょっとデザインにこだわってみましょう。以下の「code.gif」を「スタイルシートの技」のプログラムコードの時のアクセントのように右上の固定して貼り付けたいと思います。

code.gif

コード用サンプル画像

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="content-style-type" content="text/css">
 <title>Delphi</title>
 <style type="text/css">
 pre.sample
 {
 font-family: 'Courier New', monospace;
 background-image: url('./code.gif');
 background-repeat: no-repeat;
 background-position: right top;
 }
 *.comment
 {
 color: #003399;
 }
 </style>
</head>
<body>
 <h1>文字列のタグを削除する関数(Delphi)</h1>
 <pre class="sample"><code>function DeleteTag(const S : String) : String ;
var p, pe : PChar ;
begin
 p := PChar(S) ;
 pe := p + Strlen(p) ;
 Result := '' ;
 while p &gt; pe do
 begin
 Case p^ of
 '&lt;' :
 begin
 <span class="comment">//終了タグまで検索<span>
 inc(p) ;
 while p^ in ['&gt;',#0] do inc(p) ;
 end ;
 '&gt;' :
 begin
 inc(p) ;
 end ;
 else 
 begin
 Result := Result + p^ ;
 inc(p) ;
 end ;
 end ;
 end ;
end;</code></pre>
</body>
</html>

文字列のタグを削除する関数(Delphi)

function DeleteTag(const S : String) : String ;
var p, pe : PChar ;
begin
 p := PChar(S) ;
 pe := p + Strlen(p) ;
 Result := '' ;
 while p > pe do
 begin
 Case p^ of
 '<' :
 begin
 //終了タグまで検索
 inc(p) ;
 while p^ in ['>',#0] do inc(p) ;
 end ;
 '>' :
 begin
 inc(p) ;
 end ;
 else 
 begin
 Result := Result + p^ ;
 inc(p) ;
 end ;
 end ;
 end ;
end;

付箋紙のようなものを右上に付けてたり、背景画像なんかを指定しても良いと思います。 背景画像と右上のアクセントを2つの画像が介在する場合には、スタイルシートで行う時はdivを入れ子にすれば可能です。 ちょっとしたアクセントを付けただけで印象は結構変わります。また、フォントを特に指定しない場合には等幅フォントはゴシック体となってしまいますので、 少しイメージを変えてみたいのであれば、「Courier New」を使ってみてはどうでしょう? なかなか字体もゴシックに比べてかっこよく、私は好きなのですが。「Courier New」フォントが無い場合には対策として「monospace」を指定しています。これは「serif」「sans-serif」と同類でパソコンにインストールされているデフォルトの等幅フォントを代用している事になります。必要ないかも知れませんが、一応念のためです。

また、背景の設定は別々に行わなくても一括で行う方法があります。 「background」属性でひとくくりにできるので覚えておくと便利でしょう。

background: url('./code.gif') no-repeat right top;

最後のx,y座標の位置ですが「right」の他にも「left」「center」が、「top」の他にも「center」「bottom」があります。右下に画像を付けたい時には「right bottom」を指定します。

top