search
LoginSignup
21

posted at

updated at

💰お前らのゴールデンウィークはゴールドじゃない💰

ゴールデンウィークがゴールドじゃないのでちゃんとゴールデンウィークにする話です。

ということで、今年もGWアドベントカレンダーが立ち上がっていましたね。何の役にも立たないプロトタイプのアドベントカレンダーの参加記事です。

(思ったより伸びてるので番宣: 普段はプロトタイピング専門スクールの運営をしています。)

黄金週間

着手前にゴールデンウィークのゴールデンって僕らの思ってるゴールドなんだよね?と疑問に思いました。

疑心暗鬼。

ウィキペディアによると

ゴールデンウィークまたはゴールデンウイーク(和製英語: Golden Week, GW)とは、日本において毎年4月末から5月初めにかけて休日が続く期間のこと。春の大型連休(おおがたれんきゅう)、黄金週間(おうごんしゅうかん)[1]ともいう。

らしいです。ちゃんとゴールデンウィークは黄金(ゴールド)から由来しているらしいです。

ゴールデンウィークって言ってるけどゴールドじゃない

ということで、ゴールデンウィークは黄金なはずですが

ぜんぜんゴールドじゃないわけです。

白か灰色ですね。
スクリーンショット 2022-05-02 21.40.40.png

なのでこれを ゴールドにします。 (カレンダー的に)

あくまでもイメージです。
スクリーンショット 2022-05-02 21.58.37.png

ということで、このカレンダーをゴールドに近づけてみます。

ゴールドってそもそも何色だ...問題

さて作っていきますが、ゴールドってWebで表現できるのだろうか......

と、調べるとこんな感じの記事が出てきて近いものを再現してくれてますね。

CMYK・RGBで金色(ゴールド)、銀色(シルバー)を表現する配色パターン10選

#CAA846は確かにゴールドっぽいです。

ということでJavaScriptで要素変更してみます。

//背景を変える
document.body.style.backgroundColor = '#CAA846';

//カレンダーの部分の要素を変える
const body = document.querySelector('article');
body.style.backgroundColor = '#CAA846';

お、それっぽくなったんじゃないですかね?

スクリーンショット 2022-05-02 22.06.02.png

「全然ゴールドじゃない」と言われる

@tkyko13さんに見せてフィードバックもらったところゴールドじゃないと言われました。

確かにゴールドというか黄土色ですよね......

ここで ゴールドって光が当たることでゴールドなんだなということに気付きました。

調べると立ち向かってる先人が

CSSで色を限りなくゴールドやシルバーに近づける

グラデーションを入れることでゴールドっぽく見えるんですね。

CSSだとこう表現できる模様です。

div {
	background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}

CSSの関数のlinear-gradient()を使うことで再現できるみたいですね。

僕の場合はこのゴールデンウェークを黄金にしたいのでJavaScriptから制御できないか調べましたが、こちらも先人が。

CSSのGradientをJSで上書きする際のCross Browser対応

ということでこんな感じのコードで実現できました。

const COLOR = `linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%)`;
document.body.style.background = COLOR;

const body = document.querySelector('article');
body.style.background = COLOR;

//ついでにナビゲーション部分も
const nav = document.querySelector('nav');
nav.style.background = COLOR

スクリーンショット 2022-05-02 22.35.09.png

だいぶゴールドになったでしょ。

もっと手軽にゴールドにしたい......

手軽にゴールドにしたいですよね。

ワンクリックでゴールドにできるようにブックマークレットにしてみます。

参考: Bookmarkletを作ろう(準備編)

javascript:(
    function(){
    	const COLOR = `linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%)`;
		document.body.style.background = COLOR;
		const body = document.querySelector('article');
		body.style.background = COLOR;

		const nav = document.querySelector('nav');
		nav.style.background = COLOR;
    }
)();

これをブックマークに仕込めばOKです。

スクリーンショット 2022-05-02 23.39.19.png

ブックマークにコードをそのまま仕込みます。

ということで完成!

ちゃんと動画作ってみたので見て!

おまけ。シルバーウィークにも対応してみた

無意味にシルバーにも対応してみました。

javascript:(
    function(){
		const COLOR2 = `linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%)`;
		
		const nav = document.querySelector('nav');
		const body = document.querySelector('article');
		
		nav.style.background = COLOR2;
		body.style.background = COLOR2;
		document.body.style.background = COLOR2;
    }
)();

スクリーンショット 2022-05-02 23.19.49.png

二つ並べるとめちゃ便利です。ゴールデンウィークとシルバーウィークをボタン一つで切り替えられます。

おわりに

何の役にも立たないであろう。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
21