Web制作 【JavaScript】フォームの要素を取得する際、要素名に変数を設定する
<form name="myform"> <input name="title" type="text"></form>たとえば、上記のフォームからinputのvalueを取得したい場合、const value = document.for...
JavaScript
Web制作 
Web制作 【JavaScript/PHP】生年月日から年齢を計算する
現在の日付から生年月日を引いて、1万で割ると年齢を計算することができます。それぞれ、19900401の部分に生年月日を設定します。PHP$calcAge = floor((date('Y/m/d') - 19900401) / 10000)...
Web制作 【JavaScript】任意の位置にHTML要素を挿入する
ページの指定した位置にHTML要素を挿入するときは、下記の4種類のメソッドで挿入することができますappendChildbeforeafterinsertBeforeappendChild指定した要素の中の最後に挿入するNode: appe...
Web制作 【JavaScript】HTML要素を複製（コピー）する
複製したいHTML要素に対してcloneNodeメソッドを使うことで、属性やテキストを保持したままHTML要素を複製することができます。Node: cloneNode() メソッド - Web API | MDNcloneNodeメソッドの...
Web制作 【JavaScript / jQuery】ページ読み込み後に実行する関数の違い
JavaScriptwindow.onload = function()window.onload = function() { 実行させたい処理;}HTMLや画像など他の全てのデータの読み込みが完了した時に実行される。複数ある場合は、最後...
Web制作 【CSSのみ】details要素とsummary要素でアコーディオンを作る
よくある質問ページやQ&A等の詳細でよく使うアコーディオンを実装する際、JavaScript（jQueryを含む）をはじめ色々な実装方法がありますが、今回はdetails要素とsummary要素を使用してCSSのみで作る方法をご紹介します。...
Web制作 【CSS/JavaScript】iOS（iPhone）でモーダルウインドウの背面をスクロール禁止にする
モーダルウインドウなど全画面表示かつ背面を固定したい場合、PCだとbodyにoverflow:hidden;を指定することでスクロールしないようにすることができますが、iPhoneで確認するとスクロールができてしまっています。なので別の方法...
Web制作 JavaScriptで数値をゼロ埋め（ゼロパディング）する
ゼロ埋め（ゼロパディング）とは書式の桁数に満たない数値の場合、足りない桁数だけ0を追加してゼロ埋め（ゼロパディング）することで桁数を合わせます。例えば、3桁で1を表す場合は足りない2桁をゼロで埋めて001と表記します。JavaScriptで...
Web制作 【非jQuery】slideToggle/slideUp/slideDownをJavaScriptで実装する
jQueryのslideToggle(),slideUp(),slideDown()的な動きをJavascriptに置き換えます。slideUp：スライドして隠すconst slideUp = (el, duration = 300) =>...