-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (138 loc) · 8.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HSLA使用を前提としたカラーコード変換ツール | Web制作用 道具箱 | Cloudy knot</title>
<meta name="description" content="Web制作でCSS等カラー指定を「hsla()関数」で統一したいのに、諸経緯あってバラついているカラーコードから変換するのが超面倒！な私やあなたのために手早く簡単にhsla()変換できるツール">
<meta name="google-site-verification" content="rERm7VKZJ9Nn6A3GiCxjveBYB8Jbzkz8tZXfXjlrawM" />
<link rel="stylesheet" href="./src/assets/scss/style.css">
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<script src="color-converter.js" defer></script>
</head>
<body>
<div class="wrapper">
<h1 class="page-heading mt32 mb32">
<span class="sub">Web制作用 道具箱</span>
<span class="main">HSLA使用を前提とした<br class="narrow">カラーコード変換ツール</span>
</h1>
<fieldset class="tool-container -hxhs">
<legend class="legend">Hex(A)→HSLA変換</legend>
<div class="layout-box">
<label for="hex" class="label">Hex(A)値入力欄:</label>
<input id="hex" type="text" name="hex" class="input-field" placeholder="ex. #ffff00 or #ff0 or #ffff0000">
</div>
<button id="convert-button-hxhs" type="button" class="convert-button mt16">変換 ↓</button>
<div class="layout-box mt16">
<div class="output-label">HSLA値<br>出力欄:</div>
<div id="output-hxhs" class="output-field"> </div>
<button id="copy-hxhs" type="button" class="copy-button">←Copy</button>
</div>
</fieldset>
<fieldset class="tool-container -cnhs mt16">
<legend class="legend">カラーネーム→HSLA変換</legend>
<div class="layout-box">
<label for="color-name" class="label">カラーネーム<br>入力欄:</label>
<input id="color-name" type="text" name="color-name" class="input-field" placeholder="ex. blue">
</div>
<button id="convert-button-cnhs" type="button" class="convert-button mt16">変換 ↓</button>
<div class="layout-box mt16">
<div class="output-label">HSLA値<br>出力欄:</div>
<div id="output-cnhs" class="output-field"> </div>
<button id="copy-cnhs" type="button" class="copy-button">←Copy</button>
</div>
</fieldset>
<p class="annotation mt16">※入力文字(特に文頭)のスペース混入にご注意ください<br>※終端/末尾の;(セミコロン)は除外してください</p>
<div class="details-wrapper">
<details class="mt32">
<summary>RGBA→HSLA変換</summary>
<fieldset class="tool-container -rghs">
<legend class="legend">RGBA→HSLA変換</legend>
<div class="layout-box">
<label for="rgba" class="label">RGBA値入力欄:<br>(RGB入力可)</label>
<input id="rgba" type="text" name="rgba" class="input-field" placeholder="ex. rgba(0, 0, 255, 0.5) or rgb(0, 0, 255)">
</div>
<button id="convert-button-rghs" type="button" class="convert-button mt16">変換 ↓</button>
<div class="layout-box mt16">
<div class="output-label">HSLA値<br>出力欄:</div>
<div id="output-rghs" class="output-field"> </div>
<button id="copy-rghs" type="button" class="copy-button">←Copy</button>
</div>
</fieldset>
</details>
<details class="mt32">
<summary>HSLA→Hex変換</summary>
<fieldset class="tool-container -hshx">
<legend class="legend">HSLA→Hex変換</legend>
<div class="layout-box">
<label for="hsla-hx" class="label">HSLA値入力欄:<br>(HSL入力可)</label>
<input id="hsla-hx" type="text" name="hsla-hx" class="input-field" placeholder="ex. hsla(60, 100%, 50%, 1) or hsl(~)">
</div>
<button id="convert-button-hshx" type="button" class="convert-button mt16">変換 ↓</button>
<div class="layout-box mt16">
<div class="output-label">Hex値<br>出力欄:</div>
<div id="output-hshx" class="output-field"> </div>
<button id="copy-hshx" type="button" class="copy-button">←Copy</button>
</div>
<div class="mt8 align-right">※HexA形式では出力しない</div>
</fieldset>
</details>
<details class="mt32">
<summary>HSLA→RGBA変換</summary>
<fieldset class="tool-container -hsrg">
<legend class="legend">HSLA→RGBA変換</legend>
<div class="layout-box">
<label for="hsla-rg" class="label">HSLA値入力欄:<br>(HSL入力可)</label>
<input id="hsla-rg" type="text" name="hsla-rg" class="input-field" placeholder="ex. hsla(60, 100%, 50%, 1) or hsl(~)">
</div>
<button id="convert-button-hsrg" type="button" class="convert-button mt16">変換 ↓</button>
<div class="layout-box mt16">
<div class="output-label">RGBA値<br>出力欄:</div>
<div id="output-hsrg" class="output-field"> </div>
<button id="copy-hsrg" type="button" class="copy-button">←Copy</button>
</div>
</fieldset>
</details>
<details class="mt32">
<summary>CMYK→HSLA変換</summary>
<fieldset class="tool-container -cyhs">
<legend class="legend">CMYK→HSLA変換</legend>
<!-- <div class="alert">開発中 🚧</div> -->
<div class="layout-box">
<label for="cmyk" class="label">CMYK値入力欄:</label>
<input id="cmyk" type="text" name="cmyk" class="input-field" placeholder="ex. CMYK(100,100,0,0)">
</div>
<button id="convert-button-cyhs" type="button" class="convert-button mt16">変換 ↓</button>
<div class="layout-box mt16">
<div class="output-label">HSLA値<br>出力欄:</div>
<div id="output-cyhs" class="output-field"> </div>
<button id="copy-cyhs" type="button" class="copy-button">←Copy</button>
</div>
<div class="mt8 align-right">※RGB経由で変換しており相互変換誤差を含む</div>
</fieldset>
</details>
</div>
<hr class="h-rule mt40">
<section class="mt40">
<h2>使える外部カラーコード変換ツール・サイト</h2>
<ul class="list -itemized">
<li><a href="https://www.color-hex.com/" class="link" target="_blank">Color Hex Color Codes (外部リンク)</a></li>
<li><a href="https://www.webtoolss.com/colorcode2.html" class="link" target="_blank">カラーコード変換ツール2 (外部リンク)</a></li>
<li><a href="https://colorcodesearch.com/cmyk-rgb/" class="link" target="_blank">cmyk 色見本 - Web色変換 (外部リンク)</a></li>
</ul>
</section>
<section>
<h2 class="mt16">関連・参考情報</h2>
<ul class="list -itemized">
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Colors/Applying_color" class="link" target="_blank">CSS を使った HTML の要素への色の適用 - CSS: カスケーディングスタイルシート | MDN (外部リンク)</a></li>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Colors/Applying_color#hsl_functional_notation" class="link" target="_blank">HSL 関数表記 (外部リンク)</a></li>
</ul>
<li><a href="https://www.w3schools.com/colors/default.asp" class="link" target="_blank">Colors Tutorial (外部リンク)</a></li>
</ul>
</section>
<p class="copy-right-parent mt32"><small>© 2022 Cloudy knot by Masanao Ishii</small></p>
</div>
</body>
</html>