MENU
CLOSE
CODEWEBSITE Edit : 2020.07.31 Update : 2023.06.13

背景色に合わせて文字色や画像の色を変更したいときに使えるMidnight.js

Contents
  1. HTML
  2. CSS
  3. JS
ダウンロードはこちら「Midnight.js」から。 今回作成したデモ 以下、デモを参照しながらみるとわかりやすいです!
Contents
  1. HTML
  2. CSS
  3. JS

HTML

headerでjqueryとMidnight.jsを読み込む  

CSS

JS

今回h1タグで囲まれた「Midnight」の箇所の色を変更したいので、h1タグをdivで囲み、そこにふったクラス.ttlを指定しました。すると、h1タグが.midnightHeaderというクラスが付いたdivで勝手に囲われるので、cssにて.defaultの時と、.darkの時で色などを設定します。       文字でなくても、例えばロゴの色を変更したい場合は、ロゴをsvgで作成しfillの色を変更したり、背景画像として設置し、cssで.midnightHeader.defaultのときと.midnightHeader.darkのときでbackgroundを変更するなどでもうまく動作してくれます。

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。