読者です 読者をやめる 読者になる 読者になる

とまじぃさんち

信じるか信じないかはあなた次第・・・。

いわゆる「Code」でスクロールバーを出さない方法

インターネット インターネット-ブログカスタマイズ

今回は短い記事です♪

ブログのカスタマイズ系とかの記事を書いていると、HTMLであるとかCSSであるとかを記事に載せる機会も多いと思います。 f:id:tomag:20160214090040j:plain

で、見たまま記法だとなにやら載せられない(?)らしいので、はてな記法なりMarkdownなりで載せるわけですが・・・。

<div style="color:#ff0000;font-size:72px; font-weight:bold; text-shadow:15px 15px 5px #555;">あいうえお</div>

長いコードだと上の様な状態ではみ出した分がスクロールして見ないといけない状態になってしまいます。
(スマホだと途切れて見えるみたいですが、コピペしようとするとスクロールできるようです【android版Chromeで検証】)

見栄え悪いですよね~。

でも普通にスクロールバー無しで表示されてるブログもあるので、なんらかの方法があるはず!

検索してみました。

いわゆる【Code】で折り返す方法

ズバリな記事がありました!!

参考文献:pre要素で折り返しをするためのCSS: 小粋空間
(小粋空間さんって、4~5年前にMovabletypeとかSerenebachとかでブログやってた頃かなりお世話になった覚えが。懐かしい)

はい!書いてある通りデザインCSSに以下を追記いたしましょう。

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}

はい!以下のとおり無事に折り返してくれるようになりました♪

<div style="color:#ff0000;font-size:72px; font-weight:bold; text-shadow:15px 15px 5px #555;">あいうえお</div>

まとめ

この記事書くの結構苦労しました。 折り返しと折り返しじゃない表示を記事の中で混在させないといけないので、インラインでCSS書かなきゃいけないんだけど、書き方わからないわ 、特殊文字変換しなきゃいけないわで、そっちの検索のほうが時間かかったかもしれないw