JavaScriptの.closest()で要素外をクリックしたら閉じるフローティングメニュー
今回の記事は、以前作成した以下UIをベースに「よりユーザーフレンドリーな動き」をJavaScriptで付けます。 と言っても、メニュー要素外をクリックした時にメニューが閉じるだけなのですが、これだけでユーザーの体験が変わ …
関係（関連記事）の出力
プラグインのAdvanced Custom Fields (略してAFC)を使用して、投稿ページから任意の記事を指定して出力します。 フィールドで指定した記事一覧の出力 カスタムフィールドのフィールドタイプ「関係」で戻り …
デザイナーのためのGit用語集
かつての自分もそうでしたが、用語がわかれば解説書を読み進めていても理解が進み、何より楽しくなります。 この記事では、そんなGitの用語について解説していきます。 Gitって何？ Gitは、バージョン管理システムです。 G …
プラグイン無しで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 のプロパティを使って、子要素の順番を指定して取得し …
JavaScriptの.focus()でフォームに最大文字数を入力するとフォーカスが移る
JavaScriptの .focus() メソッドとfor文のループで、テキストフィールドに入力していくとフォーカスが自動で移っていくスニペットを作ります。 是非、最後までご覧いただけたら嬉しいです。 .focus() …
