HTMLの <br> タグは、強制的な改行を挿入するために使われますが、
画面幅に応じて改行位置を変えたい場合には不便なことがあります。
このページでは、CSSの display: none を使ってbrタグを非表示にすることで、
改行位置を柔軟に制御する方法を紹介します。
レスポンシブ対応や、文章の読みやすさを保ちながら改行を調整したい場面で役立つ、シンプルかつ実用的なテクニックです。
画面幅が432px以下の場合は
←ここで改行します。
画面幅が433px～768pxの場合は
←ここで改行します。
画面幅が769px～1024pxの場合は
←ここで改行します。
画面幅が1025pxの場合は
←ここで改行します。
<style>
@media screen and (max-width:432px) {
/* 画面幅が432px以下の場合 */
.br432 {display:inline;}
.br768 {display:none;}
.br1024{display:none;}
.br {display:none;}
}
@media screen and (min-width:433px) and ( max-width:768px) {
/* 画面幅が433px以上768px以下 */
.br432 {display:none;}
.br768 {display:inline;}
.br1024{display:none;}
.br {display:none;}
}
@media screen and (min-width:769px) and ( max-width:1024px) {
/* 画面幅が769px以上1024px以下 */
.br432 {display:none;}
.br768 {display:none;}
.br1024{display:inline;}
.br {display:none;}
}
@media screen and (min-width:1025px) {
/* 画面幅が1024px以上 */
.br432 {display:none;}
.br768 {display:none;}
.br1024{display:none;}
.br {display:inline;}
}
</style>