スクロール方向により異なるアニメーションを付加

指定した要素に、ページのスクロール方向により異なるCSSアニメーションを付加する。

デモページを表示

CSS

補足

• 付加するCSSアニメーションを用意しておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ページのスクロール方向を判定して、CSSアニメーションのクラスを追加・削除している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• CSSアニメーションを付加する要素にクラス（scrolltop）をつけておく。

見出しの要素幅に応じて、文字サイズを変える。

ウィンドウ幅を変えると見出しの要素幅が代わり、それに応じて文字サイズを拡大・縮小させる。

デモページを表示

CSS

補足

• 文字サイズを可変させる見出しに variable-font-size クラスをつける。
• 見出しの最小要素幅 min-width と、その時の文字サイズを指定する。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ウィンドウのロード時とリサイズ時に、見出し要素の幅を取得し、最小幅との比率を求め、その比率を文字サイズに乗じて、style 属性で文字サイズを変更している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• variable-font-size クラスのついた見出しが jQuery の処理対象になる。

ページ読み込み時に、タイル状に配置した画像をランダムに入れ替える。

ページの読み込み時やリロード時に、タイル状に配置した画像をランダムに入れ替える。基本的には下記 "関連投稿" の方法を組み合わせている。

デモページを表示

CSS

補足

• あらかじめCSSグリッドのエリアを設定しておいて、各アイテム（画像）の data-area 属性で指定した配置エリアをjQueryでランダムに入れ替える。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• data-area属性の値をランダムに変更することで、そのアイテム（画像）が表示するエリアを変えている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• このサンプルでは、CSSグリッドのコンテナに grid-shuffle クラス、各アイテムに data-area 属性をつけたものが処理対処になる。
• また、ページ内に対象となるCSSグリッドのコンテナが複数あることは想定していない。

関連投稿

• 列数と行数を指定して、レスポンシブな升目（正方形のグリッド）をつくる。
• ページ読み込み時に、リストの項目をランダムに入れ替える。

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

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

補足

• 表のデザインのみで、棒グラフに関する定義はしていない。
• レイアウトが崩れる場合は リセット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 要素で囲っている。

正方形の写真の四隅だけを丸くぼかす

正方形でない写真を正方形でトリミング表示し、四隅だけを丸くぼかす。

デモページを表示

CSS

補足

• jQuery で複製された img 要素（写真）を同じ位置に重ねる。背面の写真をぼかし、前面の写真を正円でトリミングする。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• img[data-bg] 要素の親要素に corner-blur クラスがある場合、写真を複製する。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 四隅を丸くぼかす場合は img[data-bg] 要素の 親要素 に corner-blur クラスを付ける。
• spacer-1x1.png は１ピクセル×１ピクセルの透過PNG画像。
• 表示する写真は data-bg 属性で指定する。

関連投稿

• 正方形でない画像を正方形内に表示（レスポンシブ対応）

疑似要素とCSSでスライドスイッチを表示し、jQueryで詳細の表示・非表示を切り替える。

疑似要素とCSSでスライドスイッチ（トグルスイッチ）を表示し、スイッチに触れたら jQuery で、詳細内容(ブロック要素）の表示・非表示を切り替える（同時にスイッチのオン・オフ状態も変える）。

デモページを表示

CSS

補足

• slide-switch クラス内の span 要素の before 疑似要素で、スイッチの背景を作り、after 疑似要素でスイッチのノブを作っている。
• slide-switch クラス に ON クラスが追加されている時は、スイッチの背景色を変え、ノブ位置を右へ移動し、色も変えてオン状態がわかるようにしている。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• slide-switch クラスをクリック（タッチ）すると、ON クラスが追加（または削除され）、オン・オフ状態が切り替わる。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• slide-switch クラス内の span 要素で スライドスイッチと "詳細表示" の文字列を表示している。
• そのため、文字列部分をクリック（タッチ）してもオン・オフが切り替わる。

項目数の多いリストを途中まで表示

項目数の多いリストをすべて表示するとページが長くなり、スクロールの回数が増えるので、途中まで表示し、続きは "続きを表示" ボタンで表示できるようにする。

デモページを表示

CSS

補足

• show-more クラスをつけた要素に続く兄弟要素を、あらかじめ非表示にしておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• show-more クラスをつけた要素をクリックすると、自分自身を非表示にし、後続する兄弟要素を表示する。
• show-more クラスをつける要素は ul li 要素に限定していないので、連続する div 要素などでも良い。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 最初に表示しておく項目の最後に show-more クラスはつけた要素を置く。

ひとつのページ内に同じデータ（文字列）を複数表示する

ひとつのページ内に同じデータ（例えば、電話番号など）を、別のセクションでも表示したい場合、それぞれに書いておくと、変更があった場合に修正し忘れすることがあるので、共通データとして一箇所に書いておき、それを複数箇所に表示できるようにする。

デモページを表示

CSS

補足

• 共通データは非表示にしておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• #common-data 内の TEL-NO・FAX-NO クラスに定義した文字列を #container 内の TEL-NO・FAX-NO クラスにセットする。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• #common-data は #container のブロック外で定義している。

body 要素にウィンドウ幅を区別するクラスを付ける

body 要素にウィンドウ幅を区別するクラスを付ける。例えば、スマートフォン・タブレット・パソコンなどを判別するために。

メディアクエリよりも CSS や jQuery で扱いやすくなる。

デモページを表示

CSS

補足

• ウィンドウ幅によって、アルバムの列数を変えるサンプル（実用的ではないが…）。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ロード・リサイズ時に body 要素に、ウィンドウ幅によって、クラス SMP、TAB、PC を付ける。PC 以上のウィンドウ幅は、PC に加えて、W960・W1280・W1600・W1920 のいずれかのクラスも追加する。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• ウィンドウ幅を変えると写真一覧の列数が変わる。

関連投稿

• リスト要素の項目を横並びにする（ウィンドウ幅に応じて項目の幅を変える方法）

アコーディオンパネルのオーバレイ表示バージョン。

アコーディオンパネルのオーバレイ表示バージョン。dt 要素をクリックした時に、対応する dd 要素を、dt 要素の下ではなく、全画面表示する。

デモページを表示

CSS

補足

• 33行目以降：オーバーレイ表示に関する設定。
• 51行目以降：動的に追加しているオーバーレイを閉じるボタンの設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 5～6行目：オーバーレイ表示する dd 要素に閉じるボタンを動的追加し，selected クラスを追加してオーバーレイ表示。
• 10～12行目：動的追加した閉じるボタンを削除し、selected クラスの付いたオーバーレイ表示されている dd 要素を非表示にしている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• dl 要素に overlay-panel クラスを付けている。

関連投稿

• 開閉アイコン付きアコーディオンパネル

target="_blank" 属性の付いた a 要素に rel="noopener" と新しいウィンドウで開くアイコンを追加

target="_blank" 属性の付いた a 要素に、セキュリティー対策として rel="noopener" 属性と新しいウィンドウで開くアイコンを動的に追加する。

デモページを表示

CSS

補足

• 動的に追加する「新しいウィンドウで開く」アイコンのスタイルを設定
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 4行目：rel 属性を設定し、i 要素でアイコンを追加している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• target="_blank" 属性が付いた a 要素が対象となる。特にHTML側で必要な設定はない。

クリックで全画面表示のお知らせを表示

あらかじめ非表示にしている「お知らせ」などの内容を、クリックで全画面オーバーレイ表示する。

デモページを表示

CSS

補足

• 32～45行目：動的に追加している閉じるボタンの設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 4行目：読み込み時に閉じるボタンを動的に追加している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 1行目：お知らせを表示するバー（クリックすると表示される）。
• 6～13行目：お知らせの内容は CSS で非表示にしている。

スクロール時に画像を遅延読み込み（アスペクト比指定＆レスポンシブ対応）

スクロール時にウィンドウに入ってきた画像を、順次遅延読み込みする（アスペクト比指定＆レスポンシブ対応）。

デモページを表示

CSS

補足

• 28～63行目：クラス aspect-4x3、aspect-3x2、aspect-16x9 により、表示する画像のアスペクト比を指定できるようにしている。これらを指定しない場合、表示される画像は正方形にトリミングされる。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• jQueryは前記事 スクロール時に画像を遅延読み込み（正方形でトリミング＆レスポンシブ対応）） と変更なし。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• ここで使用しているサンプル画像のアスペクト比は４対３。
• span 要素に frame-img クラスだけが設定されている場合は、正方形にトリミングされて表示される。
• span 要素の frame-img クラスに加えて、aspect-4x3、aspect-3x2、aspect-16x9 のいずれかを指定すると、そのアスペクト比で画像がトリミングされて表示される（表示する画像とアスペクト比が同じ場合はトリミングされない）。

関連投稿

• スクロール時に画像を遅延読み込み（正方形でトリミング＆レスポンシブ対応）
• 画像のレスポンシブ対応