配色メモが楽になるjQueryプラグイン

20-04-02 20-04-02

#596697/#ffffff
#57dece/#ffffff
#fdfa68/#ffffff
#fd9168/#ffffff
#bfedc2/#ffffff
#ffedc2/#ffffff
#eddaf6/#ffffff
#daeaf6/#ffffff
#fffbb3/#ffffff
#d0fcb0/#ffffff

トップのサンプルと使用例02のデザイン用ソースコード調整
使用例01を以前junkページに置いていた配色メモ準拠に修正
処理内容調整
記事再編
記事投稿

web上掲載配色メモの記述がまあまあ楽になるjQueryプラグインっぽいものです。

配色案一個一個の為にサンプル用の記述してコピー用の記述して～と同じカラーコード何回も入力するのが面倒だったので作ってみました。

何ができるの？

少ない記述で簡単に配色メモが作れます。

例えばですが、上部に表示している四角いストライプ一つあたりののHTML記述は下記です。

html


        
	<li>#596697/#ffffff</li>

端的に言えば、指定した要素内の/区切りで記述したカラーコードなんかを別に用意したHTMLテンプレートに当てはめ、要素内をテンプレートと置き換えて表示します。

テンプレートさえ変えれば配色案群の記述は使いまわしで別例表示とかもできるので、そこそこ便利です。おそらく。きっと。たぶん……

source code

プラグイン

jQuery


        
	(function( $ ){
	
	$.fn.colorMEMO = function(template,split){
		var split = split||'/';
		return this.each(function(){
			var list = $(this).text().split(split);
			$(this).html(template.replace(/#c(\d+)#/g,function(s,c){
				return list[parseInt(c,10)];
			}));
		});
	};
	
	})( jQuery );

呼び出し例

jQuery


        
	$(function(){
	
	$('#demo > li').colorMEMO('<span style="color:#c0#">#c0#</span>');
	
	});

$('#demo > li')：対象要素の指定
'<span ......'：使用テンプレート(string型)

テンプレートの製作

対象要素内/区切りで左から順に、#c0##c1##c2#...と番号が振られます。

色に関わる部分のみ上記で代用し、あとは普通にHTMLで記述してください。

色に関わらないstyle指定は、別途cssファイルなりstyle要素なりでの指定をお薦めします。

HTML要素内から.html()メソッドでテンプレートを取得する場合、テンプレート作成にてstyle属性での記述はお薦めしません。

cssの値が借り置きの#c1#だと、ブラウザによっては誤った記述として該当箇所の記述を削除されるので表示が上手くいきません。

data-styleなど独自の属性を使用し、.html().replace(/data-style/g,'style')の様に、jQuery記述内での置き換えをお勧めします。

上記サンプルでの記述

上部のストライプ用の記述はこんなんでした。

jQuery


        
	$(function(){
	
	$('#demo00 > li').colorMEMO('<div style="background-image: repeating-linear-gradient(45deg,#c0# 0 8px,#c1# 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#c0# 0 8px,#c1# 8px 16px);"><span class="ribbon" style="background-color:#c0#;color:#c1#;">#c0#</span></div>');
	
	});

CSS


        
	@import url('https://fonts.googleapis.com/css2?family=Bellota&display=swap');
	
	#demo00 {
		display: inline-flex;
		margin: 0;
		padding: 20px;
		list-style-type: none;
	}
	
	#demo00 > li {
		flex: 1 1 auto;
		min-width: 150px;
		width: 20%;
		margin: 0 10px;
	}
	
	#demo00 > li > div {
		position: relative;
		padding-top: 100%;
		border: solid 1px #cccccc;
	}
	
	#demo00 .ribbon {
		position: absolute;
		bottom: 0; left: 50%;
		display: block;
		height: 25%; width: 50%;
		padding-top: 13%;
		border-radius: 20%;
		transform: translate( -50% , 50% );
		clip-path: polygon( 0 0 , 50% 25% , 100% 0 , 100% 100% , 50% 75% , 0 100% );
		font-family: 'Bellota', cursive;
		font-size: 12px;
		line-height: 0;
		text-align: center;
	}

html


        
	<ul id="demo00">
	  <li>#596697/#ffffff</li>
	  <li>#57dece/#ffffff</li>
	  <li>#fdfa68/#ffffff</li>
	  <li>#fd9168/#ffffff</li>
	  <li>#bfedc2/#ffffff</li>
	  <li>#ffedc2/#ffffff</li>
	  <li>#eddaf6/#ffffff</li>
	  <li>#daeaf6/#ffffff</li>
	  <li>#fffbb3/#ffffff</li>
	  <li>#d0fcb0/#ffffff</li>
	</ul>

jQuery実行後のhtml


        
	<ul id="demo00">
	  <li><div style="background-image: repeating-linear-gradient(45deg,#596697 0 8px,#596697 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#596697 0 8px,#596697 8px 16px);"><span class="ribbon" style="background-color:#596697;color:#596697;">#596697</span></div></li>
	  <li><div style="background-image: repeating-linear-gradient(45deg,#57dece 0 8px,#57dece 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#57dece 0 8px,#57dece 8px 16px);"><span class="ribbon" style="background-color:#57dece;color:#57dece;">#57dece</span></div></li>
	  <li><div style="background-image: repeating-linear-gradient(45deg,#fdfa68 0 8px,#fdfa68 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#fdfa68 0 8px,#fdfa68 8px 16px);"><span class="ribbon" style="background-color:#fdfa68;color:#fdfa68;">#fdfa68</span></div></li>
	  <li><div style="background-image: repeating-linear-gradient(45deg,#fd9168 0 8px,#fd9168 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#fd9168 0 8px,#fd9168 8px 16px);"><span class="ribbon" style="background-color:#fd9168;color:#fd9168;">#fd9168</span></div></li>
	  <li><div style="background-image: repeating-linear-gradient(45deg,#bfedc2 0 8px,#bfedc2 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#bfedc2 0 8px,#bfedc2 8px 16px);"><span class="ribbon" style="background-color:#bfedc2;color:#bfedc2;">#bfedc2</span></div></li>
	  <li><div style="background-image: repeating-linear-gradient(45deg,#ffedc2 0 8px,#ffedc2 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#ffedc2 0 8px,#ffedc2 8px 16px);"><span class="ribbon" style="background-color:#ffedc2;color:#ffedc2;">#ffedc2</span></div></li>
	  <li><div style="background-image: repeating-linear-gradient(45deg,#eddaf6 0 8px,#eddaf6 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#eddaf6 0 8px,#eddaf6 8px 16px);"><span class="ribbon" style="background-color:#eddaf6;color:#eddaf6;">#eddaf6</span></div></li>
	  <li><div style="background-image: repeating-linear-gradient(45deg,#daeaf6 0 8px,#daeaf6 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#daeaf6 0 8px,#daeaf6 8px 16px);"><span class="ribbon" style="background-color:#daeaf6;color:#daeaf6;">#daeaf6</span></div></li>
	  <li><div style="background-image: repeating-linear-gradient(45deg,#fffbb3 0 8px,#fffbb3 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#fffbb3 0 8px,#fffbb3 8px 16px);"><span class="ribbon" style="background-color:#fffbb3;color:#fffbb3;">#fffbb3</span></div></li>
	  <li><div style="background-image: repeating-linear-gradient(45deg,#d0fcb0 0 8px,#d0fcb0 8px 16px);background-image: -webkit-repeating-linear-gradient(45deg,#d0fcb0 0 8px,#d0fcb0 8px 16px);"><span class="ribbon" style="background-color:#d0fcb0;color:#d0fcb0;">#d0fcb0</span></div></li>
	</ul>

使用例

demo01

#f4ead5/#98607c/#e94e77/#c6e5d9/#ebdac8
#e0e0c0/#000000/#c0e000/#e08040/#cccccc
#eae5da/#3f3541/#ea9575/#add5c0/#ac887b
#cfd2c1/#8c9974/#a0cebd/#95b6aa/#ffffff

コードを見る

jQuery


        
	$(function(){
	
	$('#demo01 > li').colorMEMO('<div style="background-color:#c0#;color:#c1#" class="wrp"><p class="h1" style="color:#c2#">page title</p><p class="menu" style="color:#c3#"><span>menu</span> <span>menu</span> <span>menu</span></p><p>text text text</p><p class="sub" style="color:#c4#">subtext</p></div>');
	
	});

CSS


        
	@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
	
	#demo01 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 0;
		padding: 0;
		list-style-type: none;
		text-align: center;
		font-family: 'Fredoka One', cursive;
	}
	#demo01 > li {
		width: 23%;
		min-width: 14em;
		margin: 1em auto;
		filter: drop-shadow( 0 3px 3px rgba(0,0,0,0.1) );
	}
	#demo01 .wrp {
		padding: 4em 0 3em;
		line-height: 1.8em;
		border-radius: 1em;
		-webkit-mask: radial-gradient(circle at center 2em, transparent .6em, #000 .6em);
		        mask: radial-gradient(circle at center 2em, transparent .6em, #000 .6em);
	}
	#demo01 p {
		margin: 0;
	}
	#demo01 .h1 {
		margin-bottom: 0.7em;
		font-size: 1.6em;
		font-weight: bold;
		line-height: 1em;
	}
	#demo01 .menu span {
		cursor: pointer;
	}

html


        
	<ul id="demo01">
	  <li>#f4ead5/#98607c/#e94e77/#c6e5d9/#ebdac8</li>
	  <li>#e0e0c0/#000000/#c0e000/#e08040/#cccccc</li>
	  <li>#eae5da/#3f3541/#ea9575/#add5c0/#ac887b</li>
	  <li>#cfd2c1/#8c9974/#a0cebd/#95b6aa/#ffffff</li>
	</ul>

demo02

30deg/#a0f8e8/#fbcbee/#fbf091
-40deg/#1a93fb/#1afffb/#ffe0ff
90deg/#ecfbb4/#c0ebe6/#ece2ee
70deg/#f87162/#f8ec62/#c9f862

コードを見る

jQuery


        
	$(function(){
	
	$('#demo02 > li').colorMEMO('<div class="grd" style="background-image:linear-gradient(#c0#,#c1#,#c2#,#c3#);"><label><input type="text" value="linear-gradient(#c0#,#c1#,#c2#,#c3#)" /></label></div><div class="data"><span><i style="color:#c1#"></i>#c1# <i style="color:#c2#"></i>#c2# <i style="color:#c3#"></i>#c3#</span><span>#c0#<i style="transform:rotate(#c0#)"></i></span></div>');
	
	});

CSS


        
	@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
	
	#demo02 * {
		font-family: 'Share Tech Mono', monospace;
		font-size: 10px;
		line-height: 24px;
		outline: none;
	}
	#demo02 > li {
		max-width: 300px;
		margin: 1em auto;
		background-color: #ffffff;
		border-radius: 1em;
		overflow: hidden;
		box-shadow: 0 3px 3px rgba(0,0,0,0.1);
		white-space: pre;
	}
	#demo02 .grd {
		padding-top: 4em;
	}
	
	#demo02 label {
		display: flex;
		align-items: center;
		padding-left: 1em;
		background-color: rgba(255,255,255,0.8);
		opacity: 0;
		transition: opacity 0.5s;
	}
	#demo02 > li:hover label {
		opacity: 1;
	}
	#demo02 label::before {
		content: '\7b''CSS''\7d';
	}
	#demo02 input {
		flex: 99 99 auto;
		padding: 0 1em;
		border: none;
		background-color: transparent;
		color: #000000;
	}
	#demo02 .data {
		display: flex;
		justify-content: space-between;
		padding: 0 1em;
	}
	
	#demo02 .data i {
		display: inline-block;
		width: 1em;
		line-height: 1em;
		vertical-align: middle !important;
		text-align: center;
		margin: 0 0.3em;
	}
	#demo02 .data i[style*="color"] {
		--mark: '\f0a3';
		margin-left: 0;
	}
	#demo02 .data i[style*="rotate"] {
		--mark: '\f139';
		margin-right: 0;
	}
	#demo02 .data i::before {
		content: var(--mark);
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
	}

html


        
	<ul id="demo02">
	  <li>30deg/#a0f8e8/#fbcbee/#fbf091</li>
	  <li>-40deg/#1a93fb/#1afffb/#ffe0ff</li>
	  <li>90deg/#ecfbb4/#c0ebe6/#ece2ee</li>
	  <li>70deg/#f87162/#f8ec62/#c9f862</li>
	</ul>

※利用に登録が必要なFont Awesomeを使用しています。

使用しない場合は下記編集を。

''間を代替記号へ変更

削除