質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

9794閲覧

スマホサイトのコーディング時、文字サイズはデザインカンプの半分にするのですか?

kusaka00

総合スコア55

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2018/08/06 11:03

Googleで検索しても、スマホで使用するときの文字サイズばかり出てきて見つけれなかったので、質問させてください。

横幅750pxのスマートフォン用デザインデータをもらい、コーディングしております。
余白などは半分にして作成しておりますが、
たとえば文字サイズが24pxだった場合、文字サイズも半分の12pxにするのでしょうか。

初歩的な質問で申し訳ありません。
宜しくお願い致します。

yoshi.R👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/08/06 11:07

幅もですがなぜ半分にするのでしょうか。半分であろうとなんであろうと固定にすること自体間違いに思いますが。
kusaka00

2018/08/06 11:12 編集

質問の仕方がわかりにくく申し訳ありません。別段、半分にこだわっているわけでは無く、文字サイズを計算する時に 12px/ベースの文字サイズ*100%で計算するのと、24px/ベースの文字サイズ*100%で計算するのとでは、出てくる文字サイズの値が変わってくるので、どちらで計算すればいいのかが知りたかったのです。
guest

回答3

0

ベストアンサー

デザイナーがスマホのデザインカンプを750pxで作ってくる場合、
基本的には「iPhone7等の375px幅×2倍(※Retina対応)」のつもりで作っているものと思われます。
その前提であれば、デザインカンプ上の全ての数値は実機表示の2倍の数値で作られていると
判断することになるので、文字サイズもデザインカンプの1/2でコーディングします。

ただし、デザイナー自身が750px幅でデザインカンプを作る意味をちゃんと理解していない、
あるいは余白や写真などのサイズは2倍にしたけど細かい文字サイズの設定まで気が回らずに
うっかり1/2にしたら小さくなりすぎる文字サイズでデザインしてしまった、などといったこともよくあります。
要は、「Retina対応を意識したデザインカンプだから全部の数字は2倍で作る」というルールが
必ずしも徹底されているとは限らないということです。
あるいはそもそもそんなルールでデザインなどしていないという場合もありえます。

なので、一番手っ取り早いのはデザイナーに確認することですね。

投稿2018/08/06 15:21

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kusaka00

2018/08/07 00:37

なるほど、デザインをうのみにしてはいけないという事ですね。実機で見てみて気になる部分はデザイナーさんに聞いてみます。ありがとうございます。
guest

0

おそらく Retina ディスプレイとかの対応を考えて解像度を倍にして作ったのではないでしょうか。
どちらにせよ一度デザイナーに問い合わせたほうが良いと思います。

投稿2018/08/06 11:20

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kusaka00

2018/08/06 21:47

ありがとうございます。一度デザイナーに確認してみます。
guest

0

解像度が統一されていないスマートフォンのWebブラウザ上での各種サイズをわざわざ計算するのはほぼ無意味ですよ。
デザインはあくまでレイアウト参考程度にすべきです。
本来は余白を半分にしている時点でデザイナー視点では既にアウトですし・・

750pxというのも単に参考程度のもの。解像度ベースだともっと大きいものも小さいものもあるはずです。
対応端末が完全に限定されているなら別ですけど。

投稿2018/08/06 11:23

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kusaka00

2018/08/06 11:30

「解像度が統一されていないスマートフォンのWebブラウザ上での各種サイズをわざわざ計算するのはほぼ無意味ですよ。」ということは、本来どのようにコーディングすべきなのでしょうか。やり方、もしくは、ここを見て勉強しなさいというURLがあれば、ご教授いただけませんでしょうか。
m.ts10806

2018/08/06 11:42

rem,emについて調べてみてください。レスポンシブ対応する場合には覚えておいて損はないです(面倒であれば%指定でもいいですけど) まあ昨今は余程特殊な仕様の指定がない限りCSSフレームワークを利用するので、単にレイアウト組むだけであれば気にしなくても済むものですけど。
kusaka00

2018/08/06 11:43

わかりました。ありがとうございます。
m.ts10806

2018/08/06 12:13

もう少し回答がつくのを待ってみた方が良いのでは。
kusaka00

2018/08/06 13:01

すいません、ここのサイトの使い方をよくわかっていなくて…、お言葉に甘えて、一度ベストアンサーを取り消させていただきました。
kusaka00

2018/08/07 00:39

今回は別の方をベストアンサーにさせていただきましたが、色々アドバイスを頂き、ありがとうございました。「rem,em」についても、もう一度調べなおしてみたいと思います。
m.ts10806

2018/08/07 00:49

前に進めたようで何よりです
kusaka00

2018/08/07 00:53

ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問