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 のいずれかを指定すると、そのアスペクト比で画像がトリミングされて表示される（表示する画像とアスペクト比が同じ場合はトリミングされない）。

関連投稿

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

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

スクロール時にウィンドウ内に入ってきた画像を、順次遅延読み込みする。このサンプルでは画像の縦横比に関係なく正方形でトリミング＆レスポンシブ対応。

デモページを表示

CSS

補足

• 13～17行目：img 要素（透過PNG画像）の背景画像として表示させる設定。
• 19～26行目：画像コンテナの背景にローディング画像を表示する設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 3行目：data-bg 属性が付いた img 要素が対象。
• このサンプルでは、スクロール時に画像の上端がウィンドウ高さの半分を超えたら、data-bg 属性で指定した画像が表示されるようにしている。
• 11行目：画像の遅延表示後は data-bg 属性を削除。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 2～5行目：img 要素の data-bg 属性で遅延表示する画像を指定する。
• このサンプルでは、元の画像の縦横比に関わらず、正方形にトリミングされて表示される。

関連投稿

• 画像のレスポンシブ対応

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

正方形ではない画像を、正方形にトリミングしたり、縦横比を維持したまま正方形内に表示する（レスポンシブ対応）。

デモページを表示

CSS

補足

• 13～17行目：img 要素（透過PNG画像）の背景画像のスタイルを設定している。
• 19行目：frame-img クラスに加えて round クラスを設定すると正円でトリミングされる。。
• 23行目：frame-img クラスに加えて contain クラスを設定すると正方形内に縦横比を維持したまま表示される。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 4～6行目：img 要素の data-bg 属性で指定したファイルを img 要素（透過PNG画像）の背景画像に設定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• img 要素の src 属性には１ピクセル×１ピクセルの透過PNG画像を指定し、実際に表示する画像は data-bg 属性で指定する。
• 3行目：frame-img クラスだけの時は正方形にトリミングされる。
• 6行目：frame-img と round クラスを設定すると正円にトリミングされる。
• 9・12行目：frame-img と contain クラスを設定すると縦横比を維持したまま正方形に収まるように表示される。

関連投稿

• 画像のレスポンシブ対応

テーブルを２列表示と全列表示に切り替え

ウィンドウの幅が狭いと、列数の多いテーブルが見づらいので、指定した列と見出し列の２列表示に切り替える。

デモページを表示

CSS

補足

• table 要素に付ける two-column クラスを定義。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、テーブル１行目の商品名をクリックすると２列表示と全列表示が切り替わる（１行目左端の「商品名」をクリックした場合は、全列表示になる）。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• クリックで２列表示と全列表示を切り替える table 要素に two-column クラスを付ける。