学びをアウトプットするブログ

ソースコードを書いた部分がレスポンシブに対応していなかったのでCSSを修正した

htmlやcssもほとんど知識がないために、細かな修正をしないと色々と調子悪いところがでてきます。 webサイトをつくるにあたってのベストプラクティスってないもんですかね。

pタグの設定とか。段落の行間は現在はこうしておけばとりあえずOKとか。 そんなのがあれば助かるんですが。サイトによって違うので一概には言えないんでしょけうど。

ということで今回はソースコードを囲っている<pre>タグの修正。

preタグで囲われたソースコードが折り返してくれない問題

ソースコードを記載する場所はpreタグを使うと思うのですが、そもそもpreタグを使うと改行などが書いたままに表示されるのでpreタグを使うと思います。 問題は、携帯でみたときにも改行されずに表示されてしまうので見た目が悪いです。

ということで、画面サイズに合わせて「折り返して」表示するようにCSSを変更しました。

参考にしたのはここ→pre要素で折り返し改行させる方法

まんまですね。恐らくよくある話なんだと思います。 ということでCSSに以下を追記

pre {
    white-space: pre-wrap ;
}

これで画面サイズに応じて折返し表示してくれるようになりました。 ちょっとはみ出たりする部分はあるみたいですが、概ね満足なのでこれ以上は追求しません。

pre-wrapってちょっとクレラップみたいですね。