Djangoのローカル環境構築で使うターミナルのコマンドまとめ
ふと、「インストールするともれなく管理画面も付いてくる」なんてところに興味を惹かれ、今回はPythonのフレームワークDjangoをいじってみようと思います。 この記事は、そんなターミナル初心者がPythonとDjang …
JavaScriptのライブラリ「Packery」で要素のドラッグ＆ドロップ
ドラッグアンドドロップは、マウスの左ボタンを押したまま移動させたいものを移動先まで持っていき、マウスのボタンを離すことで、その要素を移動させることができます。 比較的モバイルよりは、デスクトップ向きのインタラクションなU …
グリグリ動く無料のアニメーションアイコン「loadicon」の特徴と使い方
今や、デスクトップだけでなくスマホでもアニメーションに対応するデバイスが増えたことで、単に見た目の装飾だけでなく、動きを加えて情報を伝えることができるようなりました。 こと、アイコンに関しても情報の補完というスタンスだけ …
JavaScriptのchildで子要素の順番を指定して取得
親要素に、子要素が複数あるブロックがある場合、JavaScriptの .firstElementChild .children[n] .lastElementChild のプロパティを使って、子要素の順番を指定して取得し …
JavaScriptの.focus()でフォームに最大文字数を入力するとフォーカスが移る
JavaScriptの .focus() メソッドとfor文のループで、テキストフィールドに入力していくとフォーカスが自動で移っていくスニペットを作ります。 是非、最後までご覧いただけたら嬉しいです。 目次.focus( …
無料で使えるGoogle Fontsに追加された「モリサワ BIZ UDフォント」4種の特徴と表示例
タイムリーな話題ではなく、4月まで遡るお話ですが「モリサワ BIZ UDフォント」がGoogle Fontsで利用可能になりました。 Google Fontで使えるようになった「モリサワ BIZ UDフォント」について、 …
JavaScriptの.toggle()で画面右下に追従するフローティングメニュー
JavaScriptの .toggle() メソッドを使って、クリックで展開・格納をするフローティングメニューを作ります。 全体的には、JavaScriptのコードで作るのではなく、動きをCSSで作っていくUIです。 是 …
JavaScriptのライブラリCompressor.jsを使ってWebページ上で画像をpngに変換・圧縮
今回は、JavaScriptのライブラリ「Compressor.js」を使って画像の変換・圧縮をしてみます。 Compressor.jsは、画像の変換・圧縮が可能で、設置も簡単なJavaScriptライブラリです。是非、 …
JavaScriptのDate().toLocaleString()で現在時刻を取得して要素に追加
JavaScriptの .addEventListener のクリックトリガーと、Date().toLocaleString() の日時取得をして、最後に指定したブロックに要素を追加します。 スニペット自体は単独で使うこ …
Node.jsのExpress＋Socket.IOを使ってチャットアプリを作る
今回は、Node.jsにExpressのフレームワークとSocket.IOのライブラリをインストールして「チャットアプリ」を作ってみます。 かなり自分への備忘録的な内容が多い記事内容ですが、是非最後までお付き合いいただけ …
