こんにちは、ゆんつです。
皆さんWEBサイトの背景色は「白」が好きですか？
それとも「黒」が好きですか？
背景色が白くて文字色が黒いほうが読みやすい人もいるでしょうし、それとは逆に背景色が黒くて文字色が白いほうが読みやすい人もいると思います。
背景色を暗くするか明るくするか。
WEBサイトを作るときには迷うところです。
このような感じで背景色を明るくするか暗くするか迷う場合に、どちらのニーズにもこたえるために、サイトを訪問してくれる人が背景色を選択できるようにするという手もあります。
今日はjQueryを使った背景色の変更と、それに伴う文字色の変更について書きたいと思います。
サイトのコンテンツ部分の背景色と文字色の変更
背景色と文字色をスイッチで切り替えるデモを作成してみました。
See the Pen bgc-fc-change by konpure (@yuntu) on CodePen.
ヘッダー部分の切り替えスイッチをクリックすることでコンテンツ部分の背景色と文字色が変わります。
スイッチが左にあるときは白い画面に黒い文字。
スイッチが右にあるときは黒い画面に白い文字となります。
切り替えに使用するスイッチはinputタグのチェックボックスとlabelタグで作成しています。
スイッチ作成のためのHTMLとCSSについてはデモ画面のHTMLとCSSをクリックして確認してみてください。
また、別の記事でスイッチの作り方について詳しく解説していますので、もしよければご覧ください。
今回メインとなっている背景色の切替のポイントとなるのはjQueryです。
jQueryでチェックボックスへのチェックの有無を監視し、チェックが入っている場合と入っていない場合とで背景色と文字色のスタイルを変えるようにします。
$(function() {
$('.switch-input').click(function() {
//チェックボックスのチェックの有無を調べる
let flag = $(this).prop('checked');
//チェックボックスへのチェックの有無でコンテンツの背景色・文字色を変更する
if (flag) {
//背景色を黒に
$('.content').css('background', '#000');
//文字色を白に
$('body').css('color', '#fff');
} else {
//背景色を白に
$('.content').css('background', '#fff');
//文字色を黒に
$('body').css('color', '#333');
}
});
});jQueryの「.prop('checked')」はチェックボックスへのチェックの有無を調べることができます。
チェックボックスにチェックが入っていればtrue、入っていなければfalseが返ってきます。
ですので、それをもとにifで条件分岐を行い背景色と文字色を変更するようにしています。
このような感じで、とても簡単にコンテンツ部分の背景色と文字色を変更することができます。
何かの参考になれば幸いです。
