この写真の記事へ

サムネイル画像をその場で全画面に拡大表示させる方法(画像)(9ページ目)

西村 文宏

西村 文宏

ホームページ作成 ガイド

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

...続きを読む
GitHub内のIntense Images配布ページ

GitHub内のIntense Images配布ページ

画像をその場で拡大表示するLightbox系スクリプトの表示例
全画面ほどには拡大されない
全画面表示の画像には、上からキャプションを重ねて表示できる
全画面で拡大画像を表示
本記事で作成するサンプルページの表示例
サムネイル画像をクリックすると、その場で拡大画像を全画面に表示
スマートデバイスにも対応
全画面表示の画像には、上からキャプションを重ねて表示できる
GitHub内のIntense Images配布ページ

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます