レスポンシブでの小技
こんにちは。セブンスコードの伊藤です。
スマホへの対応は当たり前になりつつあるので今回は文章を読みやすくするための小技を紹介します。
displayで表示を切り替える
例文として
「
グラフィックでは改行位置って結構気にしますよね。しかしWebではあまり気にしていないところが多いと思いますが、レスポンシブなら少し気にしてみてはいかがでしょうか。
」
という文章があるとすると
PCでは
「
グラフィックでは改行位置って結構気にしますよね。
しかしWebではあまり気にしていないところが多いと思いますが、
レスポンシブなら少し気にしてみてはいかがでしょうか。
」
スマホでは
「
グラフィックでは改行位置って結構気にしますよね。しかしWebではあまり気にしていないところが多いと思いますが、レスポンシブなら少し気にしてみてはいかがでしょうか。
」
<p>グラフィックでは改行位置って結構気にしますよね。<br class="pc">しかしWebではあまり気にしていないところが多いと思いますが、<br class="pc">レスポンシブなら少し気にしてみてはいかがでしょうか</p>
|
1 2 3 4 5 6 |
<style> .pc {display: none!important;} @media screen and (min-width: 44.375em){ .pc {display: block!important;} } </style> |
こうすることで何がいいかというと、PCでは中心揃えだけどスマホでは左揃えになる文章ではとても有効な方法だと思います。
PCでの文末の「、」を取りたい
実際にあった案件では改行位置だけでなく、PCで文末の「、」を取りたいというのがありました。
この場合は
<p>グラフィックでは改行位置って結構気にしますよね。<br class="pc">しかしWebではあまり気にしていないところが多いと思いますが<span class="sp">、</span><br class="pc">レスポンシブなら少し気にしてみてはいかがでしょうか</p>
|
1 2 3 4 5 6 7 8 |
<style> .pc {display: none;} .sp {display: inline-block;} @media screen and (min-width: 44.375em){ .pc {display: block;} .sp {display: none;} } </style> |
こうすることで
PCでは
「
グラフィックでは改行位置って結構気にしますよね。
しかしWebではあまり気にしていないところが多いと思いますが
レスポンシブなら少し気にしてみてはいかがでしょうか。
」
という風になります。