グリッドレイアウトというものをご存知でしょうか？グリッドとは水平線と垂直線の集合が交差した，編み目上のものを指します．CSSではこのグリッド線を設定し，その線でボックスの配置位置を定義するグリッドレイアウトが可能です．これまで，フレックスボックスで配置してきたコンテンツをより「柔軟に自由に」配置できます．今回は，ラインベースのグリッドレイアウトを実装するための基本的な使い方を解説します．
続きを読む
今回はレスポンシブに対応したWebサイトを作る時の，重要ポイントを解説します．結果から述べると，「レスポンシブ対応のサイトはモバイル版に全力をそそげ！」です．今回はモバイルファーストが以下に重要か，なぜPC版（デスクトップ版）ではないのかをじっくり解説していきます．
続きを読む
jQueryで動的なページを作ろうと考えているこの記事を読んでいる方は，on()メソッドの使い方やイベントの種類にどんなものがあるか知りたくて調べたのではないでしょうか！今回はjQueryでは必須の「on()メソッド」について解説していきます！
続きを読む
今回はWebページのデザインの記事になります．ヘッダー画像がスクロールで隠れていくデザインをみたことがあるでしょうか．たまに使われていたりしますよね．スクロールで一緒に上にあがっていくのではなく，その場に留まり，コンテンツが上に被さるように隠れていくようなデザインです．今回はヘッダー画像上の文字も一緒に固定して，スクロールで隠していきます．
続きを読む
この記事では，Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装します．ウィンドウのスクロール量に応じてインジケータが指し示す点も上下に移動します．また現在のインジケーター以外のインジケーターをクリックすることで，その高さのウィンドウまで自動スクロールするように実装します．Webページ全長がとても長い場合等に有効な方法です．それではインジケーターの作り方を見ていきましょう．
続きを読む
ハンバーガーメニューとは，三本線のボタンのことです．クリックまたは，タップするとメニューが表示されます．一般的にはスマートフォン用のデザインで採用されることが多く，画面領域の有効活用ができます．もちろんPC等の画面が広いデバイスでも使用されることはありますが，今回はスマホ用の画面で，ハンバーガーメニューを表示し，大きい画面ではメニューを横並びにヘッダーに表示させます．これはCSSのみでは難しいので，jQueryを交えて実装していきます．
続きを読む
この記事ではSNSアイコンのホバーエフェクトを作っていきます．CSSだけでも実装することはできるのですが，CSSが冗長になってしまうので，アニメーションはjQueryで作成していきます．今回は複数のレイヤーがマウスオーバー時に縦に展開するアニメーションを作成します．単純なボタンにするより，おしゃれでモダンなサイトに近づくことでしょう！
続きを読む
この記事ではNode.jsのテンプレートエンジン「EJS」を使用して，Webページを生成します．テンプレートエンジンとは，Webページを構成するHTMLを生成するための型のようなものです．HTMLだけでは毎回同じページしか表示できません．HTMLに独自機能を組み込んだテンプレートエンジンを使用することで，出力をNode.jsで書き換えることができる動的なWebページを作成できます．今回使用するテンプレートエンジンはjavascriptで利用される「EJS」を使用します．それでは解説していきます．
続きを読む
