画像上に傾いたキャプションを表示

画像上に傾いたキャプションを重ねて表示する。

デモページを表示

CSS

補足

• 傾けないキャプションの表示方法は 画像のレスポンシブ対応（画像上にキャプション表示） を参照。
• slope-caption クラスで、傾いたキャプションのデザインを設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• frame-img クラスに加えて slope-caption クラスを設定することで、キャプションを傾けることができる。

関連投稿

• 画像のレスポンシブ対応（画像上にキャプション表示）

ウィンドウ上端にページのスクロール量を示すプログレスバーを表示

ページを上下にスクロールした時に、そのスクロール量をウィンドウ上端に表示する。

デモページを表示

CSS

補足

• 動的に追加されるプログレスバーのスタイルを設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• body要素に、プログレスバー用のブロック要素（div#progress-bar）を動的に追加している。
• スクロール量に応じて、ページ全長に対する割合を求め、プログレスバーの長さ（＝幅）を設定している。
• このサンプルでは、スクロール量ゼロの場合はプログレスバーの長さをゼロにしている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• このサンプルでは、body要素にプログレスバー用のブロック要素（div#progress-bar）を動的に追加している。

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

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

デモページを表示

CSS

補足

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

jQuery

補足

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

HTML

補足

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

丸ワイプから全体表示するアニメーション

丸ワイプのサイズを徐々に大きくしながら全体表示するアニメーション。

デモページを表示

CSS

補足

• circleWipeクラスの疑似要素で、CSSの放射グラデーションを表示している。
• 放射グラデーションの中心部を透過、その外側を白のグラデーションに指定。徐々に透過部分の直径を大きくして、全体表示されるようアニメーションを設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• circleWipeクラスをつけたブロック要素の中がアニメーション表示される。

ブロック要素の背景色や背景画像の手前に格子柄を表示する。

ブロック要素の背景色や背景画像の手前に、格子柄（縦縞・横縞・ストライプ・ボーダー・チェック柄など）を表示する。

デモページを表示

CSS

補足

• bg-lattice-xxxxx クラスをつけたブロック要素に position: relative をつけておくこと。また、格子の奥の色を背景色（または背景画像）として指定しておくこと。
• 格子はブロック要素の before 疑似要素の背景イメージとして表示している（格子はブロック要素の背景色・背景画像の手前に表示される）。
• 格子の色や幅・間隔は repeating-linear-gradient の値で指定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• ブロック要素に bg-lattice-xxxxx クラスをつけて、格子のタイプを指定する。

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

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

デモページを表示

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

補足

• 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 要素で囲っている。

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

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

デモページを表示

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

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

data属性を使ってリスト項目にカテゴリーのラベルを表示する。

デモページを表示

CSS

補足

• データ属性（data-category）のついたリスト項目の before 疑似要素でカテゴリー・ラベルを表示している。
• リスト項目の内容が長く、折り返したときにカテゴリー・ラベルの下へ回り込まないよう、ラベルはリスト項目左上の固定位置に表示し、リスト項目には左余白を設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• li 要素の data属性（data-category）に設定した値が、カテゴリー・ラベルとして表示される。

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

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

デモページを表示

CSS

補足

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

jQuery

補足

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

HTML

補足

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