プロが教える店舗&オフィスのセキュリティ対策術

お世話になります。

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

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

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

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

よろしくお願いします。

A 回答 (4件)

非推奨というのはXHTMLを使っているということでしょうか?


確かにXHTML 2.0ではソースコードを書くのにはpreではなくblockcodeを使うように推奨しています。
http://www.w3.org/TR/xhtml2/mod-structural.html# …
(でも、これを知っているならもう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- …

というわけで、XHTMLで書いているならblockcode、HTML5で書くつもりならpre + codeが推奨される方法だと思います。
    • good
    • 0
この回答へのお礼

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

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

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

お礼日時:2012/11/21 11:10

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



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

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

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

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

非推奨は、white-space:preタグだと思います
    • good
    • 0
この回答へのお礼

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

お礼日時:2012/11/21 11:11

>やはり非推奨なので、


勘違いでは?
pre推薦です。タブはNGです。

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

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

お礼日時:2012/11/21 11:12

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

    • good
    • 0
この回答へのお礼

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

お礼日時:2012/11/21 11:12

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!