画像を使用せずに、ほぼCSSのみで実装できるグラフィカルなパンくずリストの作り方を解説する。今回はIE8のバグ対策で少しだけjQueryを使用する。 作例のファイルの構成はHTMLファイル、外部CSSファイル、外部JSファイルとなっている【1-1】。 ライブラリと ...

デモでは各サムネイルの画像をクリックするとLightboxのように拡大した画像を表示し、右下の×アイコンをクリックすると元の画面に戻ります。 対応ブラウザは、IE6を含む主要なブラウザ全てとなっており、IE6対策にexpressionが使用されています。 CSS Light Box ...

Lightbox、Thickbox風のエフェクトをJavaScript無しで、CSSで実装する方法の紹介です。 上記サイトで紹介されているコードを使用すると、Lightbox風のエフェクトを実装することができます。 「JavaScript無し」とサイトにはありますが、onclickのイベントに入っている ...

別窓を開かずにその場クリックで拡大画像を表示する4つの方法(4ページ目) 画像のクリック後にページを移動せず、その場で拡大画像を表示できるLightbox系スクリプトのおすすめ4本を紹介。JavaScriptを読み込むタグと短いHTMLを書くだけで簡単に使えます。

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の ...

.gallery--open で画像を開き、一番最後の .gallery--close で透明レイヤーを画像の上に全体に重ねる形で画面のどこをクリックしても閉じる、というように作りました。 遅延読み込み用に loading="lazy" も必ず指定します。 CSS CSSは以下のとおりです。