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

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

デモページを表示

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 クラスはつけた要素を置く。

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

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

デモページを表示

CSS

補足

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

jQuery

補足

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

HTML

補足

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