[Kaitaku]

既出だと思うのですが、回答を見つからなかったため、質問させていただきます。初心者です。

【お使いの Snow Monkey のバージョン】バージョン: 17.2.3
【お使いの Snow Monkey Blocks のバージョン】未使用
【お使いの Snow Monkey Editor のバージョン】未使用
【お使いのブラウザ】Chrom
【当該サイトのURL】納品予定のため非公開で行かせていただきます。

### 実現したいこと

⑴スマホ表示では文字の大きさを小さくしたい。

２画像の大きさをPC・スマホにレスポンシブ対応できるようにしたい。

### 発生している問題

レスポンシブ対応ができていない。❶文字が大きく改行も辺でよみにくい。❷写真がレスポンシブ対応していない。❸画像に文字が被ってしまう。

コード等を書かずして簡単にレスポンシブ対応できる方法はありませんか？

### 試したこと

スマホ表示と文字の大きさを変えて表示させたいのですが、CSSを入れる必要がありますか？CSSはわからなく、プレビューで変更を試みているのですが、それでは不可能でしょうか？

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

具体例がわからないのでもしかしたら他に対応方法があるかもしれませんが、基本的には CSS を書くことになると思います。

♥ 5

いいねをした人:

[es：エス]

キタジマさんが仰っているとおり、どの状態でそうされたいのかにもよりますが、基本的にCSSは必要かなと思います。

CSSに頼りすぎるのもまた問題となることもありますが、納品予定ということはお仕事で制作されていると思いますので、CSSがちょっとでもわかってくると何かと便利ですし、何よりさらに楽しくなると思いますので、この機会にトライされることもおすすめしますよ。

もし、やってみようかな、トライしてみようかな、と思われたら、お返事ください。
私にわかる範囲で…とはなってしまいますが、一緒に考えて、お力になれたらと思います。

♥ 2

いいねをした人:

[Kaitaku]

キタジマさん、esさんご返信ありがとうございます。

esさん、CSSはどちらで学習しましたか？良い記事があれば教えていただければ幸です。

トライしたいことは、PCの文字は現状のままで、携帯画面で見るときは文字の大きさを小さくしたいです。大きいが故に改行が変になったりみえにくくなっていて。ある程度のレスポンシブは適応されるものだと思いこんでおりましたので、いざ納品前になって、焦っております。

携帯画面の時のみ文字を小さくするための方法をご教授いただけると幸です。

♥ 0

いいねをした人: 居ません

[es：エス]

CSSの勉強は、特にこの本このサイト、というものはなくさまざまなものからですが、恐らく勉強しようという視点になると色々と見えてくると思います。

なお、このSnow Monkey フォーラムだけでもかなり勉強になると思いますので、特にSnow Monkeyをお使いであれば、まずはここからはじめてもいいと思いますよ。

PCと、それ以外でフォントサイズを変える際、私は下記のようにしています。

@media (max-width: 1279px) {
  html {
    font-size: 14px;
  }
}

私は、デフォルト（PC）を16pxにしている場合、14pxがバランスがいいかなと思ってそうしていますが、お好みで調整ください。

CSSを記述するにはいくつかの方法がありますが、カスタマイズ画面（カスタマイザー）の下記の項目を開いて、記述するのが簡単でいいと思います。

これからも楽しんで制作や勉強ができるといいですね。^^

♥ 0

いいねをした人: 居ません

[es：エス]

追伸
私はあまりしませんが、スマホのみ、とする場合は下記のようにしています。

@media (max-width: 639px) {
  html {
    font-size: 14px;
  }
}

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

v17.2.4 では、下記の CSS でもカスタマイズできます。

@media (max-width: 639px) {
  :root {
    --_base-font-size-px: 14px;
  }
}

♥ 1

いいねをした人:

[投稿者]

投稿