ISARAのレスポンシブ半分終了。pc画面とスマホ画面とで文字の改行を変える方法。

f:id:gharuto:20200630213420j:image

ISARAのレスポンシブデザイン、スマホ画面の模写コーティングが半分くらい終わりました。

一部お見せします↓

f:id:gharuto:20200701094715p:plain
isara.life模写制作LP
f:id:gharuto:20200701094747p:plain
isara.life模写制作LP
f:id:gharuto:20200701094807p:plain
isara.life模写制作LP
f:id:gharuto:20200701094835p:plain
isara.life模写制作LP
f:id:gharuto:20200701094916p:plain
isara.life模写制作LP
f:id:gharuto:20200701094952p:plain
isara.life模写制作LP
f:id:gharuto:20200701095019p:plain
isara.life模写制作LP

なかなかいい感じにいってます。

最初は要領がつかめず苦労しましたが、だんだん早くなりました。

スポンサーリンク

pc画面とスマホ画面とで文字の改行を変える方法。

pc画面とスマホ画面とで文字の改行を変えるのが難しかったです。

どうやるかというと、例えばスマホ画面だけ改行したい所にはHTMLに<br class=”sp”>として、

ベースのCSS(pc画面)には

.sp{display:none;}

レスポンシブCSS(スマホ画面)には

.sp{display:block;}

とします。

pc画面だけ改行したい所には<br class=”pc”>とし、CSSは先程と逆にします。

あとは適宜このクラス(spやpc)を付けていくだけです。

最初はこれがわからずやっていませんでしたが、途中からやり始めました。

同じセレクタを使った方がいい。

レスポンシブcssは時々なぜかスタイルの指定が効かない時があります。

なぜかというと、セレクタをベースのcssと違った書き方をしてるから。

セレクタってクラス名で書くこともあれば、要素名で書くこともありますよね。

同じ要素を指していてもセレクタの書き方が違うとベースのcssが優先されて、レスポンシブcssの指定が効かない時があります。

だからレスポンシブcssでスタイルを変えたい時は、ベースのcssと同じセレクタの書き方で書いた方がいいです。

以上です。

コメント

タイトルとURLをコピーしました