- 投稿日：2021-09-11T23:03:11+09:00
CSSのみで紙吹雪を作る
タイトルの通りですが、HTML, CSSのみで紙吹雪を作りました 完成物 紙吹雪といえば四角なイメージがありますが、あえて正円で作ってみました☃️ ソースコード 構成はindex.htmlとindex.cssの2つです。以下コピペで動きます index.html <html> <head> <link rel="stylesheet" href="./index.css" type="text/css"> </head> <body> <div class="confetti__area"> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> </div> </body> </html> index.css .confetti__area { position: relative; width: 400px; height: 250px; overflow: hidden; } .confetti { position: absolute; top: -28px; width: 28px; height: 28px; border-radius: 50%; } .confetti:nth-child(4n-3) { background: linear-gradient(#EBC2E7, #eb6ea5); animation: fall 4s linear infinite, rotate 1.5s linear infinite; } .confetti:nth-child(4n-2) { background: linear-gradient(#ffd900, #fef263); animation: fall 6s linear infinite, rotate 1.5s linear infinite; } .confetti:nth-child(4n-1) { background: linear-gradient(#03C2B1, #CAFCF6); animation: fall 5s linear infinite, rotate 1.5s linear infinite; } .confetti:nth-child(4n) { background: linear-gradient(#98d98e, #68be8d); animation: fall 7s linear infinite, rotate 1.5s linear infinite; } .confetti:nth-child(1) { left: 5%; animation-delay: 0s; } .confetti:nth-child(2) { left: 10%; animation-delay: 1s; } .confetti:nth-child(3) { left: 20%; animation-delay: 2s; } .confetti:nth-child(4) { left: 25%; animation-delay: 3s; } .confetti:nth-child(5) { left: 30%; animation-delay: 1s; } .confetti:nth-child(6) { left: 40%; animation-delay: 2s; } .confetti:nth-child(7) { left: 50%; animation-delay: 3s; } .confetti:nth-child(8) { left: 55%; animation-delay: 0s; } .confetti:nth-child(9) { left: 60%; animation-delay: 2s; } .confetti:nth-child(10) { left: 75%; animation-delay: 3s; } .confetti:nth-child(11) { left: 80%; animation-delay: 1s; } .confetti:nth-child(12) { left: 90%; animation-delay: 1s; } @keyframes fall { 100% { top: 100%; } } @keyframes rotate { 100% { transform: rotateY(360deg); } } 説明 紙吹雪を降らせるエリア(confetti__area)に対して紙吹雪の高さ分だけtopをマイナス指定してoverflow: hidden;で紙吹雪を隠します index.html <div class="confetti__area"> <div class="confetti"></div> ... <div class="confetti"></div> </div> index.css .confetti__area { position: relative; width: 400px; height: 250px; overflow: hidden; } .confetti { position: absolute; top: -28px; width: 28px; height: 28px; border-radius: 50%; } overflow: hidden;を取ると紙吹雪たちがconfetti_areaの外に待機しているのが分かります 通常(紙吹雪が隠れている) overflow: hidden;を取った場合 あとはそれぞれの紙吹雪に色(background)をつけたり、落ちる速度や回転の速度(animation)、アニメーションの開始タイミング(animation-delay)や位置(left)などを指定すると完成です 終わりに 今回はシンプルに下に落ちるだけの紙吹雪を作りましたが、左右に揺れながら落としてみたり、blurをかけて奥行きを出してみたりするとより紙吹雪っぽくなるかもしれません
- 投稿日：2021-09-11T22:55:35+09:00
画面遷移せずにformを送信する方法
画面遷移せずにformを送信する方法 formを送信する際にaction属性を自身に返す場合、入力した内容はそのまま表示させておきたいですよね。 <form action="" method="post"> <input type="text" name="name"> <input type="text" name="address"> <input type="submit" value="保存"> </form> 上記の例はaction属性が空なので自身に遷移します。 phpのみで入力した値を保持したい場合はinputのvalue属性にPOSTで渡ってきた情報を出力してやる必要があります。 <?php if(isset($_POST["save"])){ echo "<script>alert('保存しました')</script>"; $name = htmlspecialchars($_POST["name"], ENT_QUOTES); $address = htmlspecialchars($_POST["address"], ENT_QUOTES); } ?> <form action="" method="post"> <input type="text" name="name" value="<?= $name;?>"> <input type="text" name="address" value="<?= $address;?>"> <input type="submit" name="save" value="保存"> </form> 今回の例は入力項目が2つしか無いので作業は少ないですが、入力項目が１００個とかになればめんどくささは半端ないです。 そこで私がめんどくささを解消するために使っている方法は以下の通りです。 <?php if(isset($_POST["save"])){ echo "<script>alert('保存しました')</script>"; exit; } ?> <iframe id="iframe" name="iframe" style="display: none;"></iframe> <form action="" method="post" target="iframe"> <input type="text" name="name" value=""> <input type="text" name="address" value=""> <input type="submit" name="save" value="保存"> </form> formの送信先をiframeタグに設定しcssでiframeタグの表示を隠しています。 iframeタグについてはこちら HTML のインラインフレーム要素 <iframe> は、入れ子になった閲覧コンテキストを表現し、現在の HTML ページに他のページを埋め込むことができます。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe <form action="" method="post" target="iframe"> formタグのtarget属性にiframタグのname属性の値を入れてあげます。 そうするとiframタグの中のHTMLがaction属性に指定したPathで読み込まれます。 iframタグの中身が遷移したとしても本体のHTMLは何も変化しませんので、結果として画面遷移せずにformが送信できるといったからくりです。 遷移した先ではphpのプログラムだけ実行したいので余計なHTMLを読み込まないように exit; としてプログラムを終了させています。 画面が遷移しない！！ということは入力した内容もそのままですので、わざわざphpでPOSTの値を取得してechoで出力するといった手間が省けます。 これでめんどくさい作業も省略できますし、表示ミスといった不具合も未然に防ぐことができますね♪
- 投稿日：2021-09-11T20:37:24+09:00
【JavaScript】入力フォームを使ったHTMLページをスッキリした見た目にする
コードだけをみたい人は最後に全体を載せてますのでそちらへ。 それでは本題の前に、 まずは普通にhtmlでselect要素1つ、input-text要素1つを設置します。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>text and select form</title> </head> <body> <select> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> </select>年 <br><br> <input type="text"> </body> </html> 上のHTMLをブラウザで見るとselect要素とinput-text要素が表示されます。 これらを多用して「入力ページ」を作るのはいいのですが、 そのページを印刷してそのまま利用するわけにはいきません。 フォームを使ったページを印刷すると、 行がズレる、フォント・大きさ・ベースラインが合わない、見た目のイメージが変わる、 といったことが起こるからです。 HTMLの入力フォームは印刷してみるとWYSIWYGじゃないんです。 そこで、 「入力フォームを使ったHTMLページをJavaScriptでスッキリした見た目にする」 ということを考えました。 目指すのは、 文字列クリック → 入力フォームが出現 → フォーム入力終了 → フォーム消滅 → 文字列に戻る です。 まずは、HTMLを書き換えます。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>text and select form</title> </head> <body> <!--spanで囲みます--> <span>2021</span>年 <br><br> <!--spanで囲みます--> <!--text入力変更前の文を適当に--> <span>textを書き換えます</span> </body> </html> 上のHTMLをブラウザで見ると「2021年」「textを書き換えます」がそれぞれ文字列で現れています。 次に、Javascriptで扱えるようにspanタグに「id」と「onclick」イベントハンドラを配置します。 「onclick」で起動する関数は後ほど配置します。 <html> <head> <meta charset="UTF-8"> <title>text and select form</title> </head> <body> <!--「id」と「onclick」を配置します--> <span id="year" onlick="">2021</span>年 <br><br> <!--「id」と「onclick」を配置します--> <span id="line" onlick="">textを書き換えます</span> </body> </html> 次に、Javascriptの本体を書き込むscriptタグを、今回はわかりやすいようにspanタグの直下にそれぞれ配置します。 <html> <head> <meta charset="UTF-8"> <title>text and select form</title> </head> <body> <span id="year" onlick="">2021</span>年 <!--scriptタグを配置します--> <script> </script> <br><br> <span id="line" onlick="">textを書き換えます</span> <!--scriptタグを配置します--> <script> </script> </body> </html> 続いて、最初のscriptタグにspan id="year"用のJavaScriptを書きます。 <span id="year" onlick="">2021</span>年 <script> let spanYearTag=document.getElementById("year"); let optionsArray=[2021,2022,2023];//select要素のoptionsの配列です /*span id="year"のonclickで起動する関数です*/ function toSelect(){ let keepNen=Number(spanYearTag.innerHTML); //span id="year"の内容を(一応数値化して)変数に格納 /*select要素を構築します*/ let selectElement='<select id="year-select" onchange="fromSelect()">';//idとonchangeを書きます for(let i=0; i<optionsArray.length; i++){//optionsArray配列からselect要素のoptionsを書きます selectElement+='<option value="'+optionsArray[i]+'">'+optionsArray[i]+'</option>'; } selectElement+='</select>'; /*span id="year"にselect要素を配置します*/ spanYearTag.innerHTML=selectElement;//ここでselect要素が実体化します /*表示されていた「年」と同じoptionsをselectedにします*/ for(let i=0; i<optionsArray.length; i++){// if(keepNen==optionsArray[i]){ document.getElementById("year-select").options[i].selected=true; break; } } /*span id="year"のonclickハンドラを無効にします*/ spanYearTag.onclick=null;//spanタグ内にselectタグあるので、selectタグへのクリックが上位spanタグに影響しないようにするためです } /*select id="year-select"のonchangeで起動する関数です*/ function fromSelect(){// let selectTag=document.getElementById("year-select"); let selectNen=selectTag.value;//selectで選択されたvalueを格納 /*span id="year"に選択された年を配置します*/ spanYearTag.innerHTML=selectNen;//ここでselect要素と選択された「年」が入れ替わります /*span id="year"にonclickを新たに配置します*/ spanYearTag.onclick=new Function("toSelect()");//nullにしたものを復活です } </script> 上記のJavaSciptのtoSelect関数をspan id="year"のonclickに配置します。 <html> <head> <meta charset="UTF-8"> <title>text and select form</title> </head> <body> <!--toSelect関数をspan id="year"のonclickに設置します--> <span id="year" onlick="toSelect()">2021</span>年 <script> /*--略--*/ </script> <br><br> <span id="line" onlick="">textを書き換えます</span> <script> </script> </body> </html> 次に、二つ目のscriptタグにspan id="line"用のJavaScriptを書きます。 <script> let spanInputTag=document.getElementById("line"); /*span id="line"のonclickで起動する関数です*/ function toText(){ let keepLine=spanInputTag.innerHTML; //span id="line"の内容を変数に格納。 /*text要素を構築します*/ let textElement='<input type="text" id="line-text" value="'+keepLine+'" onblur="fromText()">';//idとonchangeを書きます valueに変更前の文字列を設定します /*span id="line"にtext要素を配置します*/ spanInputTag.innerHTML=textElement;//ここでtext要素が実体化します /*text要素にフォーカスします*/ document.getElementById("line-text").focus(); document.getElementById("line-text").select(); /*span id="line"のonclickハンドラを無効にします*/ spanInputTag.onclick=null;//spanタグ内にselectタグあるので、selectタグへのクリックが上位spanタグに影響しないようにするためです } /*input text id="line-text"のonblurで起動する関数です*/ function fromText(){// let textTag=document.getElementById("line-text"); let getLine=textTag.value;//textで入力されたvalueを格納 /*span id="line"に入力された文字列を配置します*/ spanInputTag.innerHTML=getLine;//ここでtext要素と入力された文字列が入れ替わります /*span id="line"にonclickを新たに配置します*/ spanInputTag.onclick=new Function("toText()");//nullにしたものを復活させます } </script> 上記のJavaSciptのtoText()関数をspan id="line"のonclickに設置します。 <html> <head> <meta charset="UTF-8"> <title>text and select form</title> </head> <body> <span id="year" onlick="toSelect()">2021</span>年 <script> /*--略--*/ </script> <br><br> <!--toText関数をspan id="line"のonclickに設置します--> <span id="line" onlick="toText()">textを書き換えます</span> <script> /*--略--*/ </script> </body> </html> HTMLとJavaScript全体です。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>text and select form</title> </head> <body> <span id="year" onclick="toSelect()">2021</span>年 <script> let spanYearTag=document.getElementById("year"); let optionsArray=[2021,2022,2023];//select要素のoptionsの配列です /*span id="year"のonclickで起動する関数です*/ function toSelect(){ let keepNen=Number(spanYearTag.innerHTML); //span id="year"の内容を(一応数値化して)変数に格納 /*select要素を構築します*/ let selectElement='<select id="year-select" onchange="fromSelect()">';//idとonchangeを書きます for(let i=0; i<optionsArray.length; i++){//optionsArray配列からselect要素のoptionsを書きます selectElement+='<option value="'+optionsArray[i]+'">'+optionsArray[i]+'</option>'; } selectElement+='</select>'; /*span id="year"にselect要素を配置します*/ spanYearTag.innerHTML=selectElement;//ここでselect要素が出現します /*表示されていた「年」と同じoptionsをselectedにします*/ for(let i=0; i<optionsArray.length; i++){// if(keepNen==optionsArray[i]){ document.getElementById("year-select").options[i].selected=true; break; } } /*span id="year"のonclickハンドラを無効にします*/ spanYearTag.onclick=null;//spanタグ内にselectタグがあるので、selectタグへのクリックが上位のspanタグに影響しないようにしています } /*select id="year-select"のonchangeで起動する関数です*/ function fromSelect(){// let selectTag=document.getElementById("year-select"); let selectNen=selectTag.value;//selectで選択されたvalueを変数に格納 /*span id="year"に選択された年を配置します*/ spanYearTag.innerHTML=selectNen;//ここでselect要素と選択された「年」が入れ替わります /*span id="year"にonclickを新たに配置します*/ spanYearTag.onclick=new Function("toSelect()");//nullにしたものを復活です } </script> <br><br> <span id="line" onclick="toText()">textを書き換えます</span> <script> let spanInputTag=document.getElementById("line"); /*span id="line"のonclickで起動する関数です*/ function toText(){ let keepLine=spanInputTag.innerHTML; //span id="line"の内容を変数に格納。 /*text要素を構築します*/ let textElement='<input type="text" id="line-text" value="'+keepLine+'" onblur="fromText()">';//idとonchangeを書きます valueに変更前の文字列を設定します /*span id="line"にtext要素を配置します*/ spanInputTag.innerHTML=textElement;//ここでtext要素が出現します /*text要素にフォーカスします*/ document.getElementById("line-text").focus(); document.getElementById("line-text").select(); /*span id="line"のonclickハンドラを無効にします*/ spanInputTag.onclick=null;//spanタグ内にselectタグあるので、selectタグへのクリックが上位spanタグに影響しないようにしています } /*input text id="line-text"のonblurで起動する関数です*/ function fromText(){// let textTag=document.getElementById("line-text"); let getLine=textTag.value;//textで入力されたvalueを格納 /*span id="line"に入力された文字列を配置します*/ spanInputTag.innerHTML=getLine;//ここでtext要素と入力された文字列が入れ替わります /*span id="line"にonclickを新たに配置します*/ spanInputTag.onclick=new Function("toText()");//nullにしたものを復活させます } </script> </body> </html> さて、input-text要素に関してですが、 上記のJavaScriptでは、onblurで入力フォームが消えるようにしていますが、 onkeydownでEnterキーをトリガーにすることもできます。 更に上記のinput-text要素は、 value=""で入力フォームが消えてしまった場合の回避措置がありません。 value=""で消えてしまうとクリックすべき文字列がなくなりますので、次はもうクリックできません。 実際に使う場合は、value=""消えようとする時にアラート出すなりの回避措置が必要です。
- 投稿日：2021-09-11T17:15:45+09:00
HTML/CSSまとめ
HTML nav → リンクなどのまとめをする CSS カスケード：CSSの順番 あと勝ちになる、!importantで最優先で指定できる ※importantはあまり推奨されない スコアリング：インラインスタイル（HTML上に書くやつstyle）>id>class>何もない(h1) inherit：親クラスのプロパティを継承する initial：ブラウザのデフォルト値が適用される unset：inheritがあったらinheritが適用され、なければinitialが適用される all:unset:すべてのプロパティをクリアできる ユニバーサルセレクター：＊などすべてに適用されるセレクター ^ これは前方一致 * これは部分一致 $ これは後方一致 first-of-type:一番最初のやつにスタイル適用 nth-of-type(2):何番目か指定する事ができる :hoverでマウスカーソルを当てたときに色がかわる ::after 要素のあとになにか追加 ::before 要素の前になにか追加 ::first-line 最初の行のみ ::first-letter 最初の文字のみ 子孫結合子をあまり長くするのは良くない > 子結合子 直下のスタイリング + 隣接兄弟結合子 次の要素からスタイリング的に書き方ができる、簡潔にかける、2番目の要素からスタイリングしたいときに使ったりする 〜 一般兄弟結合子 前の要素のあとからスタイリング、あまり使わない
- 投稿日：2021-09-11T16:20:29+09:00
Vueと格闘する(日記)
この記事は僕がVueと格闘した記録である。 特定の意味は持たせていないので、この記事からなにかを得ようだなんて思ってはいけない。 テーブルを書く 実装 index.html <head> <meta charset="UTF-8"> <script src="lib/vue.js"></script> <script defer src="tet.js"></script> <title>my 1st Vue</title> </head> <body> <div id="app"> <table border> <tr> <th v-for="h in tableHeader" v-bind:name="h.id">{{h.text}}</th> </tr> <tr v-for="d in tableData"> <td v-for="h in tableHeader" v-bind:name="h.id">{{d[h.id]}}</td> </tr> </table> </div> </body> tet.js var app = new Vue({ el: '#app', data: { tableHeader: [ { "id": "id", "text": "ID" }, { "id": "name", "text": "商品名" }, { "id": "fee", "text": "値段" } ], tableData: [ { "id": "012", "name": "たこ焼き", "fee": "150" }, { "id": "023", "name": "わたあめ", "fee": "100" }, { "id": "034", "name": "りんご飴", "fee": "120" } ] } }) output <html><head> <meta charset="UTF-8"> <script src="lib/vue.js"></script> <script defer="" src="tet.js"></script> <title>my 1st Vue</title> </head> <body> <div id="app"> <table border=""> <tbody> <tr> <th name="id">ID</th> <th name="name">商品名</th> <th name="fee">値段</th> </tr> <tr> <td name="id">012</td> <td name="name">たこ焼き</td> <td name="fee">150</td> </tr> <tr> <td name="id">023</td> <td name="name">わたあめ</td> <td name="fee">100</td> </tr> <tr> <td name="id">034</td> <td name="name">りんご飴</td> <td name="fee">120</td> </tr> </tbody> </table> </div> </body> </html> ※イメージ ID 商品名 値段 012 たこ焼き 150 023 わたあめ 100 034 りんご飴 120 説明 不要だと思うけど。 データ出力部分は、 行毎ループがv-for="d in tableData" 列毎ループがv-for="h in tableHeader" でやってる。 おミソは、tableHeaderを配列にしたので、列の入れかえが死ぬほどかんたん。 tet.js@順番入れ替え tableHeader: [ { "id": "name", "text": "商品名" }, { "id": "fee", "text": "値段" }, { "id": "id", "text": "ID" }, ], のように、配列内で順番を変えれば列位置も変えられる(だからなんだという感じはなくはない。) 単位もつけてみたいにぇ。 index.html@単位対応 <td v-for="h in tableHeader" v-bind:name="h.id">{{d[h.id]}}{{unitName[h.id]}}</td> tet.js@単位対応 unitName: { "fee": "円" } @順番入れ替えと@単位対応を行った結果※イメージ 商品名 値段 ID たこ焼き 150円 012 わたあめ 100円 023 りんご飴 120円 034 いぇい
- 投稿日：2021-09-11T16:20:29+09:00
Vueでテーブルを書く
いきなり実装 index.html <head> <meta charset="UTF-8"> <script src="lib/vue.js"></script> <script defer src="tet.js"></script> <title>VueTable</title> </head> <body> <div id="app"> <table border> <tr> <th v-for="h in tableHeader" v-bind:name="h.id">{{h.text}}</th> </tr> <tr v-for="d in tableData"> <td v-for="h in tableHeader" v-bind:name="h.id">{{d[h.id]}}</td> </tr> </table> </div> </body> tet.js var app = new Vue({ el: '#app', data: { tableHeader: [ { "id": "id", "text": "ID" }, { "id": "name", "text": "商品名" }, { "id": "fee", "text": "値段" } ], tableData: [ { "id": "012", "name": "たこ焼き", "fee": "150" }, { "id": "023", "name": "わたあめ", "fee": "100" }, { "id": "034", "name": "りんご飴", "fee": "120" } ] } }) output <body> <div id="app"> <table border=""> <tbody> <tr> <th name="id">ID</th> <th name="name">商品名</th> <th name="fee">値段</th> </tr> <tr> <td name="id">012</td> <td name="name">たこ焼き</td> <td name="fee">150</td> </tr> <tr> <td name="id">023</td> <td name="name">わたあめ</td> <td name="fee">100</td> </tr> <tr> <td name="id">034</td> <td name="name">りんご飴</td> <td name="fee">120</td> </tr> </tbody> </table> </div> </body> </html> ※イメージ ID 商品名 値段 012 たこ焼き 150 023 わたあめ 100 034 りんご飴 120 説明 不要だと思うけど。 データ出力部分は、 行毎ループがv-for="d in tableData" 列毎ループがv-for="h in tableHeader" でやってる。 おミソは、tableHeaderを配列にしたので、列の入れかえが死ぬほどかんたん。 tet.js@順番入れ替え tableHeader: [ { "id": "name", "text": "商品名" }, { "id": "fee", "text": "値段" }, { "id": "id", "text": "ID" }, ], のように、配列内で順番を変えれば列位置も変えられる(だからなんだという感じはなくはない。) 単位もつけてみたいにぇ。 index.html@単位対応 <td v-for="h in tableHeader" v-bind:name="h.id">{{d[h.id]}}{{unitName[h.id]}}</td> tet.js@単位対応 unitName: { "fee": "円" } @順番入れ替えと@単位対応を行った結果※イメージ 商品名 値段 ID たこ焼き 150円 012 わたあめ 100円 023 りんご飴 120円 034 いぇい 今後に向けて テーブルの編集機能作りたい 表示機能と共存させると重くなりそうだけど、テーブル内容の編集・保存機能をつけたい editableにしたり、編集した後のtableDataのJSONを保存したりしたい。 サーバー側のを保存する機能は、サーバーサイドをがっちりしないとダメだろうから、いったん保留 属性もいじいじしたい テーブルの幅だの、alignだのだっていじいじしたい。 tableAttribとか作ってHeader.idで紐付けた配列にいろいろ持たせたやつを、JavaScriptで後からAddしてあげる感じか "tableAttrib":{"id":[{"align":"center"},{"width":"50"}],"name":[],"fee":[]} align属性はdeprecatedなのでまた別の方法かもしらん つか、thとtd指定のname指定(上記ならば)で、CSSでキメればいいのか でも、WebStormくんが「name属性使うなってVue3.0がサジェストしとるで」って言うから、それもなんか違うのかしらん そんなところです。