【CSS】【z-index】ヘッダー画像を背景画像として設定し，スクロールによって画像とタイトルを隠すデザインの実装方法（ヘッダーメニュー等は常に表示させる）

今回はWebページのデザインの記事になります．ヘッダー画像がスクロールで隠れていくデザインをみたことがあるでしょうか．たまに使われていたりしますよね．スクロールで一緒に上にあがっていくのではなく，その場に留まり，コンテンツが上に被さるように隠れていくようなデザインです．今回はヘッダー画像上の文字も一緒に固定して，スクロールで隠していきます．

続きを読む

【jQuery】Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装する

この記事では，Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装します．ウィンドウのスクロール量に応じてインジケータが指し示す点も上下に移動します．また現在のインジケーター以外のインジケーターをクリックすることで，その高さのウィンドウまで自動スクロールするように実装します．Webページ全長がとても長い場合等に有効な方法です．それではインジケーターの作り方を見ていきましょう．

続きを読む

コピペで実装！jQueryでレスポンシブなハンバーガーメニューを実装する

ハンバーガーメニューとは，三本線のボタンのことです．クリックまたは，タップするとメニューが表示されます．一般的にはスマートフォン用のデザインで採用されることが多く，画面領域の有効活用ができます．もちろんPC等の画面が広いデバイスでも使用されることはありますが，今回はスマホ用の画面で，ハンバーガーメニューを表示し，大きい画面ではメニューを横並びにヘッダーに表示させます．これはCSSのみでは難しいので，jQueryを交えて実装していきます．

続きを読む

SNSアイコンのレイヤー展開するマウスオーバーアニメーションをjQueryで作る

この記事ではSNSアイコンのホバーエフェクトを作っていきます．CSSだけでも実装することはできるのですが，CSSが冗長になってしまうので，アニメーションはjQueryで作成していきます．今回は複数のレイヤーがマウスオーバー時に縦に展開するアニメーションを作成します．単純なボタンにするより，おしゃれでモダンなサイトに近づくことでしょう！

続きを読む

Node.jsのテンプレートエンジン「 EJS 」を使用してページを生成する

この記事ではNode.jsのテンプレートエンジン「EJS」を使用して，Webページを生成します．テンプレートエンジンとは，Webページを構成するHTMLを生成するための型のようなものです．HTMLだけでは毎回同じページしか表示できません．HTMLに独自機能を組み込んだテンプレートエンジンを使用することで，出力をNode.jsで書き換えることができる動的なWebページを作成できます．今回使用するテンプレートエンジンはjavascriptで利用される「EJS」を使用します．それでは解説していきます．

続きを読む

Expressで用いるプロセスマネージャー Forever & PM2

Node.jsの実行環境やクラスタリングの他にもう一つ押さえとかなければならないことがあります．それはプロセスマネージャーです．Node.jsを起動するとフォアグラウンドプロセスとなり，プロセスが異常終了した場合，アプリケーションが落ちたままとなってしまいます．そこでプロセスマネージャーを使用して，プロセスの監視を常駐で行うバックグランドプロセスとして実行することで，異常終了時に再起動してくれます．これをNode.jsのデーモン化といいます．この記事ではnodeアプリのデーモン化を行うための２つの方法を解説します．

続きを読む