個別記事のページです

2015年6月17日(水)
このエントリーをはてなブックマークに追加

レスポンシブデザインの文章で改行するときの便利技

まずこれをご覧ください。
同じページですが、左がパソコン、右がスマホを使って閲覧したときの見え方です。
kaigyo01.png
左はブログでよく使われる一行アケの文章ですが、右はスマホで使われる4~8行で1段落にまとめた文章です。

要はブラウザ幅が狭くなったとき、不要な改行タグを消せばよいわけです。
そのためには、cssでまずブラウザ幅切り替えの基準を作成します。
そして下記のようなクラスをつくります。


@media screen and (min-width:701px){}/*パソコン用*/
@media screen and (max-width:700px){.pcwatch{display: none !important;}}/*スマホ用*/

クラス:pcwatchはスマホ用の幅になったら、最優先でそのタグを表示しない、という意味です。
これを使い、二種類の改行コードを作ります。ひとつは「どんな状況でも改行」、もうひとつは「パソコンのみ改行、スマホでは改行しない」です。

<br> <br class="pcwatch">

このふたつを使い分けると、文章の改行を制御できます。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ