display: inline-block;の要素を使って文章の改行位置をコントロールする
最終更新日: Update!!
レスポンシブ対応のウェブサイト制作で、ディスプレイサイズによっては見出しや文章での改行位置が求める位置で行われないケースはありませんか?PCなどの幅が広い場合ですと問題ないが、スマホの画面で見た時に、単語の真ん中で改行されてしまっている、、と、機能要件には影響しなくても誰もが一目見て違和感を感じてしまう状態になってしまいます。
そこで今回はCSSを使って、このようなケースでの対応例を見ていきたいと思います。今回は見出しテキストを、デスクトップのディスプレイサイズと、モバイルのディスプレイサイズで見たときをサンプルとしていきます。
【HTML】※一部抜粋
<h1> 見出し文字や文章のテキストでディスプレイに合わせて改行位置をコントロールしたい </h1>デスクトップのディスプレイで見たときはこんな感じで1行に収まるかと思います。ただし、特別な対応をせずにそのままモバイルの画面で見た場合は、画面幅に合わせて意図しない場所で自動的に改行され複数行で表示されるのではないでしょうか。
// Desktop Display 見出し文字や文章のテキストでディスプレイに合わせて改行位置をコントロールしたい // Mobile Display 見出し文字や文章のテキストでディス プレイに合わせて改行位置をコント ロールしたい
brタグを改行したい位置に入れて、モバイルの時だけ改行をさせる
そこで、よく見かける対応としてbrタグを入れて改行させるのですが、メディアクエリーで表示非表示を切り替える方法があります。このような感じであらかじめ改行位置にbrタグを入れてCSSで表示非表示を切り替えています。 【HTML・CSS】※一部抜粋// HTML <h1> 見出し文字や文章のテキストでディスプレイに合わせて<br>改行位置をコントロールしたい </h1> // CSS h1 > br { display: none; } @media screen and (min-width:480px) { h1 > br { display: block; } }こうすることで、同じくデスクトップで表示させた時には改行されずに1行で表示されますが、モバイルの場合は求める改行位置で改行されるようになります。
// Mobile Display 見出し文字や文章のテキストでディスプレイに合わせて 改行位置をコントロールしたいただし、より小さいディスプレイで見た時に、さらに改行される箇所が発生した場合、下記のようにこの改行が違和感になる場合もあります。brタグを使う方法は対応できるケースとして限定的になってしまいます。
// Mobile Display(smaller than) 見出し文字や文章のテキストでディスプ レイに合わせて 改行位置をコントロールしたい
インラインブロックを指定したspanを使う
そこで、改行させたくないテキストの範囲をdisplay: inline-block;のスタイルついたspanタグで囲む方法があります。具体的には下記のように対応します。 【HTML・CSS】※一部抜粋// HTML <h1> 見出し文字や文章のテキストで<span>ディスプレイに合わせて</span><span>改行位置をコントロールしたい</span> </h1> // CSS h1 > span { display: inline-block; }これで実際に各サイズのディスプレイで見てみますとこのような感じになります。デスクトップの広さですともちろん1行で表示されます。そこからモバイルのディスプレイはばに変わると、spanタグで囲ったブロックごと改行されます。
// Desktop Display 見出し文字や文章のテキストでディスプレイに合わせて改行位置をコントロールしたい // Mobile Display 見出し文字や文章のテキストでディスプレイに合わせて 改行位置をコントロールしたいこのような形で改行されるので、さらに小さいディスプレイサイズでも求める改行位置で改行させることができ、brタグを使った方法より柔軟に対応できるようになります。
// Mobile Display(smaller than) 見出し文字や文章のテキストで ディスプレイに合わせて 改行位置をコントロールしたい改行位置がおかしいからといって、重大な問題が発生するケースはまれかと思いますが、誰が見てもわかりますしクライアントさんによっては強い違和感を感じられるケースもあるかと思いますので、改行位置で困った場合には是非活用してみてはいかがでしょうか。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories