- 投稿日：2020-07-03T23:28:34+09:00
【初心者でもわかる】画像名の付け方わかるかな？（全5問）
どうも、7noteです。いきなりですが第一回コーダークイズ、はじめます！「画像名の付け方編」
第一問
ホームページ制作時、つけるならどっちの画像名が正しい？
企業のロゴ画像の場合
A「ロゴ画像.jpg」
B「logo.jpg」10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・正解は...
でした。
〜〜なぜ？〜〜
WEBサーバーやブラウザでは読み込めない文字が存在します。その中でも以下のような画像は読み込めない場合があるので、使わないようにしましょう！読み込めないと画像が表示されないなんてことも！！！
- 全角文字
- 半角・全角スペース
- ハイフンとアンダースコア以外の記号
- 機種（環境）依存文字
第二問
ホームページ制作時、つけるならどっちの画像名が正しい？
スライドショーの3枚目に使う画像の場合
A「slide_img03.jpg」
B「slide img03.jpg」10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・正解は...
でした。
〜〜なぜ？〜〜
第一問と同じ！WEBサーバーやブラウザでは読み込めない文字が存在します。復習も大切ですね。
使わない方がいい文字
- 全角文字
- 半角・全角スペース
- ハイフンとアンダースコア以外の記号
- 機種（環境）依存文字第三問
ホームページ制作時、つけるならどっちの画像名が正しい？
猫の画像の場合
A「inu.jpg」
B「dog.jpg」10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・正解は...
と言いたいのですが、Aを選んでも別に正解かなと私は思います。
〜〜なぜ？〜〜
どちらでも問題なく表示されるので、どちらも正解にしました。
ただプログラミングは基本的に英語ベースで制作されることがほとんどです。
そのため、習慣として英語で表せられるところは英語にする場合が多いです。（でも日本の人しかみないサイトで無理に長い認知度の低い英語名のファイル名をつけるのは逆効果かも！）
第四問
ホームページ制作時、つけるならどっちの画像名が正しい？
ボタンのホバー時の画像の場合
A「button_hover.gif」
B「button_on.gif」10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・正解は...
でした。
〜〜なぜ？〜〜
ホバー時に画像を変えるなどはコーディングの中でよく出てくるシチュエーションなのですが、ホバー時の画像には最後に「_on」を付け、ホバーしていない時は「_off」をつけるなどすると、ファイルをみただけで2枚で1セットなのがわかりやすいし、このようにつける人が多いかなと思います。
第五問
ある会社での話。
上司「うちの会社、今日で10周年になるから、うちのホームページの企業ロゴの横に、10周年のマーク追加しておいて」
このヘッダーにあるロゴの横に10周年マークを追加することになりました。
この10周年ロゴのマークの画像名、付けるならどっちが好ましい？A「anniversary_mark.png」
B「10years_ anniversary.png」10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・正解は...
でした。
〜〜なぜ？〜〜
ちょっと難しい問題ですし、状況によってはBが正解の場面もあるかと思います。
ただ、私は今回のシチュエーションであればAで対応します。なぜかと言うと、来年のことを考えるからです。想像の一年後
上司「あ、今日で11周年か。10周年のマーク、11周年に変えといて。」ほぼ間違いなくこう言われるでしょう。この時、もしBのように画像名に10周年の意味の「10」の文字を入れてしまっていると11周年に変わった時にHTMLのソースに書いているテキストも変更しなくてはならなくなります。単純にめんどくさいですよね。これがもし100ページもあるサイトのヘッダーで使われてて、ヘッダーが共通化されてないなんてことになったら・・・
想像しただけで嫌になります。（実際はそんな場面ないと思いますが。）なので、予め更新が予想される画像にはそのような数字などは使わず、Aの書き方で対応します。これならサーバーの画像データを差し替えるだけで何も問題ありませんね！
いかがでしたでしょうか？
たかが画像名、されど画像名。ここにも小さな気遣いができる人はきっと大きな仕事も成功すること間違いなし！！
あくまで個人的主観に一般常識を上乗せして書いているので、人によっては違う！となるかもしれませんがご容赦ください。
他にもこんな書き方してます！などあればぜひコメントください！おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
- 投稿日：2020-07-03T23:28:34+09:00
【初心者向け】画像名の付け方わかるかな？（全5問）
どうも、7noteです。いきなりですが第一回コーダークイズ、はじめます！「画像名の付け方編」
第一問
ホームページ制作時、つけるならどっちの画像名が正しい？
企業のロゴ画像の場合
A「ロゴ画像.jpg」
B「logo.jpg」10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・正解は...
でした。
〜〜なぜ？〜〜
WEBサーバーやブラウザでは読み込めない文字が存在します。その中でも以下のような画像は読み込めない場合があるので、使わないようにしましょう！読み込めないと画像が表示されないなんてことも！！！
- 全角文字
- 半角・全角スペース
- ハイフンとアンダースコア以外の記号
- 機種（環境）依存文字
第二問
ホームページ制作時、つけるならどっちの画像名が正しい？
スライドショーの3枚目に使う画像の場合
A「slide_img03.jpg」
B「slide img03.jpg」10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・正解は...
でした。
〜〜なぜ？〜〜
第一問と同じ！WEBサーバーやブラウザでは読み込めない文字が存在します。復習も大切ですね。
使わない方がいい文字
- 全角文字
- 半角・全角スペース
- ハイフンとアンダースコア以外の記号
- 機種（環境）依存文字第三問
ホームページ制作時、つけるならどっちの画像名が正しい？
猫の画像の場合
A「inu.jpg」
B「dog.jpg」10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・正解は...
と言いたいのですが、Aを選んでも別に正解かなと私は思います。
〜〜なぜ？〜〜
どちらでも問題なく表示されるので、どちらも正解にしました。
ただプログラミングは基本的に英語ベースで制作されることがほとんどです。
そのため、習慣として英語で表せられるところは英語にする場合が多いです。（でも日本の人しかみないサイトで無理に長い認知度の低い英語名のファイル名をつけるのは逆効果かも！）
第四問
ホームページ制作時、つけるならどっちの画像名が正しい？
ボタンのホバー時の画像の場合
A「button_hover.gif」
B「button_on.gif」10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・正解は...
でした。
〜〜なぜ？〜〜
ホバー時に画像を変えるなどはコーディングの中でよく出てくるシチュエーションなのですが、ホバー時の画像には最後に「_on」を付け、ホバーしていない時は「_off」をつけるなどすると、ファイルをみただけで2枚で1セットなのがわかりやすいし、このようにつける人が多いかなと思います。
第五問
ある会社での話。
上司「うちの会社、今日で10周年になるから、うちのホームページの企業ロゴの横に、10周年のマーク追加しておいて」
このヘッダーにあるロゴの横に10周年マークを追加することになりました。
この10周年ロゴのマークの画像名、付けるならどっちが好ましい？A「anniversary_mark.png」
B「10years_ anniversary.png」10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・正解は...
でした。
〜〜なぜ？〜〜
ちょっと難しい問題ですし、状況によってはBが正解の場面もあるかと思います。
ただ、私は今回のシチュエーションであればAで対応します。なぜかと言うと、来年のことを考えるからです。想像の一年後
上司「あ、今日で11周年か。10周年のマーク、11周年に変えといて。」ほぼ間違いなくこう言われるでしょう。この時、もしBのように画像名に10周年の意味の「10」の文字を入れてしまっていると11周年に変わった時にHTMLのソースに書いているテキストも変更しなくてはならなくなります。単純にめんどくさいですよね。これがもし100ページもあるサイトのヘッダーで使われてて、ヘッダーが共通化されてないなんてことになったら・・・
想像しただけで嫌になります。（実際はそんな場面ないと思いますが。）なので、予め更新が予想される画像にはそのような数字などは使わず、Aの書き方で対応します。これならサーバーの画像データを差し替えるだけで何も問題ありませんね！
いかがでしたでしょうか？
たかが画像名、されど画像名。ここにも小さな気遣いができる人はきっと大きな仕事も成功すること間違いなし！！
あくまで個人的主観に一般常識を上乗せして書いているので、人によっては違う！となるかもしれませんがご容赦ください。
他にもこんな書き方してます！などあればぜひコメントください！おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
- 投稿日：2020-07-03T22:41:47+09:00
JavascriptでiPhone風の電卓アプリを作ってみた
こんにちは、Mottyです。
今回はJavascriptを使ってみました。概要
今回はJavascriptの処女作で電卓アプリを作ってみました。
定番ですが、HTML・JavascriptによるWebアプリ作品です。ソースコード
Calculator.html<!DOCTYPE html> <html lang = "en"> <head> <meta charset="UTF-8"> <meta name="viewport" content = "width = device-width, instial-sale = 1.0"> <meta http-equiv= "X-UA-Compatible" content = "ie=edge"> <title> Document</title> <link rel = "stylesheet" href="Design.css"> </head> <body> <script src = "System.js"></script> <input id ="result" type = "text" size ="20" style = "width:208px"/> <br/> <input type = "button" value = "7" onClick ="disp(7)"/> <input type = "button" value = "8" onClick ="disp(8)"/> <input type = "button" value = "9" onClick ="disp(9)"/> <input type = "button" value = "/" onClick ="disp('/')"/> <br/> <input type = "button" value = "4" onClick ="disp(4)"/> <input type = "button" value = "5" onClick ="disp(5)"/> <input type = "button" value = "6" onClick ="disp(6)"/> <input type = "button" value = "*" onClick ="disp('*')"/> <br/> <input type = "button" value = "1" onClick ="disp(1)"/> <input type = "button" value = "2" onClick ="disp(2)"/> <input type = "button" value = "3" onClick ="disp(3)"/> <input type = "button" value = "-" onClick ="disp('-')"/> <br> <input type = "button" value = "0" onClick ="disp(0)"/> <input type = "button" value = "C" onClick ="clear()"/> <input type = "button" value = "=" onClick ="enter()"/> <input type = "button" value = "+" onClick ="disp('+')"/> </body> </html>Design.cssinput{ width:50px; height:50px; } textbox{ width:200px; height:50px; }System.jsvar EnterFlag = false; function disp(n){ var obj = document.getElementById("result"); obj.value += n; } function enter(){ var obj = document.getElementById("result"); obj.value = eval(obj.value); EnterFlag = true; } function clear(){ var obj = document.getElementById("result"); obj.value == "0"; }結果
しっかり表示してくれました。
パーツとメソッドの繋ぎ方がポイントということを分かっていれば
プログラミング言語が変わっても物自体はちゃんと作れそう。
（しかし配列とかクラスを使えばもっと綺麗なコードをかけたのでは・・・。）
- 投稿日：2020-07-03T22:36:58+09:00
初心者によるプログラミング学習ログ 359日目
100日チャレンジの359日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
359日目は、昨日の作業・やったこと⇩
— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 2, 2020
●読書 kindle 20分
●ブログ記事1記事作成
●プログラミング学習359日目 2h
・メンターの課題#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ
- 投稿日：2020-07-03T22:12:27+09:00
ScrollReveal.jsでええ感じのパララックス効果を実装する
スクロールすると画像がふわって出てくる感じのを実装する
簡単にパララックス効果を実装できる便利ライブラリをcdnで以下のようにheadタグに記述
<script src="https://unpkg.com/scrollreveal"></script>次にhtmlを編集。marginはスクロールするスペースを与えるため
index.html<div class="animation" style="margin-top: 1000px;"> <img src="./images/image1.jpg"> </div>次にjs
app.js$(function () { ScrollReveal().reveal('.animation', { delay: 500, duration: 2000, }); });おしまい。
- 投稿日：2020-07-03T20:54:59+09:00
【コピペOK】hoverしたら動き出すCSSボタンアニメーション５１選
コピペだけで作れるボタンアニメーションを５１個を紹介いたします。
box-shadow, filter, transformなどをふんだんに使っており、transitionで滑らかな動きが表されています
コードには説明もわかりやすく書いてあるのでかなり参考になります
Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています
CSSボタンアニメーション５１選
１. transformを使いこなすボタンアニメーション１６選
transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています
transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します
↓参考記事は下の記事です↓
２. transitionを使いこなすボタンアニメーション9選
transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています
box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです
↓参考記事は下の記事です↓
３. transformを使いこなすマテリアルデザイン5選
transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています
マテリアルデザインなのでそのまますぐにでもコピペして使用できます
↓参考記事は下の記事です↓
４. filterが網羅できるCSSボタンアニメーション15選
filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます
filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています
勉強にもフロント開発でも役立つと思います
↓参考記事は下の記事です↓
５. scaleでオシャレなCSSボタンアニメーション3選
transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています
ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです
↓参考記事は下の記事です↓
６. ボタンでつくる回転アニメーション9選
transitionを使ってボタンが自然に回転します
ボタンが回転するって純粋に興味ありませんか？
回転扉みたいに動くんです
↓参考記事は下の記事です↓
- 投稿日：2020-07-03T19:12:06+09:00
【一番簡単に】とりあえずCSSだけで要素を〇〇秒後に表示したい
Keyframesを使う
Keyframesを使えば簡単にできます。
Keyframesが分からなくても以下をコピペすればとりあえず動きます。<div class="hoge-box"> 10秒後に表示されるBOX </div>/* 10秒後に0.5秒かけて"late-open"を実行する */ .hoge-box { display: none; animation: late-open 0.5s ease-in 10s forwards; } /* late-open = display: block; */ @keyframes late-open { to { display: block; } }
display: none;だった要素が10秒後にdisplay: block;で上書きされることで表示されます。
- 投稿日：2020-07-03T18:04:06+09:00
【Vueで使える】差がつくCSS画像アニメーションまとめ４９選
こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ
１. hoverで画像が拡大(ズーム)するCSSアニメーション３選(＋filterエフェクト)
２. box-shadowとhoverで3D画像に動きをつけるCSSアニメーション３選！
３. hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
４. CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
５. hoverとfilter:grayscaleで白黒に切り替え！CSS画像エフェクト３選
６. hoverとtransformで画像が回転するCSSアニメーション3選【3分で作れる！】
７. hoverで画像がスライド！margin-leftとscaleでCSSアニメーション3選
[
](https://www.twinzlabo.com/css-animation-hover-slide-transition/)
８. hoverとfilter:brightnessで明るさ調節！CSS画像エフェクト３選
９. overflow: hiddenで美しい！CSSアニメーション３選(画像一覧)
１０. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選
１１. hoverで画像が鏡みたいに反射！position:absoluteとfilter多用でCSSアニメーション3選
１２. hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
[
](https://www.twinzlabo.com/css-effects-hover-filter-hue-rotate/)
１３. transitionとfilterで美しく変化するCSS画像エフェクト５選(基礎から応用まで)
１４. hoverでぼかし画像が動き出す！filter:blurとtransitionでCSSエフェクト3選
１５. 【filterプロパティ】hoverすると美しさ100倍！CSS画像エフェクト３選
いかがでしたでしょうか？
お役に立てたら嬉しいです。最後に注意書きとして
コメント欄に心ないコメントを投稿する方がまれにいますが迷惑なので問答無用で速攻ブロックします。
- 投稿日：2020-07-03T18:04:06+09:00
差がつく画像アニメーションまとめ４９選
こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ
１. hoverで画像が拡大(ズーム)するCSSアニメーション３選(＋filterエフェクト)
２. box-shadowとhoverで3D画像に動きをつけるCSSアニメーション３選！
３. hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
４. CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
５. hoverとfilter:grayscaleで白黒に切り替え！CSS画像エフェクト３選
６. hoverとtransformで画像が回転するCSSアニメーション3選【3分で作れる！】
７. hoverで画像がスライド！margin-leftとscaleでCSSアニメーション3選
[
](https://www.twinzlabo.com/css-animation-hover-slide-transition/)
８. hoverとfilter:brightnessで明るさ調節！CSS画像エフェクト３選
９. overflow: hiddenで美しい！CSSアニメーション３選(画像一覧)
１０. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選
１１. hoverで画像が鏡みたいに反射！position:absoluteとfilter多用でCSSアニメーション3選
１２. hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
[
](https://www.twinzlabo.com/css-effects-hover-filter-hue-rotate/)
１３. transitionとfilterで美しく変化するCSS画像エフェクト５選(基礎から応用まで)
１４. hoverでぼかし画像が動き出す！filter:blurとtransitionでCSSエフェクト3選
１５. 【filterプロパティ】hoverすると美しさ100倍！CSS画像エフェクト３選
いかがでしたでしょうか？
お役に立てたら嬉しいです。最後に注意書きとして
コメント欄に心ないコメントを投稿する方がまれにいますが迷惑なので問答無用で速攻ブロックします。
- 投稿日：2020-07-03T18:02:06+09:00
失敗しない【filter】エフェクト５３選
こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ
１. hoverで画像が拡大(ズーム)するCSSアニメーション３選(＋filterエフェクト)
２. 【filter完全網羅】hoverでボタンが動き出す！filterを網羅できるCSSボタンアニメーション15選
３. hoverでボタンアニメーション！transitionを使いこなすCSSボタンエフェクト9選
４. hoverとfilter:grayscaleで白黒に切り替え！CSS画像エフェクト３選
５. hoverとfilter:brightnessで明るさ調節！CSS画像エフェクト３選
６. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選
７. hoverで画像が鏡みたいに反射！position:absoluteとfilter多用でCSSアニメーション3選
８. hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
９. transitionとfilterで美しく変化するCSS画像エフェクト５選(基礎から応用まで)
１０. hoverでぼかし画像が動き出す！filter:blurとtransitionでCSSエフェクト3選
１１. 【filterプロパティ】hoverすると美しさ100倍！CSS画像エフェクト３選
いかがでしたでしょうか？
お役に立てたら嬉しいです。最後に注意書きとして
コメント欄に心ないコメントを投稿する方がまれにいますが迷惑なので問答無用で速攻ブロックします。
- 投稿日：2020-07-03T16:41:33+09:00
【Vue】漫画の進捗管理ツール作ってみた
あと何コマ？
コマ数で漫画の進捗管理するツールを作りました。
コマ数を入力するとコマが出てきて、
終わったコマをクリックすると塗りつぶされて完了状態になります。
1コマ辺りの作業時間を入力すると、残りの作業時間がわかります。
1コマの作業時間×残りコマ数で残りの作業時間が算出される訳ですね。何故作ろうと思ったのか
ページ単位で管理するツールは既にあるが、
コマ単位で管理するものはなかったため。
漫画制作のモチベーションを維持するためにこういうツールがほしかった。
（コマ単位で管理しないとモチベが保たない）
Vue初心者が悶絶しながら作ったものですが、この記事が他の勉強中の方の参考になればと思います。ソース全文
panels.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>あと何コマ？</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!-- fontawesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" /> <link rel="stylesheet" href="panels.css"> </head> <body> <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4"> <nav class="mt-2 my-md-0 mr-md-3"> <a class="px-2 text-white" href="#paneldiv">あと何コマ？</a> <a class="px-2 text-white" href="#timediv">あと何分？</a> </nav> </header> <div class="jumbotron jumbotron-fluid"> <div class="container captionText"> <p>コマ数で進捗管理するツールです。残りコマ数を入力して、入力完了ボタンを押してください。<br> 1コマ辺りの作業時間を入力すると、残りの作業時間がわかります。 </p> </div> </div> <div id="app" class="mb-5"> <div class="container main py-4 mt-sm-3"> <article class="text-center pt-3 pb-4" id="paneldiv"> <div class="alertArea text-center mb-3"> <strong v-show="alertShow"> コマ数を入力してください </strong> </div> <h3 v-if="!resultShow"> あと<input type="number" v-model.number="remainedPanelsInput" min="0" class="panelInput">コマ？ <button type="button" class="ml-2 btn page-link text-light d-inline-block btn-purple" @click="resultShowFunc" v-if="!resultShow">入力完了</button> </h3> <h3 v-else> 全<input type="number" v-model.number="remainedPanelsInput" min="0" class="panelInput">コマ <button type="button" class="ml-2 btn page-link text-light d-inline-block btn-purple" @click="resultReset" v-if="resultShow">リセット</button> </h3> <div v-show="resultShow"> 全{{ remainedPanelsInput }}コマ－ 済み<input type="number" v-model.number="filledPanels" v-bind:max="remainedPanelsInput" min="0">コマ ＝ あと<span class="resultText">{{ remainedPanelsNumber }}</span>コマ <p class="text-muted pt-3">終わったコマをクリックすると、塗りつぶされて完了状態になります。完了状態のコマをクリックすると未完の状態に戻ります。</p> </div> <section class="row pricing-header px-3 py-3 pt-md-3 pb-md-1 mx-auto text-center" v-show="resultShow"> <div class="panel" v-for="n in remainedPanelsNumber" @click="panelFinished"> <div class="panelInner">{{ n }}</div> </div> <div class="panel filled" v-for="n in filledPanels" @click="panelReturn"></div> </section> </article> <article class="text-center" id="timediv" v-show="resultShow"> <h3>あと何分？</h3> <div> 1コマ辺りの作業時間<input class="inputPerPanel" type="number" v-model.number=" perPanel" min="0">分×残り{{ remainedPanelsNumber }}コマ＝ あと<span class="resultText">{{ remainingTime }}</span>分 （{{ remainingHour }}時間） </div> </article> </div> <!-- ツイートボタン --> <div class="contact text-center"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://mitaru.github.io/panels/" data-text="進捗どうですか？あと何コマ？" data-size="large" data-hashtags="あと何コマ"> Tweet </a> </div> </div> <footer class="my-1 pt-5 text-muted text-center text-small"> <ul class="list-inline"> <li class="list-inline-item"> <a href="https://twitter.com/SakaiMitaru"> <i class="fab fa-twitter-square mr-1"></i>SakaiMitaru </a> </li> <li class="list-inline-item"><a href="https://github.com/mitaru/panels.git"> <i class="fab fa-github"></i> </a> </li> </ul> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script> <!-- vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="panels.js"></script> </body> </html>panels.csshtml { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } body { color: rgb(31, 45, 65); background: #F7F7FC; } header { background: #37384E; color: #fff; } .jumbotron { margin: 0; background: #37384E; color: #fff; border-radius: 0 0 40% 40%; } .captionText p { margin-bottom: 50px; } .text-muted { color: #9e9fb4 !important; font-size: 14px; margin: 0; } .main { max-width: 2000px; background: #F7F7FC; } .alertArea { height: 20px; } .alertArea strong { background: rgba(255, 255, 255, 0.6) !important; padding: 2px 5px; border-radius: 4px; color: #37384E; } .panelInput { min-width: 10vw; } .btn-purple { color: #fff; background: #16C995; border: 0; } .btn-purple:hover { background: #0f926d; } .pricing-header { max-width: 1000px; } section { justify-content: center; align-items: center; } input { width: 50px; border: 0; background: #fff; border-radius: 4px; padding: 3px; margin: 2px; color: #766DF4; font-weight: bold; text-align: center; } .resultText { background: rgba(118, 109, 244, 0.08) !important; color: #766df4 !important; font-size: 20px; padding: 0 10px; border-radius: 4px; font-weight: bold; } .panel { width: 150px; height: 100px; background: #fff; border: 5px solid #333; margin: 4px; text-align: center; line-height: 100px; cursor: pointer; user-select: none } .filled { background-color: #fff; background-image: radial-gradient(#16C995 14%, transparent 17%), radial-gradient(#16C995 14%, transparent 17%); background-position: 0 0, 4px 4px; background-size: 8px 8px; } footer { background: #F7F7FC; clear: both; } a .fa-github { font-size: 30px; color: #333; } a .fa-github:hover { opacity: 0.8; } @media screen and (max-width: 480px) { .panel { width: 100px; height: 70px; line-height: 70px; } }panels.js(function () { 'use strict'; new Vue({ el: '#app', data: { remainedPanelsInput: 0, filledPanels: 0, perPanel: 0, resultShow: false, alertShow: false, }, watch: { remainedPanelsInput: { handler: function () { localStorage.setItem('remainedPanelsInput', JSON.stringify(this.remainedPanelsInput)); }, deep: true }, filledPanels: { handler: function () { localStorage.setItem('filledPanels', JSON.stringify(this.filledPanels)); }, deep: true }, perPanel: { handler: function () { localStorage.setItem('perPanel', JSON.stringify(this.perPanel)); }, deep: true }, }, methods: { resultShowFunc: function () { if (this.remainedPanelsInput === 0) { this.alertShow = true; } else { this.resultShow = true; this.alertShow = false; } }, panelFinished: function () { this.filledPanels++; }, panelReturn: function () { this.filledPanels--; }, resultReset: function () { this.remainedPanelsInput = 0; this.filledPanels = 0; this.perPanel = 0; this.resultShow = false; }, }, computed: { remainedPanelsNumber: function () { return this.remainedPanelsInput - this.filledPanels; }, remainingTime: function () { return this.remainedPanelsNumber * this.perPanel; }, remainingHour: function () { return Math.round((this.remainingTime / 60) * 10) / 10; }, }, mounted: function () { this.remainedPanelsInput = JSON.parse(localStorage.getItem('remainedPanelsInput')) || 0; this.filledPanels = JSON.parse(localStorage.getItem('filledPanels')) || 0; this.perPanel = JSON.parse(localStorage.getItem('perPanel')) || 0; if (this.remainedPanelsInput > 0) { this.resultShow = true } }, }) // twitter投稿 !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs'); })();Bootstrap4のこちらの実例をもとに作りました。ほぼ原型残ってないです。
何故わざわざテンプレートをもとに作るかと言うと、レスポンシブ対応が楽だからですね。
全力で先人に頼っていくスタイル。Vue部分
panels.jsnew Vue({ el: '#app', data: { remainedPanelsInput: 0, filledPanels: 0, perPanel: 0, resultShow: false, alertShow: false, }, // 中略 computed: { remainedPanelsNumber: function () { return this.remainedPanelsInput - this.filledPanels; }, remainingTime: function () { return this.remainedPanelsNumber * this.perPanel; }, remainingHour: function () { return Math.round((this.remainingTime / 60) * 10) / 10; }, },
remainedPanelsInput（全○コマの数）から filledPanels（完了したコマ数）を引いて
remainedPanelsNumber（残りコマ数）を出しています。
あと何分？の部分はperPanel（1コマ辺りの作業時間）と
remainedPanelsNumber（残りコマ数）を掛けて算出しています。
また分単位だけでなく時間単位の表記もあった方が親切だと思ったので
remainingHourで計算しました。
Math.round((this.remainingTime / 60) * 10) / 10;と書くことで、
小数点第二位で切り捨てて表示することができます。panels.html<h3 v-if="!resultShow"> あと<input type="number" v-model.number="remainedPanelsInput" min="0" class="panelInput">コマ？ <button type="button" class="ml-2 btn page-link text-light d-inline-block btn-purple" @click="resultShowFunc" v-if="!resultShow">入力完了</button> </h3> <h3 v-else> 全<input type="number" v-model.number="remainedPanelsInput" min="0" class="panelInput">コマ <button type="button" class="ml-2 btn page-link text-light d-inline-block btn-purple" @click="resultReset" v-if="resultShow">リセット</button> </h3>panels.jsmethods: { resultShowFunc: function () { if (this.remainedPanelsInput === 0) { this.alertShow = true; } else { this.resultShow = true; this.alertShow = false; } },こちらはあと何コマ？部分のコードです。
if (this.remainedPanelsInput === 0)で
あと何コマ？の入力欄が0の場合、入力完了ボタンを押下コマ数を入力してください」とアラートが表示されます。
1以上の数字が入力されている場合は結果が表示されます。
このような表示の分岐にv-showやv-ifは大変便利です。panels.html<div class="panel" v-for="n in remainedPanelsNumber" @click="panelFinished"> <div class="panelInner">{{ n }}</div> </div> <div class="panel filled" v-for="n in filledPanels" @click="panelReturn"></div>panels.jsmethods: { // 中略 panelFinished: function () { this.filledPanels++; }, panelReturn: function () { this.filledPanels--; },
こちらはコマ部分です。
白いコマはremainedPanelsNumber（残りコマ数）分、
ドットのコマはfilledPanels（完了したコマ数）分表示されます。
v-for="n in remainedPanelsNumber"と書けば
remainedPanelsNumberの数だけコマを複製してくれます。楽ちんです。
jsで作ろうとしたらコマの中にコマ数を表示するのも大変そうですが、
Vueなら{{ n }}と書くだけですみます。おお助かる助かる。
またpanelFinishedとpanelReturnのクリックイベントで
パネルの完了状態を変更しています。panels.jswatch: { remainedPanelsInput: { handler: function () { localStorage.setItem('remainedPanelsInput', JSON.stringify(this.remainedPanelsInput)); }, deep: true }, filledPanels: { handler: function () { localStorage.setItem('filledPanels', JSON.stringify(this.filledPanels)); }, deep: true }, perPanel: { handler: function () { localStorage.setItem('perPanel', JSON.stringify(this.perPanel)); }, deep: true }, }, // 中略 mounted: function () { this.remainedPanelsInput = JSON.parse(localStorage.getItem('remainedPanelsInput')) || 0; this.filledPanels = JSON.parse(localStorage.getItem('filledPanels')) || 0; this.perPanel = JSON.parse(localStorage.getItem('perPanel')) || 0; if (this.remainedPanelsInput > 0) { this.resultShow = true } },ローカルストレージで
remainedPanelsInput、filledPanels、
perPanelの数を保存しています。
監視している変数の変更をトリガーにして勝手に働いてくれる
監視プロパティくんは便利やでホンマ。
途中保存がうまく行かなかったんですが、
mounted部分をnew Vue内で一番最後に配置したら
ちゃんと保存されるようになりました。どうして？（無知）デザイン部分
Bootstrap5のとあるテーマを大いに参考にさせていただきました。
見た目もできるだけ可愛くしたかったんです。
panels.css.jumbotron { margin: 0; background: #37384E; color: #fff; border-radius: 0 0 40% 40%; }
border-radiusだけでdivの下部分を丸くできるものなんですね。
今回調べて初めて知りました。他にも色んな表現ができるみたいです。
歪んだ円まで作れるなんてすごい！
参考：今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
panels.css.filled { background-color: #fff; background-image: radial-gradient(#16C995 14%, transparent 17%), radial-gradient(#16C995 14%, transparent 17%); background-position: 0 0, 4px 4px; background-size: 8px 8px; }なんと
radial-gradientを使えば、CSSだけで漫画のトーンみたいなドットの背景が作れます。
CSSでドット柄（水玉模様）を作成 - ホームページのパーツ作成で好きなドットを作ろう！
他にもradial-gradientでストライプやチェック柄まで作れるみたいです。実際スゴイ！
参考：CSSグラデーションで作った背景パターンのサンプル感想
- 比較的思った通りに作れた
- 見た目もいい感じになったと思う
課題・問題点
- ページ単位の管理機能も作りたかったがややこしすぎてヤコになった
- 今までの知識の延長線上だなと思うのでもっとレベルアップしたい
- BootstrapVue使おうとして挫折した
ここでも全文載せてますが、GitHubでもコードを公開しております。
アドバイスいただけたら嬉しいです。
https://github.com/mitaru/panels次は何を作ろうかなー。ちょっとネタ切れしてきました。
- 投稿日：2020-07-03T11:55:15+09:00
HTMLとCSSの記述順序を意識することはデザイナーとの対話をなめらかにするという話
みなさんは記述順序を意識していますか？
こんにちは。ひらやま（@rhirayamaaaan）です。
さて、唐突ですが、Twitter でこんな質問をしてみました。
ちょっと気になったんですが、モジュール単位（Organisms程度）のHTMLとCSSを書くときに、みなさんはどういう順序で書きますか…？
— ひらやま (@rhirayamaaan) July 2, 2020みなさんはどの記述スタイルに当てはまりそうでしょうか？
（3つ目の書き方をしている人はなかなかいないとは思いますが…笑）ちなみに私は2つ目の書き方派です。
この質問をした意図は、案外1つ目の書き方の人が多いのでは？という素朴な疑問を抱いたからでした。アンケートの結果を見ると2つ目を選んでいる人が多く、私も同じ考えを持ってはいて、そうだよねと思ったのですが、なぜ2つ目の書き方が良いと思っているのかを自分の中で言語化できていないことに気づきました。
なので、今回は私なりになぜ「HTML をある程度書き切ってから CSS を書く」のが良いかをここに記していきます。
HTML はあくまでも「骨組み」
HTML はマークアップ言語なので、そもそも UI デザインを再現する言語ではありません。
HTML5 が登場によって UI デザインの再現の責務をより負わなくなったと感じます。
新しいタグが登場し、今まであった HTML タグに明確な意味が付与され、より「文書設計」に特化した印象でした。
これにより「セマンティクス」という言葉がかなり浸透したのではないでしょうか。このように、HTML は「文書設計」に長けた言語であるので、言い換えると、情報を整理することにとても長けている言語なのだろうと私は思っています。
UI デザインから「情報設計」を紐解く
さて、デザイナーからデザインデータが上がってきて、いざコーディングしようとしたとします。
そのときに、「このデザインを再現しよう」と HTML と CSS を記述していく方は案外多いのではないでしょうか？
私はこの考えはあまり良くないだろうと考えています。「このデザインを再現しよう」と考えてしまうと、「どのように横並びにしようか？」とか「どうしたら余白が空くだろうか？」というように、見た目ばかりを気にしてしまいます。
そうなると、情報を整理することに長けている HTML を、見た目ばかりに関心を寄せて書くことになってしまい、言語の特徴と記述の姿勢に齟齬が生まれた状態になります。
では、この齟齬はどのようにすればなくしていけるのか…？
Qiita の私のマイページから一部 UI を抜粋してみました。
このデザインを見てみると、タグ、タイトル、LGTM数、日付の情報があります。そして、文字に強弱がついていて日付が右付きになっています。ここで一つ疑問に思うべきは「なぜこのデザインになっているか？」です。
デザイナーはなんとなくこの見た目にしているかというと、それは絶対にないです。
表示する情報のヒエラルキーを決め、情報をグルーピングし、情報の依存関係を考慮した上でこのリストがデザインされているはずです。
つまり、UI は情報設計が表現されているはずなのです。
そして、今我々が書こうとしているのは HTML です。
ということは、UI の情報設計をうまく読み解ければ、情報を整理することに長けている HTML にうまく落とし込めるのではないか？と考えることができます。
UI デザインの情報設計を HTML で表現していくという考え方にすれば、齟齬がなくなっていくはずです。このことを踏まえた上で、上記の UI を勝手に HTML にしてみました。
（BEM で書きます。Qiita の実際のコーディングとは異なります。）<div class="articleList"> <ul class="articleList__items"> <li class="articleList__item"> <ul class="articleList__itemTags"> <li class="articleList__itemTag"> <a href="#" class="articleList__itemTagLink">HTML</a> </li> <li class="articleList__itemTag"> <a href="#" class="articleList__itemTagLink">CSS</a> </li> <li class="articleList__itemTag"> <a href="#" class="articleList__itemTagLink">HTML5</a> </li> <li class="articleList__itemTag"> <a href="#" class="articleList__itemTagLink">CSS3</a> </li> <li class="articleList__itemTag"> <a href="#" class="articleList__itemTagLink">フロントエンド</a> </li> </ul> <p class="articleList__itemTitle"> <a href="#" class="articleList__itemTitleLink">HTML/CSSをもう少し極めたいデザイナー／エンジニアに伝えたい「3つ」のこと</a> </p> <div class="articleList__itemStatus"> <div class="articleList__itemState"> <span class="articleList__itemLgtm">45</span> </div> <div class="articleList__itemState"> <span class="articleList__itemDate">2019/01/06</span> </div> </div> </li> <li class="articleList__item"> <ul class="articleList__itemTags"> <li class="articleList__itemTag"> <a href="#" class="articleList__itemTagLink">JavaScript</a> </li> <li class="articleList__itemTag"> <a href="#" class="articleList__itemTagLink">UI</a> </li> <li class="articleList__itemTag"> <a href="#" class="articleList__itemTagLink">React</a> </li> <li class="articleList__itemTag"> <a href="#" class="articleList__itemTagLink">AtomicDesign</a> </li> </ul> <p class="articleList__itemTitle"> <a href="#" class="articleList__itemTitleLink">Atomic Designってデザイナーには難しくない！？という話</a> </p> <div class="articleList__itemStatus"> <div class="articleList__itemState"> <span class="articleList__itemLgtm">467</span> </div> <div class="articleList__itemState"> <span class="articleList__itemDate">2018/07/30</span> </div> </div> </li> </ul> </div>※
hxやセクショニングコンテンツを使っていない理由は、ページ上でのモジュールの配置位置や、前後のモジュールの関係性、モジュール内部の保守による情報ヒエラルキーの可変等々を考慮したためです。いかがでしょうか。まずはデザインを再現できるかどうかではなく、UI から情報の粒度やグルーピングを見極め、HTML のみで表現してみました。
element（
__xxx） の命名にも lowerCamelCase を使っていて、これはどの親 element の子として扱うかを示しています。例えば、
__itemDateを__itemStatusDateにしていない理由は、__itemStatusの中にいなくても、__itemDate自体は要素として独立しているからです。
あくまでも今回の UI では__itemStatusというグループの中に__itemDateを入れているだけであって、新たに__itemInformationというグループができたとしても__itemDateの意味合いは変わらないためこのような命名にしています。それとは逆に、
__itemTitleLinkは__itemTitleの子として定義しています。
これを__linkにしてしまうと、このモジュールの中で「もっと見る」リンクができた場合に扱いに困ります。
また、__itemLinkにしたとしても__itemの中には、__itemTagの中にもリンクがいるので、別のリンクであることを示さないといけません。
そのため、このリンクは限定的に定義しています。このように、情報の依存関係やグループ等々の設計を捉えていきながらこの block の HTML を組んでいます。
このような姿勢で HTML を組むと、デザイナーの情報設計の意図を把握しやすくなり、作っているモジュールのデザイン的な理解に大きく繋がるはずです。骨組みにスタイリングしていく
ここでようやく、情報設計を考慮して作った HTML に CSS をあてていきます。
上記のように HTML を作っていれば、実は CSS はかなり楽に記述できるようになっています。
何個か CSS の例を挙げていきますが、その前にもう一度 UI のキャプチャを貼ります。
このキャプチャのデザインを再現していくにあたり、以下より CSS の適用例を示していきます。
HTML を変えずに CSS を適用できていく過程を、読みながら体験してもらえたら嬉しいです。記事ごとの border
一つひとつの記事は
articleList__itemという形で同じ名前が振られているので、border を引きたい場合は以下のようにスタイルを当てれば終わりです。
情報の粒度があっているので、隣接セレクタも使いやすくなります。.articleList .articleList__item { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } /* 隣接したときだけ相殺し、ボーダーが重複しないように調整 */ .articleList .articleList__item + .articleList__item { margin-top: -1px; }タグの実装
タグは横並びにしないといけませんが、
__itemTagsというグループができてるので、これを使って横並びにすれば OK です。
flexでもinline-blockでも問題ありません。このご時世だとなかなかいないとは思いますがfloatでも HTML は変えずにいけます。笑
例ではflexで書きます。.articleList .articleList__itemTags { display: flex; flex-wrap: wrap; /* 子要素の margin を相殺 */ margin: -4px 0 0 -4px; } .articleList .articleList__itemTags { display: inline-block; /* 要素が折り返したときのための指定 */ /* margin-right で指定すると、折返し判定が早くなるため左でとって親で相殺する */ margin: 4px 0 0 4px; }要素間のマージン制御
タグとタイトルの余白を取りたい場合、タグの有無によってタイトルの上に margin をつけるか否かの制御が必要になります。
その場合も、タグとタイトルで情報の粒度を同じにしているため、以下のようにスタイリングをすれば良いです。
（Qiita の実装では margin はありません。あくまでも例です。）.articleList .articleList__itemTags + .articleList__itemTitle { margin-top: 4px; }このように情報の粒度を意識できていれば、
__itemTitleLinkに margin をつけると違和感が生まれるはずです。
タグとタイトルの余白を取りたいわけで、リンクの余白を取りたいわけではないので、余白の意味に対しての認識がデザイナーとあってくるはずです。また、情報の粒度を揃えておくと、margin と padding の取り方もわかりやすくなってきます。
今回は、意味合いの違う要素間の余白（外側の余白）なので、margin を取ればいいわけです。
（タグの下側に余白つけるという手もありますが、タイトルとタグの間に要素が入るときに制御が難しくなります。詳しくは こちら。）情報設計をうまく HTML で表現できていれば、ある程度は HTML と CSS を行き来せずに CSS を記述することができます。
これは、デザイナーのデザイン意図をしっかりと読み取れているからこそできることです。UI に対しての情報設計の考えがデザイナーと一致していればデザインに対しての理解が促され、スタイリングもしやすくなるはずです。調整が必要なこともある
とはいえ、今回の考え方と記述順序を使えば、必ずしもきれいに CSS でデザインが表現できるわけではありません。絶対的な方法ではありません。
例えば、__itemStatusの部分は、現状の class 名の振り分けでデザインを表現するのは難しいように思えます。
今の HTML のままでやるなら、以下のような CSS になるだろうと思います。.articleList .articleList__itemStatus { display: flex; } .articleList .articleList__itemState { flex-grow: 1; } .articleList .articleList__itemState:last-child { flex-grow: 0; flex-shrink: 1; margin-left: 8px; }
:last-childが DOM に依存していて、ちょっと無理があるコーディングな気もします。なので、こういう場合は、
__itemStatusの中で、__itemStatusMain、__itemStatusSubという形で、2カラムにするための DOM を増やしたり、modifier をつけてみたりと、少し HTML に手を加えなければならないこともあるはずです。また、必ずしもデザインが正しいわけでもありません。もしかしたらデザイナーの情報設計が甘いケースもあります。
なので、コーダーが情報設計を気にしていれば、コーダー側から「ここの情報設計はもう一回見直したい」という提案ができるようになります。
そうすれば、より品質の良いデザインをアウトプットできるようになるはずです。さいごに
いかがだったでしょうか。
ただ単に、HTML を書いてから CSS を書くと良いわけではなく、今回紹介した順序で取り組むことでより UI デザインと向き合い、そのデザインを通してデザイナーとなめらかに対話できるようになるのではないでしょうか。ものづくりは協同するものです。
もちろん直接的なコミュニケーションも必要ですが、ものを作る者同士、もので語らうことを意識してみると面白いのかもしれません。ご意見ある方はコメント欄までどうぞ！
- 投稿日：2020-07-03T10:30:40+09:00
headerの画像を上下中央寄せする方法
まず、HTMLを記載するとこんな感じです。
<div class="p-header__logo"> <img src="img/header/logo/logo120.png" alt=""> </div>.p-header__logo { height: 90px; display: flex; align-items: center; & img { height: 70px; display: block; } }img要素を囲んでいる親要素に
display: flex;
align-items: center;を追加すると上下中央揃いになる。
- 投稿日：2020-07-03T09:02:39+09:00
Buttonの作り方
- 投稿日：2020-07-03T00:39:58+09:00
HTMLの「style」プロパティにJavaScriptでstyleを設定する
はじめに
この1つ前に投稿した複数の背景画像をCSSで設置すると少し関係します。
背景画像を分割したいという相談を受けました。かつ、JavaScriptで実装する必要があるとの事でした。
そんなわけでサンプルとして実装してみました。備忘を兼ねて投稿します。
実装
利用するもの
HTMLElement.styleプロパティを利用します。
これはHTMLで、インラインでstyle属性を指定したのと同じ状態になります。ポイントと注意事項
基本的には、
element.style.backgroundImage='***'の用に、style部分をテキストで指定すればOKです。(elementはstyleを設定したいHTMLElement)注意事項としては、
styleにつづくstyle属性をキャメルケースで指定するstyleに直接文字列を代入せずelement.style.backgroundImageとstyle名を指定する必要があるというところです。
表示されない時のチェック事項
- style属性をキャメルケースでしていしているか
- style属性の値が正しい書き方（文字列）になっているか
実装例
See the Pen Multiple_background_settings by H.N (@H_Naito) on CodePen.
参考