【jQuery】サイトの基準フォントサイズを「大・中・小」で変更するボタンを設置する

[ ID : 2185 ]
シルバー
【jQuery】サイトの基準フォントサイズを「大・中・小」で変更するボタンを設置する
実装目安
3分

概要

ヘッダー等に設置されることの多い「フォントサイズ変更ボタン(大・中・小)」を設置する方法について。

用途・要件

  • サイトの基準フォントサイズをユーザーが指定できるようにフォントサイズ変更ボタン(大・中・小など)を用意する。
  • 予め用意された「大中小」のボタンをクリックすることでサイトの基準フォントサイズが変更されるように処理。
  • 選んだサイズが他のページに遷移後も維持される。
  • html側のdata-fzで指定している値によってフォントサイズを調整可能。
  • JavaScriptライブラリ「js-cookie」を使用する。

注意事項

  • サイトの全てのフォントサイズ指定を相対値(emやrem、%など)で設定しておくこと。
    ※絶対値(px)で指定している場合はボタンをクリックしてもフォントサイズが変更されません。

検証ブラウザ

  • Google Chrome(最新)
  • Microsoft Edge(最新)
  • Firefox(最新)
  • Safari(最新)

その他

  • jQuery バージョン3.6.4使用。
  • JavaScriptライブラリ「js-cookie」 v3.0.1使用。

実装方法

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録