Web技術 【CSS】子要素を親要素からはみ出して画面いっぱいにする方法
子要素を親要素からはみ出して画面いっぱいにする方法表示結果 See the Pen rNWqagE by 山崎毅 (@nbudjgzu) on CodePen.HTML<div class="box"> <div class="btnAre...
Web技術
Web技術 Web技術 【JavaScript】バックスラッシュ（“）を使うと「+」を使わなくて済むので楽
JavaScriptconst firstName = "Takeshi";const job = "Programmer";const birthYear = 1982;const year = 2020;const theInfo = ...
Web技術 【WordPress】WordPressで作る簡易ログイン画面
WordPressで簡易ログイン画面を作ったので、メモしておくheader-front.php<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="...
Web技術 【JavaScript】JavaScriptをmodule化する方法
<!DOCTYPE html><html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <script type="module"...
Web技術 【CSS】要素をズームインさせて表示する方法
画面を表示させた時に要素をズームインさせて表示する方法をメモしておく。使う技術はCSSアニメーションだ。結構簡単な記述で対応できるので、おすすめだ。キーフレームをさらに細かく指定するといろいろなアニメーションができると思うので、好きな人は色...
Web技術 【JavaScript】パスワード、パスワードの再入力バリデーション
パスワードとパスワードの再入力が同じでなければ、ボタンを押した際にエラーメッセージを出すというJavaScriptコードをメモしておくHTML<p id="error_msg" class="font-red"></p> <label fo...
Web技術 【CSS】textareaの下にできる謎の余白を消す方法
textareaの下にできる謎の余白を消す方法をメモしておく。textarea { display: block;}これだけでOK。非常に簡単。
Web技術 【JavaScript】全てのフォームが入力/選択されたらボタンを有効化する方法
HTML<form id="theForm"> <input type="text" required> <input type="radio" name="food" id="food01" required> <label for="f...
Web技術 【JavaScriptライブラリ】noUiSliderの使い方
noUiSliderを使って開発をする機会があったので、メモしておくconst slider = document.getElementById('slider');const btn = document.getElementById('...
Web技術 【css】スマホコーディング：画面高さいっぱいかつスクロールできる様にする
案件で画面高さいっぱいの背景にコンテンツが多い場合、スクロールできる様にして欲しいとあって、結構ハマったのでメモとして残す。.menu { position: relative; top: 0; left: 0; width: 100%; ...