忘れる前に覚書。優しい文章を目指します。
ザ・覚書 ザ・覚書
出来るだけ子供にも、わかりやすいように書いて行きたいと思います。

PCバージョンでサイトを表示しています。

【ザ・覚書 3クリックアンケート実施中】
暑さの一番の原因はなんだと思いますか?
あなたの支持する政党はどの党ですか?
ページを見て下さって、 ありがとうございます。この内容に関する情報があれば下の掲示板にでも書き込み下さい。

HTML <PRE>は、幅widthの設定が面倒なので使用しない方が無難


  スポンサーリンク

☆HTML <PRE>は、幅widthの設定が面倒なので使用しない方が無難
今のページの関連ページのリストへ
ザ・覚書のトップページに戻る

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("<", "&lt", $line);
$line = str_replace(" ", "&nbsp", $line);
echo $line;
echo "<BR>\n";



これで、幅に悩まされずに、<PRE>と同じような機能を実装できると思います。

記述:2011年03月頃
別サイトより移動:2012年1月頃

(一言掲示板は、下の方にあります。)

Twitter Facebook Google+ はてな Pocket LINE


  スポンサーリンク


Amazonで『HTML言語』を検索
今のページの関連ページのリストへ
ザ・覚書のトップページに戻る
全ページのリストへ

HTML: Decoded - Learn HTML Code in A Day Bootcamp. Learn It Right. Learn It Now. (English Edition)

基礎から徹底的に学ぶJavaScript

JavaScriptでつくる簡単ストップウォッチ

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 Web制作者のための教科書シリーズ

Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう

Ruby on Rails 5.0 初級①: 経路、アクション、テンプレート (OIAX BOOKS)
amazonで検索
商品更新日時:
2017/03/29 07:50:37

【中古】 HTML言語がわかるとホームページ作成にもっと差が出る 詳解HTML & Dynamic HTML使いこな / 武井 一巳 / [単行本]【メール便送料無料】【あす楽対応】
楽天ウェブサービスセンター
商品更新日時:
2017/03/29 20:13:58

一言掲示板です。なにかありましたら以下に書いて書き込みボタンを押して下さい。
管理人による書き込みの確認後、荒らし書き込みでない場合に表示させていただきます。
悪意ある書き込みや挑発的な書き込みと思われる内容は、表示させません。
その為、ちょっと書き込みから表示までに時間がかかってしまいます。ご了承下さい。

(新機能)URLの書き込みも可能にしましたが、内容と関係のないリンクの表示はしないと思います。
また自サイトへのリンクURL書き込みの場合、相互リンクもお願い致します。
お名前

コメント






本日、よく見られるページ
コピペ用 都道府県一覧
家庭用の普通のコンセントは、何Wまで使えるのか?
「~をば」ってどういう意味?
労働者が、会社を訴える時の手続き方法
木材の引き戸の滑りを良くする方法
「忖度(そんたく)」とはどういう意味か?
ガンダム世界の世界地図とコロニーとかの位置
春の旬野菜といえばなに?
コンピューターの開始時にページングファイル構成に問題が発生 対処法の1つ
水道の止水栓(元栓)が硬くて回らない時
  スポンサーリンク

今のページの関連ページのリストへ
ザ・覚書のトップページに戻る
全ページのリストへ