メディアクエリを使ってWebサイト内の文章の改行をコントロールする方法
レスポンシブレイアウトの一環として、文章の改行をコントロールしたい時に、手段の一つとしてCSSでの対処が考えられます。
今回は、CSSのメディアクエリ（@media） を使って、デバイスのディスプレイ幅に応じて文章の改行をコントロールする方法を二つ紹介します。
brタグに”display: none;”を指定する方法
brタグはデフォルトでdisplay: inline;が指定されていますので、HTMLにbrタグを設置しておいて、改行が不要な場合にdisplay: none;を指定することでCSSでの改行のコントロールができます。
HTML
<p class="sample">一行目のテキスト<br>二行目のテキスト</p>
CSS
@media (min-width: 768px) { .sample br { display: none; } }
擬似要素（”::before”や”::after”）を利用する方法
CSSの擬似要素である::beforeや::afterを利用して、改行を意味する”\A”をwhite-space: pre;を指定して入れることでCSSでの改行のコントロールができます。
※ちなみに、macで”\”（バックスラッシュ）を入力するには”option”+”¥”で入力できます。
HTML
<p><span class="br-set">一行目のテキスト</span>二行目のテキスト</p>
CSS
@media (max-width: 767px) { .br-set::after { content: "\A" ; white-space: pre; } }
まとめ
以上、CSSのメディアクエリを使って、デバイスの画面幅に応じて改行をコントロールする方法について紹介してきました。
参考になりましたら幸いです。
関連記事
:has()擬似クラスを使いこなす！CSSだけで実現する新しいインタラクティブ表現とレイアウト術
CSSの強力な新機能「:has()」擬似クラスを徹底解説！JavaScriptなしでインタラクティブなUIや柔軟なレイアウトを実現し、Webサイトの表現力を劇的に向上させるモダンCSSの最前線を学びましょう。具体的なコード例と応用テクニックで、あなたのWeb開発を加速させます。
CSSの擬似要素を使って背景画像にフィルターをかける
CSSの擬似要素を使って背景画像にフィルターをかける方法を紹介します。
CSSでテキストに下線を引く3つの方法
テキストに蛍光ペンで引いたマーカーのようなアンダーラインを引きたい時に使用できる方法について調べたので、CSSでテキストに下線を引く時に使える3つの方法についてそれぞれまとめて紹介していきたいと思います。 それぞれの方法ごとに出来ることできないことがあったりしますので、それぞれの特徴についてもまとめておきます。
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す