ビューポイントでカクカクする問題をCSSで解決します

パソコン、タブレット、スマホでビューポイントを設定する機会があると思います(パソコンとスマホの場合もあります)。
そうするとビューポイントの位置で文字がカクカクという挙動を起こします。
下記GIFを参照してください。

このカクカクが気になりませんか?
今回はこのカクカク問題を解決したいと思います。
ELEMENTORでの解説になりますが、htmlでも、ほかのツールでも同じ方法で解決できます。

サイト設定でフォントサイズを指定

まず、サイト設定のタイポグラフィでH1からH6のフォントサイズを各端末(パソコン、タブレット、スマホ)の設定をします。

このテスト環境では、H1のパソコンを6.6em、タブレットは省略、スマホを3.2emに設定をしました。
他も同様に設定してください。

Clamp CSS

CSSの「Clamp」を使って制御していきます。
Clampは日本語では「かすがい」と訳されますが、パソコンからタブレット、タブレットからスマホのつなぎ目のような意味合いだと思います。
使うサイトは「Font-size Clamp Generator」です。

先ほどのフォントサイズを入力します。
左がスマホで右がパソコンです。
矢印の上のビューポイントの数字はご自身の環境で適宜設定してください。

入力できたら、CSSをコピーします。

CSSを書く

コピーしたCSSを適当な場所に入れます。
ELEMENTOR PROユーザーでしたら、カスタムCSSという箇所がありますので、そこが良いでしょう。
PROをお持ちでない方はこの機会に購入をご検討ください(ELEMENTOR PROはこちら)。

上の画像のClassの「988」は固有の数字ですので、調べる必要があります。

グーグルのデベロッパーツールでCLASSを探してみてください。

以上で設定完了です。
結果はこちらのGIFです。H1のフォントが画面の幅にあわせて6.6emから3.2emにスムーズに小さくなっていく様子が分かると思います。

あとは見出しにhtmlタグを設定してあげてください。

まとめ

一見面倒そうな設定ですが、理解できると比較的簡単に設定できます。
また、画面サイズに応じてテキストサイズが変わるので、ビューポイントのちょい手前とちょい後ろでデザインの崩れが起きることを防げます。
今後はこの設定がELEMENTORのデフォルトになっていると良いですね。

この記事についてのご質問がある方はワードプレスの学校でお願いいたします。

当社では、WordPressを用いたWebサイト制作を行っております。
ホームページの制作については、こちらからお気軽にお問い合わせください。

制作実績はこちらからご確認ください。
⇒【View Now!】当社の制作事例をチェック!

ノーコードで簡単ウェブ制作なら断然ELEMENTORが便利です。

ワードプレスの学校

ワードプレスについて何時でも何度でも質問ができる「ワードプレスの学校」を開設しました。
本サイトで解決できなかった問題は直接ワードプレスの学校で質問ができます。
ぜひ、ワードプレスの学校をチェックしてみてください!

Join our newsletter

毎週金曜日に最新のワードプレスの情報を配信しています
いつでも解読できますので、お気軽に登録してください

Join Our School

ワードプレスについて何時でも何度でも質問ができる「ワードプレスの学校」を開設しました。
本サイトで解決できなかった問題は直接ワードプレスの学校で質問ができます。
ぜひ、ワードプレスの学校をチェックしてみてください!

— ワードプレスの学校でワードプレスについて一緒に学びませんか —

ブログを読むより、ユーチューブ動画を見るより、ワードプレスに精通した講師に直接聞いて問題を解決しましょう!ワードプレスの学校は、質問し放題のオンラインスクールです。