0%

Programmingプログラミングナレッジ

Posted:2019.05.25

display: inline-block;の要素を使って文章の改行位置をコントロールする

レスポンシブ対応のウェブサイト制作で、ディスプレイサイズによっては見出しや文章での改行位置が求める位置で行われないケースはありませんか?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)

見出し文字や文章のテキストで
ディスプレイに合わせて
改行位置をコントロールしたい

 

改行位置がおかしいからといって、重大な問題が発生するケースはまれかと思いますが、誰が見てもわかりますしクライアントさんによっては強い違和感を感じられるケースもあるかと思いますので、改行位置で困った場合には是非活用してみてはいかがでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ