スタッフブログStaffblog

新入社員の立原です。

本日は最近私がコーディングを行う上で便利だと感じたCSSを1つご紹介します。

コーディングの際は改行する際に、ただEnterを押して改行しても、プログラム上には反映されません。

改行する為には、< br >というタグを用いることで改行することができます。

ですが、改行のタグをそのままHTML上に記載してしまうと、LP版もSP版も< br >が記載されたところで改行されてしまいます。

LP版ではここで改行したいけど、SP版ではここで改行させたくない等がでできた場合は困ります…

そんなときは< br >にクラスをつけてあげます。クラス名は何でもOKです！

例：< br class="brsp(brのsp版)" >

そしてそのクラスにレスポンシブした際に改行が無効化されるように、レスポンシブCSSに　display:none;　を記載します。

.brsp {display:none;}

するとLP版では改行されていた文章がSP版になると改行されず、文章が続けて表示されるようになります。

このCSSは使い回すことができるので、SP版で改行させたくないところにはこのクラスを当ててください。

brlp　というクラスを作り、SP版で改行させたいけどLP版では改行させたくないというところにこのクラスを当ててコーディングしてみるのも良いと思います！

うまくCSSを組み合わせたりしてみてください。