レスポンシブ
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
レスポンシブテンプレートでデザインを行って
いますが、フォントサイズをどうするのか悩んでいます。
やりたいことは作成した画像の上に文章を載せていくのですが
デバイスによってフォントサイズが変わる為、改行がずれ、文字が特定の位置からはみ出すなど、ズレが生じます。
メディアクエリを使うのか、その他のコーディングや方法があれば教えて頂きたいです。
メディアクエリを使う場合はコード記入例も合わせても教えて頂ければ助かります。
よろしくお願いいたします。
いますが、フォントサイズをどうするのか悩んでいます。
やりたいことは作成した画像の上に文章を載せていくのですが
デバイスによってフォントサイズが変わる為、改行がずれ、文字が特定の位置からはみ出すなど、ズレが生じます。
メディアクエリを使うのか、その他のコーディングや方法があれば教えて頂きたいです。
メディアクエリを使う場合はコード記入例も合わせても教えて頂ければ助かります。
よろしくお願いいたします。
ajail さん
02月17日 17時19分
ajailさん、こんにちは。
おっしゃるようにレスポンシブは、閲覧環境の違いにより改行位置がずれ、文字がはみ出ることが多いと思います。フォントサイズの要因もあるかもしれませんが、ウィンドウ幅の違いに起因することが多いです。
これに関しては、
1. 該当箇所だけ文字部分のフォントサイズを横幅を固定にする（必要であればフォントサイズもピクセル指定）
2. はみ出ても見栄えが損なわれづらいデザイン・配置にする
3. 様々な環境で閲覧できるよう対処する
等が考えられると思います。
3番目の案を採ることも多いですが、その際によく使うのがおっしゃるようにメディアクエリです。PCサイト・スマホサイトなどと全く別サイトにする場合を除けば、このメディアクエリを使ってデバイスごとの調整をするのが一般的です。
以下の例で言えば、通常のwidthが30%、500px以上で40％、768px以上で50%と、ウィンドウ幅によって通常のwithを打ち消しています。つまりはデバイスに応じて、.hogeに適用されるCSSが変わるというわけです。
もう少し小刻みに数値を変えてあげたり、ここでフォントサイズの指定等も可能です。
先ほどの例ではmin-widthを使用し、モバイル（スマホ）を優先してPC等のウィンドウサイズが大きいデバイスでCSSを上書きする形でしたが、max-widthを使えば逆も可能です。
こちらは通常のwidthが50%、767px以下で40％、499px以下で30%指定になり、先ほどの例と全く同じ動作をします。
メディアクエリに関しては、すでに様々な解説がWeb上にたくさんありますので、よろしければそちらもご参照ください。
あとは余談ですが、Sassという言語を使えば、もっと簡単に@media～を使う事が可能です。
通常のCSSが書けるようになったら、こちらのキーワードも調べてみると良いと思います。
おっしゃるようにレスポンシブは、閲覧環境の違いにより改行位置がずれ、文字がはみ出ることが多いと思います。フォントサイズの要因もあるかもしれませんが、ウィンドウ幅の違いに起因することが多いです。
これに関しては、
1. 該当箇所だけ文字部分のフォントサイズを横幅を固定にする（必要であればフォントサイズもピクセル指定）
2. はみ出ても見栄えが損なわれづらいデザイン・配置にする
3. 様々な環境で閲覧できるよう対処する
等が考えられると思います。
3番目の案を採ることも多いですが、その際によく使うのがおっしゃるようにメディアクエリです。PCサイト・スマホサイトなどと全く別サイトにする場合を除けば、このメディアクエリを使ってデバイスごとの調整をするのが一般的です。
以下の例で言えば、通常のwidthが30%、500px以上で40％、768px以上で50%と、ウィンドウ幅によって通常のwithを打ち消しています。つまりはデバイスに応じて、.hogeに適用されるCSSが変わるというわけです。
.hoge {
width: 30%;
}
@media (min-width: 500px) {
.hoge {
width: 40%;
}
}
@media (min-width: 768px) {
.hoge {
width: 50%;
}
}
width: 30%;
}
@media (min-width: 500px) {
.hoge {
width: 40%;
}
}
@media (min-width: 768px) {
.hoge {
width: 50%;
}
}
もう少し小刻みに数値を変えてあげたり、ここでフォントサイズの指定等も可能です。
先ほどの例ではmin-widthを使用し、モバイル（スマホ）を優先してPC等のウィンドウサイズが大きいデバイスでCSSを上書きする形でしたが、max-widthを使えば逆も可能です。
こちらは通常のwidthが50%、767px以下で40％、499px以下で30%指定になり、先ほどの例と全く同じ動作をします。
.hoge {
width: 50%;
}
@media (max-width: 767px) {
.hoge {
width: 40%;
}
}
@media (max-width: 499px) {
.hoge {
width: 30%;
}
}
width: 50%;
}
@media (max-width: 767px) {
.hoge {
width: 40%;
}
}
@media (max-width: 499px) {
.hoge {
width: 30%;
}
}
メディアクエリに関しては、すでに様々な解説がWeb上にたくさんありますので、よろしければそちらもご参照ください。
あとは余談ですが、Sassという言語を使えば、もっと簡単に@media～を使う事が可能です。
通常のCSSが書けるようになったら、こちらのキーワードも調べてみると良いと思います。
馬場誠 さん
02月18日 08時49分
馬場様
丁寧なご回答ありがとうございました。
仰って頂いた通り、メディアクエリで調整を進めていこうと思います。
そこで新たな質問ですが、
@medeiaと@media screen andと色々書き方があるようですが
どちらも同じなのでしょうか？
また、フォントサイズを合わせるにあたり、
上記回答の通りwidthで合わせるのが良いのでしょうか？
調べてみたところ、シンプルなのはfont-sizeを％で調整する方法だと思いますがそれだと不都合があるのでしょうか？
他の方法ですとrem、em、vwなど色々な単位が出てきています。
色々なアプローチの仕方はあるかと思いますが、
行いたいデザインのメイン作業となるのは先述しましたとおり、
画像の所定の位置に文字を載せていく作業となります。
おススメの最適な方法があれば、教えて頂ければ助かります。
丁寧なご回答ありがとうございました。
仰って頂いた通り、メディアクエリで調整を進めていこうと思います。
そこで新たな質問ですが、
@medeiaと@media screen andと色々書き方があるようですが
どちらも同じなのでしょうか？
また、フォントサイズを合わせるにあたり、
上記回答の通りwidthで合わせるのが良いのでしょうか？
調べてみたところ、シンプルなのはfont-sizeを％で調整する方法だと思いますがそれだと不都合があるのでしょうか？
他の方法ですとrem、em、vwなど色々な単位が出てきています。
色々なアプローチの仕方はあるかと思いますが、
行いたいデザインのメイン作業となるのは先述しましたとおり、
画像の所定の位置に文字を載せていく作業となります。
おススメの最適な方法があれば、教えて頂ければ助かります。
ajail さん
02月18日 22時50分
ajailさん、こんにちは。
screenという指定は、PCやスマホ・タブレットなどのスクリーンを持ったデバイスが対象となります。
他にprint（印刷）やspeech（音声読み上げ）やall（全てが対象）等があります。
指定しなかった場合はallになります。
上の返信では簡潔に省略した形で書きましたが、一般的な用途であれば、@media screen ～の記載で良いと思います。
単純なフォントサイズ（＝大きさ）のことであれば、きちんと指定することを考えれば良いと思います。正しく指定できていれば、デバイスによって明らかに想定外の大きさになることはそうないはずです。
%指定は昔は王道でしたが、HTMLの階層が深くなると親要素のフォントサイズが子に継承されてしまい、何ピクセル相当になるか分からなくなるデメリットがあります。
80%の120%の90%……では何ピクセル相当になるかさっぱり……という訳ですね。
そのため、最近はremがよく使われます。
とすれば、hogeはほとんどの環境で16px相当になります（厳密では無いです）。
%指定と違い、HTML内のどこで指定しても大きさが変わらないので便利です。
ちなみに、背景画像の上に文字を載せる場合、横幅で調整することができるケースもあります。……が、それだけで全て対応できるとは限りませんし、できたとしても、@media～だらけになってしまい、スマートに記述できないこともあります。
そんな時、該当箇所のフォントサイズの単位にvwを使うと、スマートに解決できることもあります。（Web上に詳しく解説されているのでvwでググってみてください）
結局はケースバイケースということになりますね。
> @medeiaと@media screen andと色々書き方があるようですが
> どちらも同じなのでしょうか？
screenという指定は、PCやスマホ・タブレットなどのスクリーンを持ったデバイスが対象となります。
他にprint（印刷）やspeech（音声読み上げ）やall（全てが対象）等があります。
指定しなかった場合はallになります。
上の返信では簡潔に省略した形で書きましたが、一般的な用途であれば、@media screen ～の記載で良いと思います。
> また、フォントサイズを合わせるにあたり、
> 上記回答の通りwidthで合わせるのが良いのでしょうか？
単純なフォントサイズ（＝大きさ）のことであれば、きちんと指定することを考えれば良いと思います。正しく指定できていれば、デバイスによって明らかに想定外の大きさになることはそうないはずです。
%指定は昔は王道でしたが、HTMLの階層が深くなると親要素のフォントサイズが子に継承されてしまい、何ピクセル相当になるか分からなくなるデメリットがあります。
80%の120%の90%……では何ピクセル相当になるかさっぱり……という訳ですね。
そのため、最近はremがよく使われます。
html {
font-size: 62.5%;
}
.hoge {
font-size: 1.6rem;
}
font-size: 62.5%;
}
.hoge {
font-size: 1.6rem;
}
とすれば、hogeはほとんどの環境で16px相当になります（厳密では無いです）。
%指定と違い、HTML内のどこで指定しても大きさが変わらないので便利です。
ちなみに、背景画像の上に文字を載せる場合、横幅で調整することができるケースもあります。……が、それだけで全て対応できるとは限りませんし、できたとしても、@media～だらけになってしまい、スマートに記述できないこともあります。
そんな時、該当箇所のフォントサイズの単位にvwを使うと、スマートに解決できることもあります。（Web上に詳しく解説されているのでvwでググってみてください）
結局はケースバイケースということになりますね。
馬場誠 さん
02月19日 15時37分
