列数と行数を指定して、レスポンシブな升目（正方形のグリッド）をつくる。

CSSグリッドとjQueryを使って、レスポンシブな升目（正方形のグリッド）をつくる。

デモページを表示

CSS

補足

• CSSグリッドのコンテナになる要素に、data-columns（列数） と data-rows（行数） 属性をつけることで、jQueryの処理対象になる。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• CSSグリッドのコンテナ要素に指定された列数・行数を取得し、コンテナの幅からコンテナの高さを設定している。
• グリッドの大きさは、grid-template-columns と grid-template-rows プロパティに列数と行数を設定することで決まる。
• グリッドのサイズをピクセル単位で直接指定していないので、きれいに割り切れない場合、完全な正方形にはならない。
• グリッドの間隔は コンテナ要素に data-gap 属性を指定することで、CSSグリッドの gap プロパティが設定される。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• CSSグリッドのコンテナ要素に data-columns（列数） と data-rows（行数）属性を指定する。必要であれば、data-gap 属性でグリッドの間隔を "単位付き" で指定する。

ページ読み込み時に、リストの項目をランダムに入れ替える。

ページ読み込み時や再読み込みした時に、リストの項目をランダムに入れ替える。

デモページを表示

CSS

補足

• flexbox の order プロパティで順番を入れ替えるので、リストに flexbox のプロパティを設定している。
• order プロパティは、読み込み時や再読み込み時に jQuery で設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 最初に重複しない整数の乱数を配列に用意し、その値をリスト項目の order プロパティに設定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 処理対象の ul 要素に shuffle クラスをつける。

メインページのヘッダーとフッターをサブページに読み込む

jQuery で、メインページのヘッダーとフッターをサブページに読み込むことで、メインページ側の変更がサブページにも反映される。

デモページを表示

CSS

補足

• サンプルではメインとサブの両方で同じスタイルを定義しているが、本来はメインページとサブページ共通のスタイルは外部ファイルに記述して、各ページで、その外部ファイルを読み込む。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、サブページ内に上記 jQuery を記述しているが、本来は複数のサブページ用に外部ファイルに記述して、各サブページで、その外部ファイルを読み込む。
• サブページのみ処理するために、サブページの body 要素に SUB-PAGE クラスをつけている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• メインページとサブページを区別するために、サブページの body 要素に SUB-PAGE クラスをつけている。

リスト項目の絞り込み表示

カテゴリー名リストから選んだカテゴリーと同じカテゴリーのリスト項目のみを絞り込み表示する。

デモページを表示

CSS

補足

• 絞り込みの対象となるリストの項目は、あらかじめ非表示にしておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、１ページ内に「カテゴリー名のリスト」と「絞り込みの対象となるリスト」がひとつずつあることを想定している。
• jQuery の trigger() を使って、最初に表示するカテゴリーを指定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 絞り込みの対象となるリストの表示は data属性でリスト項目にカテゴリー・ラベルを表示 を参照。

関連投稿

• data属性でリスト項目にカテゴリー・ラベルを表示

スクロール時にセクションが変わったら、全画面の背景画像を差し替える。

スクロール時にセクションが変わったら、全画面で表示している背景画像を差し替える。

デモページを表示

CSS

補足

• ウィンドウ内に複数のセクションが表示される場合は、下のセクションで指定した背景画像が表示されるので注意。
• 背景画像を表示するための div#cover-bg 要素は jQuery で追加される。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• load 時に背景画像を表示するための div#cover-bg 要素を追加している。
• load scroll 時に、セクション（このサンプルでは data-cover-bg 属性がついた要素）の上端がウィンドウ下端を超えたら、data-cover-bg 属性で指定されている背景画像を、上記 div#cover-bg 要素に設定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 各セクションに表示する背景画像は、各セクションの div 要素の data-cover-bg 属性で指定する。
• 背景画像を表示しないセクションは、data-cover-bg 属性に "none" を指定する。

関連投稿

• スクロール時に見出しの文字列を１文字ずつアニメーションさせる。

スクロール時に見出しの文字列を１文字ずつアニメーションさせる。

スクロール時に、見出し文字列を１文字ずつ、指定した間隔でアニメーションさせる。

デモページを表示

CSS

補足

• h2 要素内の span 要素で、見出し文字列の１文字のスタイルを設定している。なお、アニメーションさせるために span 要素は inline-block 化している。
• 文字に適用するCSSアニメーション（bounce）を定義している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ロード時に、見出し文字列を１文字ずつ span 要素で区切っている。
• このサンプルでは、ロード・スクロール時に、見出しがウィンドウの高さの1/2を超えたときに、data-animation 属性で指定されたCSSアニメーションのクラスを span 要素に追加している。
• １文字ずつ順番にアニメーションさせるために、data-delay 属性で指定された秒数間隔をあけて、各 span 要素にCSSアニメーションのクラスをつけている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• data-animation 属性に適用するCSSアニメーションのクラスを指定する。また、各文字のアニメーション開始の間隔を data-delay 属性に指定する。

関連投稿

• スクロール時に指定した要素をアニメーション付きで表示
• マウスオーバーした時にアニメーションを付ける

テーブルのセル背景色で棒グラフを表示

テーブルのセルの値を元に、セルの背景色で棒グラフを表示。

デモページを表示

CSS

補足

• 表のデザインのみで、棒グラフに関する定義はしていない。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、棒グラフの色を CSS ではなく jQuery 内で定義している。
• tbody 内の各行について、セルの値を元に棒グラフの長さを計算して、背景色の linear-gradient で棒グラフを表示している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• add-bar-bg クラスがついた table 要素を処理対象にしている。

クリックした画像を全画面表示

クリックした画像を全画面（オーバーレイ）で表示。

デモページを表示

CSS

補足

• FRAME-IMG クラスがついた要素を全画面で表示し z-index でオーバーレイ表示している。
• さらに、全画面表示を閉じるボタンを、その上（手前）に表示されるよう z-index を設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• frame-img と clickable クラスがついた画像枠をクリックした時に、全画面用の画像枠を複製している。
• 同時に、全画面表示を閉じるためのボタンも追加している。
• 全画面表示を閉じるボタンをクリックした時に、そのボタンと全画面用の表示枠を削除している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 画像枠の span 要素に frame-img に加えて clickable クラスをつけている。
• frame-img クラスは、画像をレスポンシブ対応させるためにつけている。
• spacer-1x1.png は１ピクセル×１ピクセルの透過PNG画像。実際に表示させる画像は data-bg 属性で指定している。

関連投稿

• スクロール時に画像を遅延読み込み（アスペクト比指定＆レスポンシブ対応）
• 正方形でない画像を正方形内に表示（レスポンシブ対応）

テーブルの横スクロール時に、左端の見出しセルを固定

jQuery を使って、テーブルの横スクロール時に、左端の見出しセルを固定。position: sticky は table との相性が悪いのか？ブラウザーによっては、ボーダー表示に不具合が出るので使用していない。

デモページを表示

CSS

補足

• 複製したテーブルを元のテーブルに重ねて表示している。
• 複製したテーブルは見出し以外のセルを非表示にして、左端の固定位置に表示している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• load、resize 時に、見出し用のテーブルを元のテーブルから複製している。
• セル内の折返しで各行の高さが変わってしまうので、複製する前に、行の高さをあらかじめ設定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 見出しの位置固定とスクロールバーを表示するために、テーブルをふたつの div 要素で囲っている。