レイアウトトラブル備忘録4

自分でやるをバックアップするソクラテツチップスのバナー画像

PREタグ はみ出たコードをレイアウトする方法

 /

PREタグは入力されたソースのままHTMLで表示してくれるとても便利な要素ですが、ひとたび表示が崩れると少しだけ厄介なことに…。

今回は、pre要素の幅を指定した固定幅パターンとレスポンシブの2パターンで思い通りにレイアウトする方法を解説いたします。

【INDEX】-目次-

固定幅の場合

アドビ製品のスペースキーを使ったショートカット不具合をお知らせする画像
 
    現状
  1. 文字列が左右に切れている
  2. 本来の幅よりはみ出している
  3. 横揺れしている
ワトソンに「pre要素の文字列がはみ出しているぞ」というチャールズ卿
文字列がはみ出ているぞワトソン君!

ホシは「文字列のはみ出し」と推理し、まずは文字列の折り返し設定を記述します。

pre{white-space: pre-wrap}

折り返したくない場合、スクロールバー表示も可能です。

pre{over-flow:auto}

折り返しを制御するCSSプロパティ

結果
参考画像
PRE要素の影響でエリアと文字列がはみ出ている画像

右端で折り返されるようになり、横幅もきちんと収まるようになりました。

preのwidthを固定幅で設定している場合は、 white-space: pre-wrap とすることでたいてい修正されると思いますが、下記条件の場合は効果が得られません。

  1. 折り返し付近に単語が来ている場合
  2. URLがある場合
手順2
参考画像
PRE要素の影響でエリアと文字列がはみ出ている画像

white-space: pre-wrap を記入しても、折り返しがうまくいかずPREエリアの横幅が以前としてはみ出ている場合があります。

それはブラウザが日本語だと自動で区切りをつけてくれるのですが、英単語や長いURLは1単語として取り扱うためです。pre{white-space: pre-wrap} が効かない場合、単語の途中で改行するプロパティ

word-wrap:break-word

を使用します。

word-wrap:break-wordは、単語の途中で折り返さないとボックス幅からはみ出してしまうときのみ折り返します。
結果
参考画像
単語が途中で折り返され、幅に収まっているのがわかる画像

単語が途中で折り返され、はみ出しはなくなりました。

wordwrapの値
normal 初期値
break-word 単語の途中でも改行

レスポンシブの場合

参考画像
レスポンシブの場合、文字列がはみ出ている画像

preの幅が固定値の場合、先述のプロパティを記述することでキレイに整形されましたが、レスポンシブ(flexboxなど)の場合、レイアウトを崩してしまいます。

それはword-wrap:break-wordがshrink-to-fit widthに対応していないためです。

そのためレスポンシブの場合、禁則処理を一切無効にするプロパティ

word-break: break-all

を記述します。このプロパティは、英単語やURLをレスポンシブの幅に応じて途中改行します。

wordbreakの値
normal 初期値
break-all 単語の途中でも改行
keep-all 単語の切れ目で改行
禁則処理とは

word-break: break-all は、文字間であっても右端で改行するため、単語の途中での折り返し、句読点が行頭にきてしまうことがあります。

デザインを保つコーディング

スクリーンキャプチャ画像
レスポンシブの場合、文字列がはみ出ている画像
 

幅をメディアクエリごとに設定し、スクロールバーで表示するのもいいですが、なるべくならpreタグをレスポンシブ表示したい人は

レスポンシブ表示のCSS
pre{white-space: pre-wrap;
word-break: break-all}

で解決です。

以上、シンデレラフィットにこだわるソクラテツがお送りしました( ´ ▽ ` )ノ

 
納得いくまで学ぶ。まずは無料説明会に参加
関連記事
PC(CSS)
縦スクロール時に横揺れするサイトの修正方法

縦スクロール時に横揺れするサイトの修正方法

縦クロールしたときブレたり横揺れてしまう場合のCSS対処法を解説(スマホタブレット)

PC(CSS)
グーグルアドセンス広告がはみ出す時の修正方法

グーグルアドセンス広告がはみ出す時の修正方法

レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消!

PC(HP)
Googleアドセンスが中央に寄らない場合の対処法解説画面

Googleアドセンスが中央に寄らない場合のやり方

デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。

PC(html)
preloadで先読みして高速表示する方法へのリンク画像

preloadで先読みして高速表示する方法

サーバーから先行してフェッチすることで、サイトの高速表示を実現します。

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

画像の遅延読み込み実装でサイト表示高速化

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(HP)
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

TOP