レスポンシブデザインの小技（PCとスマホ用に改行を調整する）

2501 ワード
scss haml scss テキストリンク

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ cssの基礎知識が増える
・ レスポンシブデザインについて

例

レスポンシブデザインを整えていて、文字を改行しなければいけない時

手順

① レスポンシブデザインで対応する都度、brタグに適切なクラス名を付けて

index.haml
中略

    %p.inline iSaraでは、基礎知識学習は
    %br.brsp
    %span<>
      事前課題
    %p.inline と
    %span<>
      チャットサポート
    %p.inline のみ。

中略

② cssで隠しておきます

index.scss
// 中略

br.brsp {
  display: none;
}

// 中略

③ 表示をdisplay:blockで切り替えると

index.scss

@media screen and (max-width: 768px) {

// 中略

  br.brsp {
    display: block;
  }

// 中略

無事スマホ用の画面で改行できました。コードを汚さず、編集も軽く、使い回せます