Elec Days

電子工作やelectric的なこと、日常の出来事について、紹介していきます。
Elec Days TOP  >  スポンサー広告 >  コンピュータ >  FC2ブログでの、<pre>タグの自動折り返し(自動改行)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

FC2ブログでの、<pre>タグの自動折り返し(自動改行)

<pre>タグは、HTMLのなかで

「成形済みテキストであることを表すタグ」

ということになっています。

これはどういうことかというと、<pre>タグで表示させたい文字列を囲めば、普通表示できない「Tab文字」や連続スペースを表現できたり、改行するときに改行タグ<br>を書く必要がなくなったりします。

これは、プログラムのソースコードを書くときなどに非常に都合がよくて、プログラムコードを表すために

<pre><code>~</code></pre>


という使い方もよくされます。


さて、しかし<pre>タグにも一つの欠点があるのです。

それは、デフォルトでは自動的に折り返してくれないこと。
つまり、枠からはみ出してしまうのです。

そうすると、サイトのレイアウトが崩れてしまう。

そこで、スタイルシートを少しいじって、改善するようにします。

実は

pre {
/* Mozilla */
white-space: -moz-pre-wrap;
/* Opera 4-6 */
white-space: -pre-wrap;
/* Opera 7 */
white-space: -o-pre-wrap;
/* CSS3 */
white-space: pre-wrap;
/* IE 5.5+ */
word-wrap: break-word;
}


とスタイルシートに書けば解決します。

スタイルシートは「テンプレートの設定」の下の方で編集できます。

elec daysスタイルシート


しかし、実は最近ブラウザーたちが、対応してくれるようになって、

pre{
/* IE用 */
word-wrap: break-word;
/* 多くのブラウザー */
white-space: pre-wrap;
}


でなんとかなるみたいです。新しいブラウザーなら。





さあ、ここからがどこのサイトにも書いていない落とし穴。

僕がこの問題にあったったのはプログラムのソースコードを乗せるためでしたが、枠をつけるために使ったのが<table>タグ。


実はIE、特にブログで編集するときに枠<table>タグを使うならば、<table>タグの広さ、つまり枠の大きさを指定してやらないと、永遠と幅を外側に広げるのです。

おとといはこの罠にはまっていました。


ではどうすればよいかというと

<table cellspacing="1" bgcolor="#000000" cellpadding="2">
<tbody>
<tr>
<td width="510" bgcolor="#f0f8ff">
<pre>
~~~~~~
</pre>
</td>
</tr>
</tbody>
</table>


<table 枠の太さ 枠の色 枠と文字の隙間>
<tbody>
<tr>
<td 枠の幅 枠内の色>
<pre>
~~~~~~
</pre>
</td>
</tr>
</tbody>
</table>



という風に設定してあげればよいのです。
(ブログ記事を書くときは、改行の設定に気をつけましょう)


こうすればタブ文字など形を生かしたまま書くことができます。
少しめんどくさいかもしれませんが、きれいになります。


※IEで閲覧するときに、場合によっては折り返しができても改行があやしいことがあるかもしれません。
IEでの改行の問題への対策についてはこちらをご覧ください。



参照サイト
preタグ内のテキストを自動改行させるスタイルシート : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~

自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。 | 乱雑モックアップ:

HTMLタグ「テーブル(table)タグ」
関連記事
[ 2011/11/03 14:01 ] コンピュータ | TB(0) | CM(1)
ありがとうございます(><)
「table+pre」で検索してたどり着きました。
やりたい事ができてとっても感動しました!
[ 2012/11/17 01:23 ] [ 編集 ]
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール

elecho

Author:elecho
 
ElecDays にようこそ!!

趣味は、電子的なもの(電子工作やコンピュータ)なので、そういうものについて書くと思います。
あと、学生です。

よろしくお願いします。



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。