2017年2月21日

YouTube 動画の遅延読み込み

スクロールして YouTube 動画がウィンドウ内に入った時に、逐次ロードする方法を紹介します。「縦横比を維持したまま横幅いっぱいに YouTube 動画を表示」の遅延読み込み版です。

HTML

補足

  • YouTube 動画の埋め込みコードを一部書き換えます。
  • src="…" を data-src="…" に変更し、src="about:blank" を追加します。
  • src="about:blank" なので、HTML のロード時に YouTube 動画は読み込まれません。

jQuery

補足

  • YouTube 動画がウィンドウ内に入ったら data-src の値を src に上書きしています。

CSS

補足

サンプル

関連記事

縦横比を維持したまま横幅いっぱいに YouTube 動画を表示

縦横比を維持したまま横幅いっぱいに YouTube 動画を表示する方法を紹介します。

HTML

補足

  • YouTube 動画の埋め込みコードを二重の div 要素内に記述します(外側の div 要素には frame-youtube クラスを付ける)。
  • YouTube 動画の埋め込みコードは書き換えずに、そのまま div 要素内に貼り付ける。
  • 埋め込みコードの width とheight の値は無視されるので、気にしなくて良い。

CSS

補足

  • 将来、YouTube 動画の仕様が変わったら padding-bottom: 56.25% や padding-top: 30px の値が変わるかも知れません。

サンプル

関連記事

2017年2月17日

リスト要素に一定間隔(秒)でクラスを付け替えていく

リスト要素に一定間隔(秒)でクラスを付け替えていく方法について紹介します。ニュース・タイトルや画像を一定間隔で切り替えたい時などに使えると思います。

HTML

jQuery

補足

  • このサンプルでは指定した ul li 要素に3秒間隔で "ON" というクラスを順番に付け替えています。

CSS

補足

  • 非表示にしている ul li 要素が "ON" というクラスが付加されたタイミングで表示されます。

サンプル

関連記事

2017年2月16日

body 要素にデバイスを識別するクラスを付加

ウィンドウ幅に応じて、デバイスを識別するクラスを body 要素に付加する方法を紹介します。付加された識別クラスを元に、デバイス毎に異なるスタイルを CSS で指定できるようになります。

HTML

jQuery

補足

  • このサンプルでは、ロード時とリサイズ時にウィンドウ幅をチェックして、 600px 未満なら "SMP"、960px 未満なら "TAB"、それ以上なら "PC" というクラスを body 要素に追加しています。

CSS

補足

  • このサンプルでは、body 要素に付加されているクラスによって、表示される li 要素とその背景が変わるよう CSS を設定しています。

サンプル

li 要素を inline-block 化して横並びにする

li 要素を inline-block 化することで、li 要素を横並びにする方法について紹介します。text-align で li 要素の左・右・中央揃ができます。

HTML

補足

  • inline-block 化したい ul 要素に "inline-block" クラスを付けます。

CSS

補足

  • 単純に inline-block 化すると li 要素間にギャップができるので、ul 要素の font-size を一旦 0 にして、li 要素で再定義しています。
  • 必要に応じで、text-align と vertical-align で li 要素のレイアウトを指定します。

サンプル

2017年2月15日

ブロック要素を吹き出し風にする

ブロック要素に吹き出し風の三角を指定した位置に付ける方法について紹介します。

HTML

補足

  • ブロック要素に吹き出しの位置を指定するクラス( balloon-bottom-right など)を付けます(このサンプルでは span 要素をブロック化しています)。

CSS

補足

  • 右下、左下、上、下、左、右用の吹き出しを定義しています。
  • 吹き出しの三角の部分は after 擬似要素で表示しています。

サンプル

2017年2月14日

ページ内リンクのスムーズ・スクロール

ページ内のリンクへ移動する時にスムーズにスクロールする方法を紹介します。

HTML

補足

  • 通常通りページ内リンクを設定します。

jQuery

補足

  • リンク先が '#' で始まるリンクがクリックされた時に、アニメーションで移動しています。

サンプル

2017年2月13日

背景画像の遅延読み込み

画像の遅延読み込み」の背景画像版を紹介します。

HTML

補足

  • 本来表示させる背景画像を data-bg 属性で指定します。
  • src 属性には仮のファイルを指定します。仮のファイルは背景画像を表示させる領域と同じ縦横比の透明 PNG ファイルです。サンプルでは spacer-1x1.png という 1px × 1px の透明 PNG ファイルで、正方形の領域を指定しています。
  • 仮ファイルの画像により、本来表示される画像の領域が確保され、背景に指定した読み込み中の画像(loader.gif)が、その中央に表示されます
  • data-bg-size 属性の値に contain または cover を指定することで、背景画像の表示の仕方を指定できます。

jQuery

補足

  • ロード・スクロール・リサイズ時に data-bg 属性のついた img 要素を delayBg 関数で処理しています。
  • delayBg 関数では、data-bg 属性のついた img 要素に SHOW クラスがなく、かつ非表示状態でなければ data-bg 属性の値を background-image プロパティにセットして表示しています(フワッと表示させるため、fadeOut と fadeIn を使用)。そのあと、SHOW クラスを付加して、表示済みのフラグを付けています。
  • 非表示状態のブロック要素内にある img 要素がロード時に処理されてしまうようなので、if 文内に && !$(this).is(':hidden') を付け加えています。
  • data-bg-size 属性が指定されている場合は、その値を調べて、背景画像の表示方法を変更しています。

CSS

補足

  • data-bg 属性の付いた img 要素の背景画像として、読み込み中を示す loader.gif をセットしています。
  • jQuery で処理されるまでは loader.gif 画像が透明 PNG ファイルの背景画像として見えます。処理後は本来表示される背景画像が表示されるので見えなくなります。

サンプル

関連記事

画像の遅延読み込み

画像の多いページでは読み込み時に負荷がかかるので、読み込み時はウィンドウ内にある画像のみロードし、それ以降の画像はスクロールして画像がウィンドウ内に入った時に、逐次ロードする方法を紹介します。

HTML

補足

  • 本来表示させる画像を data-src 属性で指定します。
  • src 属性には仮のファイルを指定します。仮のファイルは本来表示させる画像と同じ縦横比の透明 PNG ファイルです。サンプルでは spacer-4x3.png という 4px × 3px の透明 PNG ファイルを指定しています。
  • 仮ファイルの画像により、本来表示される画像のエリアが確保され、背景に指定した読み込み中の画像(loader.gif)が、その中央に表示されます

jQuery

補足

  • ロード・スクロール・リサイズ時に data-src 属性のついた img 要素を delayImage 関数で処理しています。
  • delayImage 関数では、data-src 属性のついた img 要素に SHOW クラスがなく、かつ非表示状態でなければ data-src 属性の値を src 属性にセットして表示しています(フワッと表示させるため、fadeOut と fadeIn を使用)。そのあと、SHOW クラスを付加して、表示済みのフラグを付けています。
  • 非表示状態のブロック要素内にある img 要素がロード時に処理されてしまうようなので、if 文内に && !$(this).is(':hidden') を付け加えています。

CSS

補足

  • data-src 属性の付いた img 要素の背景画像として、読み込み中を示す loader.gif をセットしています。
  • jQuery で処理されるまでは loader.gif 画像が透明 PNG ファイルの背景画像として見えます。処理後は本来表示される画像が前面に表示されるので見えなくなります。

サンプル

関連記事

2017年2月11日

指定要素に一定間隔(秒)でクラスを付けていく

指定要素(例えば、li 要素など)に一定の間隔(秒数)で順番にクラスを付けていく(addClass)する方法を紹介します。付加されたクラスのスタイルを定義することで、一定間隔で見た目を変化させていくことができます。

HTML

jQuery

補足

  • このサンプルでは、指定した ul li 要素に1秒間隔で "ON" というクラスが付加されます。

CSS

補足

  • "ON" クラスが付いた ul li 要素に背景色を設定しています。これにより、"ON" クラス が付加されたタイミングで背景色が適用されます。

サンプル

2017年2月10日

スクロール時に指定要素がウィンドウ内に入ったらフワッと表示

スクロール時に、指定要素がウィンドウ内に入ったらフワッと表示する方法を紹介します。

HTML

補足

  • 必要であればフワッと表示したい要素に id または class を指定します。サンプルでは ul li 要素をフワッと表示させます。

jQuery

補足

  • フワッと表示したい要素を変数 s に指定します(サンプルでは ul li 要素を指定)。
  • ロード、リサイズ、スクロール時に、指定した要素の上端がウィンドウ内にあるかチェックして、ウィンドウ内にあれば透明度を変化させてフワッと表示しています。

CSS

補足

  • スクロール時にフワッと表示したい要素を opacity: 0.0 で透明にしておきます。

サンプル

2017年2月9日

ブロック要素の左右端に括弧を表示

ブロック要素の左右端に括弧を表示する方法を紹介します(レスポンシブ対応)。

HTML

補足

  • 括弧を付けたいブロック要素(サンプルでは blockquote )に bracket クラスを付けます。丸括弧にしたい場合は、radius クラスも合わせてつけます。

CSS

補足

  • 括弧の色や大きさ、余白などを設定しています。

サンプル

関連記事

2017年2月8日

多階層のアコーディオンパネル

複数の階層を持つアコーディオンパネルを jQuery で実装する方法について紹介します。

HTML

補足

  • id 名 accordion-panel を付けた div 要素内に 入れ子の dl 要素を記述しています。

jQuery

補足

  • パネル全体がコンパクトになるよう、クリック時に余計な dd 要素は非表示にします。
  • まず、クリックされた dt 要素を基準に、同階層とその下層の dd 要素を全て非表示にしています。
  • 次に、クリックされた dt 要素の次の dd 要素の開閉状態に応じて、表示・非表示を設定しています。

CSS

補足

  • jQuery だと読み込み時に一瞬表示されてしまうので、CSS で id 名 accordion-panel の div 要素内の dd 要素を全て非表示にしています。
  • クラス layer-1, layer-2, layer-3 はデザイン用で、アコーディオンパネルの開閉とは関係ありません。

サンプル