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

ytooyamaのブログ

サーバ構築とか、仕事で発見したこととか、趣味のこととかを書いています。

CSSの書き方を伝授してください

tooyama.orgサイトのモバイル対応を行っているのですが、CSSの書き方で詰まってしまいました。 サイトはLinuxのサーバー構築手順をまとめているのですが、コンソールの実行例を書くところを次のようなCSSで定義しています。

p.console {
 display: block;
 padding: 5px;
 background: black;
 color: white;
 font-family: monospace;
 font-size: 12pt;
 margin: 1em 2px;
 margin-top: 1em;
 margin-right: 0px;
 margin-bottom: 1em;
 margin-left: 0px;
 width: 700px;
 max-width:100%;
}

HTMLの方には次のように記述しています。

<p class="console">
# yum check-update
</p>

例のように挿入する文字列が短ければいいのですが、長いものがあるとこのままだと枠に入りきらない部分はぶつ切りになってしまいます。

f:id:ytooyama:20160814145036p:plain

これをなんとか「枠内で適当に改行される」か「スクロールバーで対処」できないものかなあと思っています。何かいい方法があれば教えてください。

フォローワーさんより教えてもらいました。

その結果、該当部分にはpre要素を使うことにし、

pre.console {
 display: block;
 padding: 5px;
 background: black;
 color: white;
 font-family: monospace;
 font-size: 12pt;
 margin: 1em 2px;
 margin-top: 1em;
 margin-right: 0px;
 margin-bottom: 1em;
 margin-left: 0px;
 width: 500px; <-700px->500px
 max-width:100%; 
 overflow:scroll; <-はみ出る部分はスクロール対処
}

少々変更しました。 HTMLの方には次のように記述することにしました。

<p class="console">
# yum check-update
</p>

変更するファイルが結構多いので、暫定対処でp.consoleの方も修正しました。 いずれpreに書き直します。

p.console {
...
 width: 500px; <-700px->500px
 max-width:100%; 
 overflow:scroll; <-はみ出る部分はスクロール対処
}

[8/15 追記] その後、width: 500px;のところは640pxにしました。割とそれでも影響なさそうだったので。

qiita.com