
ConoHa VPSでインスタンス構築 〜第3章:macのターミナルでSSH接続編〜
今更感がありますが、macで標準で使える「ターミナル」を使ってVPSサーバーにSSH接続します。 ターミナルで、この時点で自分が使いたいNode.jsのフレームワーク「Express」をサーバーにインストールしたり、いろ …

ConoHa VPSでインスタンス構築 〜第2章:公開鍵認証を設定してセキュリティ対策編〜
VPSサーバーの申し込みが完了したら、パスワードによるログインから、セキュリティの鍵によるログインに変更します。 以下、ConoHa VPSのスタートアップガイドの「サーバーの基本操作と、サーバーの初期設定」の中で、「公 …

ConoHa VPSでインスタンス構築 〜第1章:サーバーの申し込みと初期設定編〜
唐突ですが、バックエンドやLinuxの知識が皆無の私が、ふと「Node.js」をいじってみようと思い、VPSサーバーを使ってみます。 ちょっと無謀な感じもしますが「ググればなんとかなる」精神で、今回はVPSサーバーの C …

JavaScriptのfor文のループとcheckedでチェックボックスの全選択・全解除
設定画面やアンケートフォームなどで見かける「チェックボックス」。さまざまな用途で使うことができ、HTMLのみでも大枠できてしまうので、便利です。 今回はそんなチェックボックスで、「チェックボックスの全選択・全解除」をJa …

JavaScriptの.scrollYで背景のパララックスエフェクト
パララックスエフェクトを実装する時、JavaScriptのライブラリを使えば複雑なものも簡単に実装が可能です。 が、シンプルなものならJavaScriptのコードだけで実装が可能なので、今回はシンプルな「背景のパララック …

JavaScriptの.scrollHeightでコンテンツをもっと見る・閉じるで開閉
以前作った「ボタンをクリックしてコンテンツを展開」するスニペットでは、展開した後に任意で閉じることはできない使用でしたが、この記事ではもっと見る・閉じるを任意でできるようにしてみます。 是非、参考にしてみてください。 目 …

JavaScriptのライブラリVanta.jsでインタラクションな背景アニメーション
JavaScriptのライブラリ「Vanta.js」は、少し違った背景アニメーションを使う場合にピッタリです。 実装も簡単なので、是非最後までご覧いただけると嬉しいです。 目次Vanta.js使用方法Vanta.jsを使 …

JavaScriptのdocument.cookieでフォントサイズを変更してページ遷移しても状態を保持
アクセシビリティ対策で、フォントサイズの変更をネイティブなJavaScriptで実装してみます。 アクセシビリティ対策のフォントサイズを変更する機能は、WordPressならプラグインがあったりしますが、プラグインを使い …

JavaScriptのライブラリsimplePARALLAX.jsでパララックスのスクロールエフェクト
パララックス、いいですよね。 少し平面的なデザイン・レイアウトに、パララックス効果を入れることで、「動き」と「奥行き」を出せるので、そんなことも考慮しつつ使ってみるのもオススメです。 そんな時JavaScriptのライブ …

JavaScriptのwindow.innerHeightで右下にトップに戻るボタンを追従させて表示
JavaScriptなしでも作れるオブジェクトですが、JavaScriptの window.innerHeight を使って、少しスクロールした時に表示される「トップに戻る」ボタンを作ります。 是非、最後までご覧いただけ …