HTML <PRE>は、幅widthの設定が面倒なので使用しない方が無難
☆HTML <PRE>は、幅widthの設定が面倒なので使用しない方が無難
HTMLでソースコードを表示させたい時、<PRE>を使って、
改行などをそのまま表示させたりする事があります。
ですが、ちょっと挙動不審なので使いにくかったりします。
挙動不審さをお見せする為に、いくつかコードを書いてみます。
細かい説明は、省きます。
「長い文字長い文字・・・」と書いているところは、
通常ソースコードと思っておいて下さい。
結果：
結果：
結果：
結果：
①は、どのブラウザでも同じように表示されると思います。
しかし、ソースコードの表示には向きませんので、
②～④は、PREを使います。
②は、幅（width）を指定しているにもかかわらず、その幅を文字が超えて行きます。
③は、幅は正しくなりましたが、文字が途中で消えて消えてしまいました。
④は、IEでは①と同様に表示されましたのでOKのように思えますが、
Firefoxで見ると、②みたいに突き抜けました。
ソースの style="word-wrap: break-word;"というところが、
IE用であり、Firefoxでは別の値を設定しないと④にはならないようです。
通常、CSSでブラウザ毎に設定をしたりするようですが、とても面倒です。
ブラウザの種類が増えたりバージョンアップすれば、
また追加する必要もあるようです。
よって、
PHPを使ってソースコードの書いたソースを1行ずつ読み込み。
半角の置き換えと、改行をしてやった方が、無難だと思います。
そのソース例：
$handleは、ファイルオープン時の返り値です。
↓ 全角の所もあります。
これで、幅に悩まされずに、<PRE>と同じような機能を実装できると思います。
記述：2011年03月頃
別サイトより移動：2012年1月頃
HTMLでソースコードを表示させたい時、<PRE>を使って、
改行などをそのまま表示させたりする事があります。
ですが、ちょっと挙動不審なので使いにくかったりします。
挙動不審さをお見せする為に、いくつかコードを書いてみます。
細かい説明は、省きます。
「長い文字長い文字・・・」と書いているところは、
通常ソースコードと思っておいて下さい。
①PREを使わないで、普通に書く場合
<TABLE border="1" width="500">
<TBODY>
<TR>
<TD align="left" width="300">なにか</TD>
<TD width="122">
長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字
</TD>
</TR>
</TBODY>
</TABLE>
結果：
②PREを使って書く場合 その1
<TABLE border="1" width="500">
<TBODY>
<TR>
<TD align="left" width="300">なにか</TD>
<TD width="122">
<pre>
長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字
</pre>
</TD>
</TR>
</TBODY>
</TABLE>
結果：
③PREを使って書く場合 その2
<TABLE border="1" width="500" style="table-layout: fixed;">
<TBODY>
<TR>
<TD align="left" width="300">なにか</TD>
<TD width="122">
<pre>
長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字
</pre>
</TD>
</TR>
</TBODY>
</TABLE>
結果：
④PREを使って書く場合 その3
<TABLE border="1" width="500">
<TBODY>
<TR>
<TD align="left" width="300">なにか</TD>
<TD width="122">
<pre style="word-wrap: break-word;">
長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字長い文字
</pre>
</TD>
</TR>
</TBODY>
</TABLE>
結果：
①は、どのブラウザでも同じように表示されると思います。
しかし、ソースコードの表示には向きませんので、
②～④は、PREを使います。
②は、幅（width）を指定しているにもかかわらず、その幅を文字が超えて行きます。
③は、幅は正しくなりましたが、文字が途中で消えて消えてしまいました。
④は、IEでは①と同様に表示されましたのでOKのように思えますが、
Firefoxで見ると、②みたいに突き抜けました。
ソースの style="word-wrap: break-word;"というところが、
IE用であり、Firefoxでは別の値を設定しないと④にはならないようです。
通常、CSSでブラウザ毎に設定をしたりするようですが、とても面倒です。
ブラウザの種類が増えたりバージョンアップすれば、
また追加する必要もあるようです。
よって、
PHPを使ってソースコードの書いたソースを1行ずつ読み込み。
半角の置き換えと、改行をしてやった方が、無難だと思います。
そのソース例：
$handleは、ファイルオープン時の返り値です。
↓ 全角の所もあります。
$line = fgets($handle);
$line = str_replace("<", "＆ｌｔ", $line);
$line = str_replace(" ", "＆ｎｂｓｐ", $line);
echo $line;
echo "<BR>\n";
これで、幅に悩まされずに、<PRE>と同じような機能を実装できると思います。
記述：2011年03月頃
別サイトより移動：2012年1月頃
Twitter Facebook Google+ はてな Pocket LINE
管理人による書き込みの確認後、荒らし書き込みでない場合に表示させていただきます。
悪意ある書き込みや挑発的な書き込みと思われる内容は、表示させません。
その為、ちょっと書き込みから表示までに時間がかかってしまいます。ご了承下さい。
暑さの一番の原因はなんだと思いますか？
あなたの支持する政党はどの党ですか？
今のページの関連ページのリストへ
ザ・覚書のトップページに戻る
全ページのリストへ