トグルでclassを追加・除去するJavaScript
トグルでクラス名を追加削除したい時は多いですが不便でした．JavaScriptに「classList」が追加されました．classListには.add()，.remove()，.toggle()という... Read More
ドラッグドロップでスワップできるグリッド
先日の続編．要素をドラッグドロップするとき，要素がすでにある場合にはスワップできる． ※要jQuery． <script> const allowDrop = (event) => { event... Read More
スマホのスクロールが固い原因
スマホですいすいスクロールできるのがふつうですが，固くなることがあります． 原因はPCでみるとはっきりします．スクロールバーが二重に... Read More
スマホ表示で横揺れをなくす
スマホで操作していると，まるで画面がサイズより大きいかのように，枠の外の余白がみえるまでコンテンツが揺れてしまうことがあります． ... Read More
ドラッグドロップできるグリッド行列
要素をドラッグドロップできるHTML5 APIを使って作った．まずそのAPI部分から． <script> const allowDrop = (ev) => { ev.preventDefault(); }...... Read More
FOUCを即効で直す方法
FOUCとは，読み込み時に画面がちらつく現象．CSSのスタイルが効いていない要素がCSSファイルより先に読み込まれてしまうことにより起こる．FOUCを... Read More
buttonの中央寄せについて考えた
ウェブページに欠かせないボタン．なにかとあればボタンで考えがちなきょうこの頃． HTMLには2種類のボタンがある．buttonタグとinput type=”bu... Read More
ページ上/下端に要素を表示し続ける
ナビゲーションバーやヘッダー/フッターなど，スクロールしても上下端に表示し続けたいことがある．実はいまとても簡単に実装できるのだ． hea... Read More
CSSで変数を使う方法
CSSを使わずSassやSCSSを使いたがる理由のひとつに，変数を使いたいことがある．文字色や値を繰り返さずに記述したほうが管理しやすいし，変数に... Read More
FuelPHP「No composer autoloader found.」エラー
FuelPHPの初期設定で次のようなエラーが画面に現れたときにいったいどうすればよいか． No composer autoloader found. Please run composer to install the...... Read More
IndexedDBを試してみた
HTML5 APIのひとつ「IndexedDB」を使って動かした． <!DOCTYPE html> <html> <head> <meta charset="utf-8"...... Read More
Bootstrapでドロップダウン切替え
よく見かけるタブ切替えではなく，ドロップダウン切替えを作ってみた．特徴は，<select>タグや<option>タグを使わず，Bootstrapで作ったので... Read More
サンプルコード付きのcomponentまとめ
デザインフレームが乱立するこのウェブの世界で，使いやすさは採用するうえで重要だ．一見して分かりやすく，切り貼りできるコードがついて... Read More
opacityはz-indexが効かない
CSSプロパティのopacityは透過度を0から1までの数値でデザインできる．今回，opacityはオブジェクトの重なりに有効なのか調べるため，z-indexを使って... Read More
bootstrap-datepickerを使ってみる
カレンダーを導入したい時のためのメモ． <!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://...... Read More
sessionStorageを試してみた
HTML5 APIのウェブストレージ（WebStorage）を試している． ローカルブラウザにセッションデータを保存できる「セッションストレージ（sessionStorage... Read More
localStorageを試してみた
HTML5 APIのウェブストレージ（WebStorage）を試している． ローカルブラウザにデータを保存できる「ローカルストレージ（localStorage）」は，随分と... Read More
フィードバックHubのバッジを全部集めた
Windows10のアプリ「フィードバックHub」では，バッジがつく．今回，遂にバッジをすべてそろえた． 投稿数が50件を超え，賛成票も50件を優に越し... Read More