デバイスごとのブレークポイントの指定とスタイルの編集方法について解説します。
デバイスごとの編集方法
1.デバイスごとの見え方
smartLPではPCサイズで作成したデザインを基準に、タブレット・モバイルのブレークポイントを指定することでデバイスごとの見え方を確認することができます。
デフォルトではPCでの見え方になっており、PC・タブレット・モバイルのそれぞれの端末で表示されるサイトのデザインを調整することをレスポンシブ対応と言います。
ブレークポイントを指定すると、レスポンシブ切り替えボタンに背景色が付きます。
2.スタイルの編集方法
スタイルパネルよりデバイスごとにエレメントの値を変更することができます。
数値を入力し、Enterキーを押下するか入力フォームからフォーカスを外すと反映されます。
デバイスを切り替えることでWEBサイトの見え方も変わります。
あなたの理想に合ったデバイスごとの見え方を設定しましょう!
3. 値を変更する際の注意点
smartLPでは、PC・タブレット・モバイルのそれぞれの見え方は包括関係にあります。
そのため、PC版の見え方でエレメントのサイズを変更した場合、タブレット・モバイル版にも反映されます。(タブレット版の見え方でエレメントのサイズや設定を変更した場合、モバイル版にも反映されます。)
例えば、以下のようにデバイスで値が統一されているエレメントの場合、PC版で値を変更するとタブレット・モバイルにも変更した値が反映されます。
そのため、PC版での変更点をタブレット・モバイル版に反映したくない場合はそれぞれで再度設定し直す必要があります。