ブラウザ、さー、新展開。

Tweet

Pocket

ブラウザにとことんつきあうページ

LINE@やってます。 今後のゲスト情報や、新劇団の情報など「LINE@」で発信していきます。ブログと基本は同じ内容ですが、こちらもよろしくお願いします。 IDは「　@totaro　」 検索するときは、最初の「@」を忘れないようにお願いします QRコードやボタンも使えますが、Amebaのアプリからは登録できないみたいです。ブラウザからなら大丈夫みたいですので、登録できない場合はブラウザからとか、LINEのID検索なども試してみてください。

ブラウザ おいしさOpe！

CSSだけでLightboxっぽいものを作ってみました。画像をクリックすると画像がその場で拡大します。

デモ

画像拡大

テキストにも拡大リンクを貼れます。→&bsp;

応用 - YouTubeの動画を拡大

弱点とか説明とか

• 記事に表示する画像と、拡大に使用する画像の2つを読み込む必要があります。
• アンカーリンクを利用するので、拡大すると履歴に残り、ブラウザで戻るのが大変になりますww
• スマホで見ると画像が二枚になるので、スマホにもCSSを読み込んだほうがいいかも
• 右上の閉じるボタンはお飾りです。実際はどこを押しても記事に戻ります。

実装方法

CSS

.lb {    display: flex;    positio: fixed;    width: 100%;    height: 100%;    top: 0;    left: 0;    justify-cotet: ceter;    alig-items: ceter;    backgroud: rgba(0,0,0,.7);    opacity: 0;    trasitio: .3s opacity ease;    z-idex: -1;}.lb img {    width: auto !importat;    max-height: 100%!importat;    trasform: scale(.7);    trasitio: .4s trasform ease;    poiter-evets: oe;}.lb:target {    opacity: 1;    z-idex: 103;}.lb:target img {    trasform: scale(1);}/* なんちゃって閉じるボタン（いらない場合は消す） */.lb::before,.lb::after {    display: block;    positio: fixed;    cotet: "";    width: 24px;    height:3px;    top: 24px;    right: 12px;    backgroud: #fff;    border-radius: 4px;}.lb::before {    trasform: rotate(-315deg);}.lb::after {    trasform: rotate(315deg);}

HTML

<a href="#sample01"><img src="記事の画像URL"></a><a id="sample01" href="#close" class="lb"><img src="拡大する画像URL"></a>

赤文字の箇所は、画像毎に文字列を変えてください。また、同じページで文字列が被らないようにしてください。（トップページやカテゴリーページに注意！）

YouTubeは以下のように記述することで拡大できます。

<a href="#youtube">ここに文字</a><a id="youtube" href="#close" class="lb">YouTubeで発行する埋め込みコード</a>