(120) スマホで表示するときだけ改行したい。

投稿者: | 2022年3月11日

501 views

この記事は最終更新から 862日 が経過しています。

1. やりたいこと

スマホ閲覧時(=画面幅が小さいとき)だけ改行させたい。

2. やってみる

こんな風に書ける。
例えば、画面幅が 700px以下であればスマホ用の表示、すなわち改行させたい場合。

SCSS

.whenSmapho{
  @media (min-width: 700px){    /* viewportが700px以上ならば */
    display: none;              /*  → 表示しない。 */
  }
}

以下のように HTML文中に <br /> を書けばよい。

HTML

あいうえお<br class="whenSmapho" />かきくけこ

3. 参考情報

Windows10で SASS → CSS 変換する方法は、こちらの過去記事に記しています。
(64) 【Sass入門#4】Windows10でもsassを使う。


カテゴリー: CSS

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)