ソースコードがはみ出ない表示法

スポンサーリンク

このブログでは、ソースコードを書く事が多いんですが、それをはみ出さずに表示する
HTMLとスタイルシートの書き方です。

ソースを書くのはいいんですが、説明するのが面倒なので、最近は
「パート派遣主婦のぐーたら子育て生活」の、かこに説明してもらっています。

で、サムネイル表示のソースをかこのブログにコピーしてもらったら、こんなコメントが
書き込まれていました。

２つ目の５行目ぐらい、めっちゃ文字がはみ出てるんですが、
こういうもんなんですか？

どうやら、ソースがはみ出ていたようです。ついでだから記事にしよう。

preタグ

preタグとは、書いたものをそのまま表示するためのタグです。

たとえば、次の通りのものがHTMLに書かれていたとします。

hello! I am Tom.
I am                  Japanese.

何故英文にしたかというと、２行目のamとJapaneseの間を半角スペースにするためです。
日本語だと全角スペースを使うので、結果が変わります。

とりあえず半角、全角は忘れて上の英文をそのままHTMLに書くと、こう表示されます。

hello! I am Tom.
I am Japanese.

HTMLで改行させるにはbrタグを使います。これを使わない限り、改行とはみなされません。
（ブログのエディタは改行を自動でbrタグに変換しています）

そして、半角スペースは何個続いても１個の半角スペースとみなされます。

その結果

hello! I am Tom.
I am                  Japanese.

と書いたものは

hello! I am Tom.
I am Japanese.

と表示されます。

しかし、これでは不便です。そういうときに使うのがpreタグです。

preタグとは、書いたものをそのままの状態で、書いたとおりに表示するものです。

ですから

<pre>hello! I am Tom.
I am                  Japanese.</pre>

と書けば、そのまま表示されます。

preタグで長い行をはみ出させないスタイルシート

しかし、ただpreを使うと、長い行があったときにはみ出します。

それを避けるためには、スタイルシートにこう書きます。

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

これで、はみ出さずに自動で改行されて表示されるようになります。

上のスタイルシートを適用したpreタグで、長いURLを次の行に表示します
var noImage='/dwm/wp-content/uploads/2013/08/384_2.gif';

もしも、エディタの自動改行を有効にしている場合は余計に改行が増えてしまいます。
それを避けるためには、スタイルシートに次を追加してください。

pre br{display:none;}

ちなみに、全角スペースは続いた数だけ空白になります。便利なようですが、
スペースのために全角スペースを続けるのは出来れば避けて、preタグを使いたいです。

今回のスタイルシートは、どこか別のサイトを参考にしたのですが、前に調べたもので
どこのサイトに書いてあったかわからなくなりました。ただ、同じ記述は複数のサイトにあるので
今回は引用元の表記を、ごめんなさいさせていただきます。

関連コンテンツ

スポンサーリンク

「ソースコードがはみ出ない表示法」への44件のフィードバック

  4. 訪問・コメントありがとうございます。

    急きょUPしたもんで、いろいろまだ設定中です。すみません

    Tomのcss・html等も勉強させて頂きました。

    リニューアルしましたら・記事を書かさせて下さい。

    しばらく・・放置していたのでかなりアクセス数が・・・

    これからまた頑張ります。

    返信

  6. 部分部分pre使わずに

    <div style=”border:3px double #009900″>
    <span style=”font-size: 75%;”>
    ソース
    </span>
    </div>

    となってるのを、

    <div style=”border:3px double #009900″>
    <span style=”font-size: 75%;”><pre>ソース</span>
    </div>

    というふうに、コピーしたソースを丸ごとペースト。

    でやってみ。

    今のソースはバックアップしてからやってね。

    返信

  10. いま、記事プレビューで見たら、全部ゴシックになってて気に入らない。
    とりあえずあげてみる。

    返信

  11. さっきのほうがましだなぁ。戻すか。
    プレのスタイルシートのところに書体を追加すればいいのかな。

    返信

  14. ううっ（涙）。入れる場所がよくわからん。
    プレに書体を追加するんじゃなくて、フォントファミリーにいれるの？

    返信

  17. { font-family: inherit;font-size: inherit;font-weight: inherit; }input,textarea,select{ *font-size: 100%; }legend{ color: #000; }del,ins{ text-decoration: none; }form,fieldset,button,input,label,legend,select,textarea,radio { font-size: 95%;margin: 0;padding: 0;vertical-align: baseline; }p { margin: 0; }em, strong { font-weight: bold; }blockquote { margin: 1em;padding: 1em; }

    このform,fieldset,button,input,label,legend,select,textarea,radioのあととかに入れればいい？

    返信

  19. 今スタイルシートを見た。
    bodyタグに書かれている
    font: 12px/1.2 “MS Pゴシック”,Arial,Helvetica,Verdana,sans-serif;
    をpreに追加すればいい。

    pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    font: 12px/1.2 “MS Pゴシック”,Arial,Helvetica,Verdana,sans-serif;
    }

    返信

  20. 下のだと、font-sizeがあるから、こうするか。

    pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    font-family: “MS Pゴシック”,Arial,Helvetica,Verdana,sans-serif;
    }

    これなら、文字サイズを気にしなくていい。

    返信

  24. 大丈夫？満足か？

    ＞ブログ管理者の設定により、ひらがな・カタカナを含まないコメントは禁止されています。
    俺はこんな設定してないんだけどな。直せない。

    返信

  25. noriさんとか、心姫さんのスキンは直せない。
    だけど、サイドバーに入れれば出来るから、
    それ用のソースを書く。後で。

    返信

  26. ＞大丈夫？満足か？
    うん。大満足。ありがとう。頭使った。

    ＞＞ブログ管理者の設定により、ひらがな・カタカナを含まないコメントは禁止されています。
    ＞俺はこんな設定してないんだけどな。直せない。
    設定してないんだ？スパム対策だと思ったのに。

    ＞だけど、サイドバーに入れれば出来るから、
    ＞それ用のソースを書く。後で。
    おおっそれは楽しみ。

    返信

  27. かこさんにソースコードを持っていかれたので、
    こちらにもアクセスが来るようにモジュール化する。

    返信

  28. ごめんねー。だってちょいコッサーには、記事をいったりきたり
    するのは難しいって思ったんだもん。

    モジュールは、紹介だけにするから、安心して。
    簡単に書いてね。

    返信

  32. P検の模試の概要、今日までに説明できるようになる必要があるので。
    じゃあ。本気出します。

    返信

  34. これ、私のせい・・・。
    ２人とも、いらんこと言ってゴメンね～。

    ホントに、私にだけそう見えてるのかと思って・・・。
    気になって聞いてみただけなのよ～。

    返信

  35. ＞これ、私のせい・・・。

    僕は記事に出来てありがたかったです。
    でも、かこが心姫さんのせいだって言ってますよ。

    返信

  36. ん？私も心姫さんに言われる前から、直そうと思ってたからいいのよ。
    ありがとう。
    とりあえず、記事あげちゃおうと思ってただけで。
    はみ出してるのはきらーい。

    返信

  37. ソースコードを変換するのがだるすぎてスクリプト貼れないす。。
    唐辛子というコード変換ツールがあって、http://kujirahand.com/tools/tougarasi/
    こういうので変換すりゃいいのかねえと思いつつ、でもだるいなーとｗ

    なんか囲む程度で、ぺちっとコード貼れればいいなーと思いつつ、
    http://alexgorbatchev.com/SyntaxHighlighter/
    こういうの探したんですが、なんか集中力が途切れてしまうす。

    みんなどやってコードはってるんですの？

    返信

  38. ＞ソースコードを変換するのがだるすぎてスクリプト貼れないす。。
    コメント欄は、そのままでへいきー。

    だるいよね。私は量が少ないのでちまちまやってます。
    自動変換ツールかぁ。

    返信

  42. みかんさんは、使ってるのかな？
    私なら、ああいう記事をもらったら、二度と来ないかも笑。

    みかんさん、根性あるなぁ。

    返信

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。