HTMLでＣなどのソースを載せるときに

質問

お世話になります。

Webページに、Ｃ言語などのサンプルコードを
載せたい場合、<pre>タグなどを使わずに、きれいに
タブスペースやインデントを表現できる方法は
ありませんでしょうか。

通常に載せただけでは、タブ文字や半角スペースは
表示されませんし、だからといって & nbsp;などの連続で
インデントを表現するのもあまりカッコよくありません。

たいていは<pre>タグを使用されているのが多いのですが、
やはり非推奨なので、できれば使用したくありません。

具体的な方法がありましたら、お教え願えないでしょうか。

よろしくお願いします。

回答No.4

hanabutako · ベストアンサー

非推奨というのはXHTMLを使っているということでしょうか？
確かにXHTML 2.0ではソースコードを書くのにはpreではなくblockcodeを使うように推奨しています。
http://www.w3.org/TR/xhtml2/mod-structural.html#edef_structural_pre
(でも、これを知っているならもうblockcode使ってますよね...)

しかしながら、HTML5の草稿を見る限り、ソースコードはpreでcodeを囲んでで書くようです。
http://dev.w3.org/html5/spec/the-pre-element.html

HTML4.01など古いHTMLではpreとの組み合わせについてはそこまで言及していないように思いますが、HTML5でpre + codeになったということはこれまでその使い方をされるのが普通だったと予想します。
http://www.w3.org/TR/html401/struct/text.html#h-9.2.1

というわけで、XHTMLで書いているならblockcode、HTML5で書くつもりならpre + codeが推奨される方法だと思います。

お礼

ありがとうございました。

以前に、preタグは非推奨とあった気がしたのですが、
またつかわれるようになったのでしょうか…？

遠慮なく使っていきたいと思います。

回答No.3

k0021

<pre>タグは、非推奨では有りません

<pre> (整形済みテキスト)を使用して表示していますが。monospace(等幅フォント) の扱いか、Sfariではおかしく表示されます。

最新のバージヨンでは少し改善されましたが下記の方法で対策しています。

「pre {margin:0;font:1em/150% "ＭＳ 明朝",serif;}」を外部スタイルシートに追加しました。

margin:0;は、上下にも１行の空白行が挿入を無くすために指定しています

非推奨は、white-space:preタグだと思います

お礼

ありがとうございました。

回答No.2

naokita

＞やはり非推奨なので、
勘違いでは？
pre推薦です。タブはNGです。

話がちょと逸れますが、
SyntaxHighlighterもそういうpre仕様ですが、
↑実はJSのテーブル実装だけどね。
確か数年前のバージョン１？なら<textarea>で利用できたような気がします？

お礼

ありがとうございました。

回答No.1

Gotthold

pre要素は非推奨ではないですよ。

お礼

ありがとうございました。