Column
Variable font size

レスポンシブデザインのサイトを作成する際、スマホレイアウト時のフォントサイズに悩むことがあります。特に中央寄せのレイアウト時に、フォントサイズによって極端に左右にマージンが出来たり、変な位置で改行が入ったりすることがあります。

回避するためのフォントサイズ可変指定(viewportwidth)の数値について、メモの意味で取りまとめます

viewportwidth:名の通り、viewportの幅に対しての割合での指定。
指定方法:font-size: ○vw;
例:font-size: 1vw; をiPhone5(320px)で閲覧時、フォントサイズは3.2px。
計算方法:px指定のfont-size×(viewport÷100)=vw

手持ちの実機デバイスが375pxであろうと、414pxであろうと、320pxであろうと、それに合わせてフォントサイズを可変してくれるので、実機の見え方に近いマージン感で別のデバイスでも表示してくれるわけです。

ベース解像度 iPhoneSE等 320pxの場合

画面横幅 font-size(px) font-size(vw)
320px 8px 2.5vw
320px 9px 2.8125vw
320px 10px 3.125vw
320px 11px 3.4375vw
320px 12px 3.75vw
320px 13px 4.0625vw
320px 14px 4.375vw
320px 15px 4.6875vw
320px 16px 5vw
320px 17px 5.3125vw
320px 18px 5.625vw
320px 19px 5.9375vw
320px 20px 6.25vw
320px 21px 6.5625vw
320px 22px 6.875vw
320px 23px 7.1875vw
320px 24px 7.5vw
320px 25px 7.8125vw
320px 26px 8.125vw

ベース解像度 iPhone6/7/8 375pxの場合
※ 小数点以下第四位を切り捨て

画面横幅 font-size(px) font-size(vw)
375px 8px 2.1333vw
375px 9px 2.4vw
375px 10px 2.6666vw
375px 11px 2.9333vw
375px 12px 3.2vw
375px 13px 3.4666vw
375px 14px 3.7333vw
375px 15px 4vw
375px 16px 4.2666vw
375px 17px 4.5333vw
375px 18px 4.8vw
375px 19px 5.0666vw
375px 20px 5.3333vw
375px 21px 5.6vw
375px 22px 5.8666vw
375px 23px 6.1333vw
375px 24px 6.4vw
375px 25px 6.6666vw
375px 26px 6.9333vw

ベース解像度 iPhone6 Plus 414pxの場合

画面横幅 font-size(px) font-size(vw)
414px 8px 1.9323vw
414px 9px 2.1739vw
414px 10px 2.4154vw
414px 11px 2.6570vw
414px 12px 2.8985vw
414px 13px 3.1400vw
414px 14px 3.3816vw
414px 15px 3.6231vw
414px 16px 3.8647vw
414px 17px 4.1062vw
414px 18px 4.3478vw
414px 19px 4.5893vw
414px 20px 4.8309vw
414px 21px 5.0724vw
414px 22px 5.3140vw
414px 23px 5.5555vw
414px 24px 5.7971vw
414px 25px 6.0386vw
414px 26px 6.2801vw

Contents
About

NOONは大阪府堺市を拠点に、個人でウェブ制作をおこなっています。
制作会社様、広告代理店様の外部パートナーとして、また、直接ご依頼主様からコーポーレートサイトやネットショップの制作、運営更新の依頼を請...

Contents
Policy

楽しんでつくろう!
ウェブサイトも役割はあれど、基本は「なにかを伝えるため」にあるはずなので、伝えたなりに、ちゃんと反応のあるサイトにするためには見ている方(お客様)にきちんと伝わる言葉・写真...

Contents
Service

NOONは、ウェブ制作を中心とした制作案件についてオーダーを承っております。
制作料金については、案件毎にお見積もりをさせて頂きますので、お問い合わせください。...

Contents
Contact

このフォームか、もしくはお電話でお問い合わせいただけます。
なにぶんひとりでやっておりますので出れないタイミングもあるかと思いますので留守電にでも入れていただけると助かります。。。 ...

Column

ある広告の巨匠は言いました。平均してボディ・コピーを読む人の5倍の人がヘッドラインを読む。つまり、ヘッドラインである程度の売り込みをしなければ、クライアントの金の80%を無駄にしてしまうのだ

Column

Google Ad Grantsとは非営利活動をおこなう団体に対してGoogleの広告サービス「Adwords」を10,000ドル(USD)/月分、助成してもらえる非営利団体向けのサービスです。 ...

Column

ローカルSEOとは「業種+地名」または「地名+業種」で検索した時に表示されるGoogle Mapのエリアに表示されるように努力する施策です。飲食店や美容業、結婚式場などのローカル(地域)ビジネスに対するキーワードの ...

Column

可変グリッドレイアウトで組まれたデザインはデバイスのモニターサイズに依存しない表示の柔軟さを持つ代わりにそれぞれが並列に組まれる特性を持つため、ストーリー構成やユーザーに見せたい手順がある...

Column

ユーザのサイト閲覧状況(ブラウザなどの幅)によってレイアウトが変化するリキッドレイアウトをまとめています。一定のブラウザサイズを最小サイズとして、横幅の変化に合わせてレイアウトが変わる...

Column

レスポンシブデザインのサイトを作成する際、スマホレイアウト時のフォントサイズに悩むことがあります。特に中央寄せのレイアウト時に、フォントサイズによって極端に左右にマージンが出来たり、変な位置で改行が入ったり ...

Work

株式会社SPACIA様のウェブサイトを制作いたしました。MAIN IMGにはbackstrech、Newsは、ワードプレスを使わずに更新いただけるスクリプトを使用して制作いたしました。

Work

堺 白鷺のヘアサロン [H&K HANDKINS]のウェブサイトを制作いたしました。オーガニック素材にこだわったトータルビューティサロンです。

Work

NPO法人日本もったいない食品センターのウェブサイトを新規作成。食品衛生上、問題の無い廃棄食品の再販売によって日本の食品ロスの低減を目指し、活動している特定非営利活動法人。

Work

株式会社ハッピーメーカーのウェブサイトをリニューアル制作。WORDPRESSはfacebookと連携しており、投稿時にOfficial facebook Pageも更新される仕組みになっています。

Work

大阪で8店舗ヘアサロンを運営する*Charm*/*March*のホームページをリニューアル。店舗詳細ページ、ヘアカタログやクーポン、ブログをコンテンツ管理可能な状態になっておりボリュームの大きなサイトとなっています。

Work

和泉市の𠮷川織物株式会社様のサイトをリニューアルいたしました。一日ロケで写真撮影から入らせていただき、デザインリニューアルからリキッドレイアウトを取り入れたレスポンシブサイトを構築いたしました。

Work

JR茨木市駅前に新規オープンしたar hair様のウェブサイトを新規作成いたしました。
気軽に寄れる場所と金額帯でホットペッパーでも人気を集めています。

Work

THISCOVER+尼崎さまのサイトをフルリニューアルいたしました。
ワードプレスを実装し、ほぼ全てのコンテンツを管理画面上から修正できるように組み込みいたしました。

Work

大阪市の住宅リフォーム、内装事業者の株式会社REGLANZ様のウェブサイトを新規制作いたしました。リキッド系のレイアウトでコーディングし、ワードプレスで施工事例を更新できるように組み込んでいます。

Work

マインドフルネススタジオ「こころ音」様のウェブサイトを新規制作させていただきました。 近年では大企業でも研修で取り入れられる瞑想を体系化したマインドフルネス。大阪では唯一のスタジオとなります。

Work

美容師訪問サービス「おうちカット」様のウェブサイトを新規制作。堺市・大阪狭山市・和泉市・松原市のエリアで「身体的・精神的・環境的な理由」で美容室に行けない方に訪問カットサービスを 提供しています。

Work

京都の出張買取専門店「京福リサイクル」様のウェブサイトをリニューアル制作。デザイン変更のリニューアルに留まらずシステム面での改修、集客面での改善を兼ねてリニューアルから忙しくなったとお声をいただいております

Work

堺市のメディカルトリミングサロン21様のウェブサイトを新規制作。トリミングサービスのみならず、健康チェックやストレス、その他ケアのことも含め、医療的な見地からも終生に渡って総合的なサポートを提供するトリミングサロン。

Work

堺市の21動物病院様のウェブサイトを新規制作。関西全域からわんちゃん、ねこちゃんの歯科診療に来院され、歯周病治療に高い知見と知識を持ち、一般診療においても高い水準の診察をおこなう動物病院。

Column
どうも、NOONの前田です。
Contact
お問い合わせはどんな手段でも構いません。