JavaScriptの.addEventListener()のchangeでラジオボタンをクリックで要素のソート
table タグで書かれた一覧表に、ソートをかけるライブラリをよく見かけます。 が、汎用的にソート機能を追加したいときに使えるスニペットを作ってみました。 是非、参考にしてみてください。 目次.addEventListe …
JavaScriptの.closest()で要素外をクリックしたら閉じるフローティングメニュー
今回の記事は、以前作成した以下UIをベースに「よりユーザーフレンドリーな動き」をJavaScriptで付けます。 と言っても、メニュー要素外をクリックした時にメニューが閉じるだけなのですが、これだけでユーザーの体験が変わ …
関係（関連記事）の出力
プラグインのAdvanced Custom Fields (略してAFC)を使用して、投稿ページから任意の記事を指定して出力します。 目次フィールドで指定した記事一覧の出力chart.jsで指定した記事を棒グラフで出力 …
デザイナーのためのGit用語集
かつての自分もそうでしたが、用語がわかれば解説書を読み進めていても理解が進み、何より楽しくなります。 この記事では、そんなGitの用語について解説していきます。 目次Gitって何？Gitの各用語解説リポジトリコミットチェ …
プラグイン無しでWordPressの固定ページを指定してBasic認証
Basic認証は、ページやファイルにアクセス制限をかけることができる認証方法の1つで、簡易的なセキュリティ対策に用いられる方法です。 例えば、WordPressの管理画面にBasic認証をかける場合、以下の記事の手順で「 …
デザインシステムの構築・考え方「Atomic Design」とは？
デザインシステムの構築・運用で、最もポピュラーな設計手法「Atomic Designアトミックデザイン 」について、改めて調べてみました。 サイトを構成する要素を分解してグループ化し、それらをモジュールとして定義すること …
Djangoのローカル環境構築で使うターミナルのコマンドまとめ
ふと、「インストールするともれなく管理画面も付いてくる」なんてところに興味を惹かれ、今回はPythonのフレームワークDjangoをいじってみようと思います。 この記事は、そんなターミナル初心者がPythonとDjang …
JavaScriptのライブラリ「Packery」で要素のドラッグ＆ドロップ
ドラッグアンドドロップは、マウスの左ボタンを押したまま移動させたいものを移動先まで持っていき、マウスのボタンを離すことで、その要素を移動させることができます。 比較的モバイルよりは、デスクトップ向きのインタラクションなU …
グリグリ動く無料のアニメーションアイコン「loadicon」の特徴と使い方
今や、デスクトップだけでなくスマホでもアニメーションに対応するデバイスが増えたことで、単に見た目の装飾だけでなく、動きを加えて情報を伝えることができるようなりました。 こと、アイコンに関しても情報の補完というスタンスだけ …
JavaScriptのchildで子要素の順番を指定して取得
親要素に、子要素が複数あるブロックがある場合、JavaScriptの .firstElementChild .children[n] .lastElementChild のプロパティを使って、子要素の順番を指定して取得し …
