- 投稿日：2021-04-10T21:04:37+09:00
CSSのradial-gradient、conic-gradientで描いた円グラフをJavaScriptで可変
今回もこちらの続きのような感じですが、単項目の進捗度ではなく複数アイテムの円グラフを描いてみました。 JavaScript circle_graph.js 'use strict'; function drawGraph(obj) { const baseElement = document.getElementById(obj.targetId); if(baseElement === null) return; const bgColor = obj.backgroundColor ?? 'transparent', size = obj.size ?? 200, weight = obj.weight ?? 0.5, sort = obj.sort ?? 1, items = (obj.items ?? []).slice(); // ソート除外アイテム退避 const fixed = []; for(let i = 0; i < items.length; i++) { if(items[i].fixed !== undefined && 'fr'.indexOf(items[i].fixed[0]) >= 0) { fixed.push(items.splice(i--, 1)[0]); } } // ソート if(sort !== 0) items.sort(function(a, b) { return (b.v - a.v) * sort;}); // ソート除外アイテムを戻し if(fixed.length) { fixed.forEach(i => { if(i.fixed === 'f') items.unshift(i); else if(i.fixed === 'r') items.push(i); }); } // トータル算出 let total = 0; items.forEach(i => { total += +i.v;}); // 百分率追加 items.forEach(i => { i.p = total > 0 ? 100 * i.v / total : 0;}); // conic-gradientへ渡すパラメータ生成 const degree = []; let t = 0; items.forEach(i => { if(i.p > 0) degree.push(`${i.c} ${t}deg ${t = t + i.p * 3.6}deg`); }); if(total === 0) degree.push('#ddd 0 360deg'); // グラフ描画 baseElement.innerHTML = "<div class='circle'><div class='graph'></div></div>"; const circle = baseElement.querySelector('.circle'), graph = circle.querySelector('.graph'), outerRadius = size / 2, innerRadius = outerRadius * (1 - weight); circle.style.position = 'relative'; graph.style.position = 'absolute'; graph.style.mixBlendMode = 'multiply'; baseElement.style.width = baseElement.style.height = circle.style.width = circle.style.height = graph.style.width = graph.style.height = `${size}px`; circle.style.background = `radial-gradient(${bgColor} ${innerRadius - 1}px, #fff ${innerRadius}px, #fff ${outerRadius - 1}px, ${bgColor} ${outerRadius}px)`; graph.style.background = `radial-gradient(#fff ${innerRadius - 1}px, #0000 ${innerRadius}px, #0000 ${outerRadius - 1}px, #fff ${outerRadius}px), conic-gradient(${degree.join(', ')})`; return { total: total, items: items, }; } サンプルHTML <!DOCTYPE html> <html lang='ja'> <head> <meta name='viewport' content='width=device-width,initial-scale=1'> <script src='./circle_graph.js'></script> </head> <body style='background-color: #ccc'> <div id='id1'></div> <script> 'use strict'; const obj = { // 描画先要素ID targetId: 'id1', // 背景色 backgroundColor: 'transparent', // グラフ直径 size: 250, // 太さ 0～1 weight: 0.5, // ソート 1:降順 -1:昇順 0:配置順 sort: 1, // アイテム配列 items: [ // c:色, v:数, n:名前 [,fixed:ソート除外('f'前方固定|'r'後方固定)] {c:'red', v:239, n:'name1'}, {c:'orange', v:110, n:'name2'}, {c:'blue', v:75, n:'name3'}, {c:'cyan', v:33, n:'name4'}, {c:'yellow', v:428, n:'name5'}, {c:'magenta', v:183, n:'name6'}, {c:'#fff', v:31, n:'other1', fixed:'f'}, {c:'#444', v:230, n:'other2', fixed:'r'}, ], }; window.addEventListener('DOMContentLoaded', function(){ const res = drawGraph(obj); console.log(res); }); </script> </body> </html> こんな感じになります。 動作デモ スライダーでの入力反映サンプル <!DOCTYPE html> <html lang='ja'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <script src='./circle_graph.js'></script> <style> .panel { background-color: #fff8; position: fixed; bottom: 0px; left: 0px; padding: 8px; width: 100%; } .colorcode, .name { width: 80px; } .picker { width: 28px; height: 20px; padding: 0px; } .slider { width: 50%; } .view { display: flex; padding: 10px; } div[id=id1] { display: inline-table; } div[id=id2] { margin: 8px; } #icon { position: absolute; top: 0px; right: 20px; width: 20px; height: 20px; cursor: pointer; } </style> </head> <body style='background-color: #ccc'> <div class='view'> <div id='id1'></div> <div id='id2'></div> </div> <div class='panel'> <span id='icon'>▼</span> <input type='range' min='10' max='500' id='size' oninput='update()'>直径  <input type='range' min='0' max='1' step='0.02' id='weight' oninput='update()'>太さ  <select id='sort' onchange='update()'> <option value='0'>配置順</option> <option value='1'>降順</option> <option value='-1'>昇順</option> </select> <div class='items'> <br> <span class='p'> <input type='checkbox' class='check' checked onclick='chgActive()'> <input type='text' class='colorcode' value='#000000' oninput='update()'> <input type='color' class='picker' oninput='update(1)'> <input type='text' class='name' value='name1' oninput='update()'> <input type='range' class='slider' min='0' max='1000' value='0' oninput='update()'> <select class='fixed' onchange='update()'> <option value=''>---</option> <option value='f'>前方固定</option> <option value='r'>後方固定</option> </select> </span> </div> </div> <script> 'use strict'; const obj = { targetId: 'id1', size: 250, weight: 1, sort: -1, items: [ {c:'#ff0000', v:50, n:'name1'}, {c:'#00ff00', v:100, n:'name2'}, {c:'#ffff00', v:150, n:'name3'}, {c:'#0000ff', v:200, n:'name4'}, {c:'#ff00ff', v:250, n:'name5'}, {c:'#00ffff', v:300, n:'name6'}, {c:'#ffffff', v:150, n:'other1'}, {c:'#000000', v:150, n:'other2'}, ], }; window.addEventListener('DOMContentLoaded', function() { const panelItems = document.querySelector('.panel .items'); let s1 = panelItems.innerHTML, s2 = s1.repeat(obj.items.length); panelItems.innerHTML = s2; const colorcodes = document.querySelectorAll('input[class=colorcode]'), sliders = document.querySelectorAll('input[class=slider]'), pickers = document.querySelectorAll('input[class=picker]'), names = document.querySelectorAll('input[class=name]'), fixeds = document.querySelectorAll('select[class=fixed]'); for(let i = 0; i < obj.items.length; i++) { pickers[i].value = colorcodes[i].value = obj.items[i].c; sliders[i].value = obj.items[i].v; names[i].value = obj.items[i].n; if(obj.items[i].fixed !== undefined && 'fr'.indexOf(obj.items[i].fixed) >= 0) { fixeds[i].value = obj.items[i].fixed; } } document.getElementById('size').value = obj.size; document.getElementById('weight').value = obj.weight; document.getElementById('sort').value = obj.sort; putList(drawGraph(obj)); document.getElementById('icon').addEventListener('click', function(){ const p = document.querySelector('.panel'); if(p.style.height !== '22px') { this.textContent = '▲'; p.style.height = '22px'; } else { this.textContent = '▼'; p.style.height = ''; } }); }); function update(s) { const checkboxs = document.querySelectorAll('input[type=checkbox]'), colorcodes = document.querySelectorAll('input[class=colorcode]'), sliders = document.querySelectorAll('input[class=slider]'), pickers = document.querySelectorAll('input[class=picker]'), names = document.querySelectorAll('input[class=name]'), fixeds = document.querySelectorAll('select[class=fixed]'); const p = []; obj.items = []; for(let i = 0; i < sliders.length; i++) { if(!checkboxs[i].checked) continue; if(s) colorcodes[i].value = pickers[i].value; else pickers[i].value = cvtColorCode(colorcodes[i].value); const colorcode = colorcodes[i].value, slider = sliders[i].value, name = names[i].value, fixed = fixeds[i].value; p.push({c:colorcode,v:slider,n:name,fixed:fixed}); obj.items.push({c:colorcode,v:+slider,n:name,fixed:fixed}); } obj.size = document.getElementById('size').value; obj.weight = document.getElementById('weight').value; obj.sort = document.getElementById('sort').value; putList(drawGraph(obj)); } function putList(obj) { let str = ''; obj.items.forEach(i => { if(i.v > 0) { str += `<span style='color:${i.c}'>■</span> ${i.n.replace(/^\s*$/, '----').replace(/</g, '<')} : ${i.v} (${i.p.toFixed(1)}%)<br>`; } }); str += `<br> TOTAL : ${obj.total}`; document.getElementById('id2').innerHTML = str; } function chgActive() { const ps = document.querySelectorAll('span.p'), checkboxs = document.querySelectorAll('input[type="checkbox"]'); for(let i = 0; i < checkboxs.length; i++) { ps[i].style.opacity = checkboxs[i].checked ? '1' : '0.5'; } update(); } function cvtColorCode(s) { const dummy = document.createElement('p'); dummy.style.background = s; const c = dummy.style.background.split(','); for(let i = 0; i < c.length; i++) { c[i] = parseFloat(c[i].replace(/^\D+/,'')); if(!isNaN(c[i])) c[i] = c[i].toString(16).padStart(2, '0'); } return /^[\da-f]{2}$/i.test(c[0]) ? '#' + c.slice(0, 3).join('') : '#dddddd'; } </script> </body> </html> 動作デモ スライダーが多いのでスマホでは被って見辛いかもしれません。
- 投稿日：2021-04-10T19:46:28+09:00
HTMLCSSなら3日でできるようになる①
新米UIUXデザイナーがHTMLとCSSを学んで副業でサイトを作ったりできるようになったので、勉強するプロセスをまとめました。 勉強する順番 [1]エディタのインストール [2]基本的なCSSの記述を学ぶ [3]HTMLでよく使うタグを学ぶ [4]レイアウトを学ぶ [5]とりあえず簡単なページを作ってみる [6]ちょっと本格的なページを作ってみる [1]エディタのインストール エディタとはざっくり言うとコードを書く用に便利になっているソフトウェアのことです。 とりあえずなんでもいいので以下のどちらかのメジャーなエディタをインストールしてください。 https://visualstudio.microsoft.com/ja/downloads/ https://atom.io/ インストールできたら[2]に進みましょう。 [2]基本的なCSSの記述を学ぶ CSSは基本的に全て以下のような形で書きます。 HTML index.html <p>赤色になるよ</p> <p class="text">青色になるよ</p> CSS style.css p { color: red; } .text { color: blue; } １つ目はHTMLのpというタグに対してCSSで文字色が赤色になるように指定しています。 ２つ目はHTMLのclass="text"に対してCSSで文字色が青色になるように指定しています。 class="クラス名"で指定するときはそのクラス名の前に.をつけ、.クラス名という風に指定します。 形は以下のように常に同じです。 style.css HTMLの指定したい部分の名前 { hoge: 値; } /* 正確に言うと セレクタ { プロパティ: 値; } */ では１つ目と２つ目の指定の仕方の違いはなんでしょう。 以下のような場合を考えてみてください。 ①２つの文字を同じ文字色にしたいとき index.html <!-- ２つの文字を同じ赤色にしたい --> <p>赤色にしたい</p> <p>赤色にしたい</p> <p class="text1">赤色にしたい</p> <p class="text2">赤色にしたい</p> style.css /* ひとつのpで指定できる */ p { color: red; } /* わざわざ2つのクラスで指定しなければならない */ .text1 { color: red; } .text2 { color: red; } ②２つの文字を違う文字色にしたいとき index.html <!-- ２つの文字をそれぞれ赤色と青色にしたい --> <p>赤色にしたい</p> <p>青色にしたい</p> <p class="text3">赤色にしたい</p> <p class="text4">青色にしたい</p> style.css /* pで指定すると後に書いたcolor:blue;が2つのpに反映され、どちらも青色になる */ p { color: red; } p { color: blue; } /* それぞれのクラスで指定できるので色を分けられる */ .text1 { color: red; } .text2 { color: blue; } pタグで指定すると広い範囲を指定できる、クラスで指定すると狭い範囲を指定できるということです。 （①のような場合は単にクラスtextで赤色にしたい２つを指定することもできますが、指定の仕方の違いを説明する例として示しています） また、タグ・クラスとは別に、#idで指定することもできるのですが、とりあえずその２つの指定方法を覚えておけば大丈夫です。 練習問題（所要時間15分） では以下のようなHTMLがあったとき、CSSはどのようになるか、問題を解いてみましょう。 index.htmlとstyle.cssというファイルを作成し、[1]でインストールしたエディタで開き、style.cssにコードを書いていきましょう。 index.htmlには以下をコピペしてください。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>基本的なCSSの記述を学ぶ</title> </head> <body> <p class="text">この文字を赤色 (red) にしてみよう</p> <div class="block"> <p class="block_text"> blockを横幅500px、縦幅300pxにしてみよう<br> blockの背景色を青色 (blue) にしてみよう<br> blockに5px solid yellow のborderをつけてみよう<br> textの色を白く (white) してみよう </p> </div> <div class="section"> <h2></h2> <div class="section_first"> <p>こちらの文字は #3498db に</p> </div> <div class="section_second"> <p>こちらの文字は #e67e22 にしてみよう</p> </div> </div> </body> </html> CSSのプロパティが分からなければ以下のサイトを参照してください。 http://www.htmq.com/style/ 答えは次の記事に記載します。
- 投稿日：2021-04-10T09:33:13+09:00
4/10_朝報
今日の活動 道場コース HTML & CSS 中級編 レッスン一覧部分を作ろう メッセージ部分を作ろう フッターを作ろう ジーズアカデミー説明会参加
- 投稿日：2021-04-10T06:10:08+09:00
CSS: 無料フォントと縦書きWeb書道入門
Web書道 http://web-shodo.com/ とやらが終了していてかなしかったのでそれに着想を得て遊んだ記録。 CSSで縦書きという知識 端的にはこれ div { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } 結果このように してみた。 Google Fontsを有り難く使用 「はんなり」「ニコモジ」等。 ソース抜粋 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS縦書き日本語フォントと遊ぶ</title> <!-- adobe font --> <script> (function(d) { var config = { kitId: 'han5ukt', scriptTimeout: 3000, async: true }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) })(document); </script> <!-- https://googlefonts.github.io/japanese/ --> <link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet"> <style> body { color:#630; font-size:5em; } p.font1{ font-family: cursive; } p.font2{ font-family: serif; } p.font3{ font-family: "Nikukyu"; } p.font4{ font-family: "Hannari"; } p.font5{ font-family: potta-one,sans-serif; font-weight: 400; font-style: normal; } /* 縦書き */ .v-writing { writing-mode: vertical-rl; display: inline-block; text-align: left; } </style> </head> <body> <input type="text" id="input_message" size="20" maxlength="100" value="おこさまランチ"> <div class="v-writing"> <p class="font1" id="output_message1">cursive</p> <p class="font2" id="output_message2">serif</p> <p class="font3" id="output_message3">Nikukyu</p> <p class="font4" id="output_message4">Hannari</p> <p class="font4" id="output_message4">Pottaone</p> <div id="output_message"></div> </div> <script language="javascript" type="text/javascript"> function main() { var input_message = document.getElementById("input_message").value; document.getElementById("output_message").innerHTML = input_message; document.getElementById("output_message1").innerHTML = input_message; document.getElementById("output_message2").innerHTML = input_message; document.getElementById("output_message3").innerHTML = input_message; document.getElementById("output_message4").innerHTML = input_message; document.getElementById("output_message5").innerHTML = input_message; } document.getElementById("input_message").onchange = main; window.onload = main; </script> </body> </html> では 自分でフォントファイルを置くには 参考: https://b-risk.jp/blog/2020/06/webfont/ https://webquest-design.jp/blog/designtool/15002/ 以下のように書く。 @font-face { font-family: 'MyFontreisyo'; src: url('./fonts/aoyagireisyosimo_otf_2_01.otf') format("opentype"); } @font-face { font-family: 'MyFontsoseki'; src: url('./fonts/AoyagiSosekiFont2.otf') format("opentype"); } Adobe Fontsも使える 2021年4月9日の記事: Adobe Fontsの日本語フォントが大幅増 ～191フォントが追加され、計436フォントに - 無償メンバーシップでも138フォントが利用可能。量だけでなく質も充実 まとめ See the Pen 縦書き - text-orientation by Mana (@manabox) on CodePen. 実用的には使う場面にほぼ遭遇しないのですけど。 お楽しみいただければさいわいです。
- 投稿日：2021-04-10T05:07:30+09:00
【CSS】寝られないからスラ〇ム動かしてみた
はじめに 寝られないのでコーディング・・・するほど元気もないのでとりあえずスラ〇ム動かしてみた。 動かす画像 権利関係いろいろありそうなので頭のトンガリを少なくして画像作成っと 制作時間1分。やはりスラ〇ムは書きやすい。 動かす ここのサイトからアニメーション用のCSSをコピペ （コピペでOKみたいなサイトは本当にありがたい） 継続して動くように少し修正 animation: infinite ↓動いているところ（表示まで数秒・・・） 表示されなかったら「Result」をクリック See the Pen GRryZMY by Shinkai (@Shinkai-) on CodePen. やだ、可愛い。 子供が書いた絵とか動かしてあげたら喜びそう。身近に子供いないけど。 CSS .anim-box.poyoyon2.is-animated { animation: poyoyon2 2s infinite forwards; } @keyframes poyoyon2 { 0% { transform: scale(1.0, 1.0) translate(0, 0); } 15% { transform: scale(0.98, 0.9) translate(0, 5px); } 30% { transform: scale(1.02, 1.0) translate(0, 8px); } 50% {transform: scale(0.98, 1.05) translate(0, -8px); } 70% { transform: scale(1.0, 0.9) translate(0, 5px); } 100% { transform: scale(1.0, 1.0) translate(0, 0); } 0%, 100% { opacity: 1; } } 以上。 ダメだ。まだ眠くない・・・。
- 投稿日：2021-04-10T00:34:35+09:00
HTML・CSSのテンプレート
よく「あ！これHTML/CSSで作ってみたいなー」と思うことがあって、いまだにタグが曖昧なので、「文字コードの指定ってどのタグだっけ？」ってよくなるので、HTMLファイルおよびCSSファイルのテンプレートを投稿しておきます。 HTML index.html <!-- HTMLテンプレート --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- CSS読み込み --> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <!-- JQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> FINALFANTASY </body> </html> CSS style.css /* CSSテンプレート */ body{ font-size:0.6in; font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } 改善点があれば教えてください！ 随時改善していきます！
- 投稿日：2021-04-10T00:00:21+09:00
【SASS・CSS】nth-of-typeを孫要素など配下の指定した要素のみに適用する簡単な方法
nth-of-typeを使ってネストした深い要素にスタイルを適用する方法について。 ある深い要素にスタイルを適用するには、繰り返す親要素にnth-of-typeを適用し、その配下でタグを絞り込むと簡単に適用できる。 .css 繰り返す親要素のセレクタ:nth-of-type() 対象のセレクタ { 処理 } セレクタを繋ぐスペースは配下の絞り込み。絞り込みは、直下を表す>や、且つを表す.も使える。 ＞（参考）cssセレクタの記号の意味。 実例 次のようなul > li > div > div > p という深い階層の繰り返しがある場合に、nth-of-typeを使って、一番深いpタグのみにスタイルを適用する。 html <ul> <li class="nth-test-li"> liの要素 <div class="nth-test-div1"> li > div1の要素 <div class="nth-test-div2"> li > div1 > div2の要素 <p class="nth-test-p">li > div1 > div2 > pの要素</p> </div> </div> </li> 繰り返し </ul> 繰り返す親要素はli class="nth-test-li"なので、これにnth-of-typeを適用する。 その次にスペースを開けてスタイルを適用したい要素を指定する。 .css .nth-test-li:nth-of-type(2n) .nth-test-p { color: blue; } 偶数番目のnth-test-liクラスの中のnth-test-pのある要素にのみスタイルを適用する指示になる。 狙ったタグのみがスタイル適用されている。 SASS(scss)を使うと簡単にかける。 scssを使うとわかりやすく記述できる。 .scss .nth-test-li{ &:nth-of-type(2n){ .nth-test-p{ color: blue; } } } ↓↑同じ .css .nth-test-li:nth-of-type(2n) .nth-test-p { color: blue; } &は外側のセレクタを代入する。内側の階層で記号がない場合はスペースを空けてつなげる（配下の意味）。 以上。
- 投稿日：2021-04-10T00:00:21+09:00
【SASS・CSS】nth-of-typeを孫要素など配下の要素に適用する方法
nth-of-typeを使ってネストした深い要素にスタイルを適用する方法について。 ある深い要素にスタイルを適用するには、繰り返す親要素にnth-of-typeを適用し、その配下でタグを絞り込むと簡単に適用できる。 ・繰り返す親要素のセレクタ:nth-of-type() 対象のセレクタ { 処理 } スペースは、その配下にある絞り込み。 なお絞り込みは>（直下）、.（かつ）も使える。 ＞【CSS】セレクタの記号の意味を実例で理解する。 スペース、>（大なり）、*（アスタリスク）＋（プラス）、,（カンマ）、.（ドット）。 実例 次のようなul > li > div > div > p という深い階層の繰り返しがある場合に、nth-of-typeを使って、一番深いpタグのみにスタイルを適用する。 html <ul> <li class="nth-test-li"> liの要素 <div class="nth-test-div1"> li > div1の要素 <div class="nth-test-div2"> li > div1 > div2の要素 <p class="nth-test-p">li > div1 > div2 > pの要素</p> </div> </div> </li> 繰り返し </ul> 繰り返す親要素はli class="nth-test-li"なので、これにnth-of-typeを適用する。 その次にスペースを開けてスタイルを適用したい要素を指定する。 .css .nth-test-li:nth-of-type(2n) .nth-test-p { color: blue; } 偶数番目のnth-test-liクラスの中のnth-test-pのある要素にのみスタイルを適用する指示になる。 狙ったタグのみがスタイル適用されている。 SASS(scss)を使うと簡単にかける。 scssを使うとわかりやすく記述できる。 .scss .nth-test-li{ &:nth-of-type(2n){ .nth-test-p{ color: blue; } } } ↓↑同じ .css .nth-test-li:nth-of-type(2n) .nth-test-p { color: blue; } &は外側のセレクタを代入する。内側の階層で記号がない場合はスペースを空けてつなげる（配下の意味）。 以上。