CSSのみで画像を拡大表示してみる

Javascriptを使わずに、HTMLとCSSだけで画像をクリックしたときに拡大表示をする方法を模索してみます。

HTMLのグローバル属性にtabindexというものがあります。この属性はTabキーを押したときの動作の順序を指定するもので、主にフォームの部品(<input>タグや<textarea>タグなど)に使用します。この属性をフォーム以外の要素に指定したときの動作が少し特殊で、本来フォーカスできない要素もフォーカスできるようになります。

<p>要素にtabindex属性を付与してみた例 (この段落をクリックするとフォーカスされます)

このフォーカスされた状態は、CSSのfocus擬似クラスでスタイルを適用することが出来るので、それを活用します。

サンプル

コード

img[tabindex] {
	cursor: pointer;
}
img[tabindex]:hover:not(:focus) {
	filter: brightness(80%);
}
img[tabindex]:focus {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100;
	transform: translate(-50%, -50%);
	outline: 0;
	cursor: default;
	width: auto;
	height: auto;
	max-width: 95%;
	max-height: 95%;
}

<img src="ImagePath.webp" tabindex="-1">

欠点

• あくまでフォーカス時に拡大するので、ブラウザ自体がアクティブで無くなったり、アドレスバーなどにフォーカスを移動した場合は拡大表示が終了します。
• フォーカスを外すには画像以外の場所をクリックする必要があります。画像がブラウザ画面より大きく比率が同じ場合、ブラウザを非アクティブにする以外に拡大表示を終了する方法がなくなるので、対策として最大幅・高さを一回り小さくしています。また、フォーカスを外す際にクリックする場所ではアクションやイベントが発生する要素(リンクなど)を排除する必要があります。
• <img>要素のスタイルを変更しているにすぎないため、拡大後の画像をソースとして指定する必要があります。モバイル環境の場合、ユーザーが拡大するしないにかかわらず、画像のサイズによっては通信量が一気に増大する可能性があります。また、positionプロパティを変更しているため、<img>要素がフォーカスされている間はページ内の他のコンテンツのレイアウトが崩れる可能性があります。