43日目 jQuery プラグイン-lightbox- メディアクエリ css3
CSS3
transform
transition
http://tototo.webcrow.jp/BlogUp/transform.html
ホバーするとBOXが動きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>transform</title> <style> div { width: 200px; height: 200px; margin: 10px; } .trans01 { background: #099; transition: 2s } .trans01:hover { transform: translate(30px,0); /*xは右にyは下に(反対はマイナス)*/ } .trans02 { background: #097; transition: 1s } .trans02:hover { transform: rotate(360deg); /*マイナスは半時計廻り*/ } .trans03 { background: #093; transition: 1s } .trans03:hover { transform: scale(0.2,0.2); /*大きくしたい場合は(2,2)*/ } </style> </head> <body> <div class="trans01">右へ30px</div> <div class="trans02">回転</div> <div class="trans03">縮小・拡大</div> </body> </html>
hoverしている間だけ動く
http://tototo.webcrow.jp/BlogUp/lightbox/index.html
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>light box</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/lightbox.css"> </head> <body> <ul> <li><a href="img/01.png" data-lightbox="roadtrip"><img src="img/01s.png" alt="#"> <div id="cap"> <h2>渓谷</h2> <p>崖から川が見渡せます。</p> </div> </a></li> <li><a href="img/02.png" data-lightbox="roadtrip"><img src="img/02s.png" alt="#"> <div id="cap2"> <h2>オーロラ</h2> <p>壮大なオーロラが見えます。</p> </div> </a></li> <li><a href="img/03.png" data-lightbox="roadtrip"><img src="img/03s.png" alt="#"> <div id="cap3"> <h2>ノイシュヴァンシュタイン城</h2> <p>世界で指折りの美しい城です。</p> </div> </a></li> <li><a href="img/04.png" data-lightbox="roadtrip"><img src="img/04s.png" alt="#"> <div id="cap4"> <h2>流星</h2> <p>シャッターを長くして撮影したものです。</p> </div> </a></li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="js/lightbox.js"></script> <script> lightbox.option({ 'resizeDuration': 200, 'wrapAround': true }) </script> </body> </html>
css3で画像に説明文を加えています。
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, p, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } img { border: 0; vertical-align: bottom; } ul { width: 640px; margin: 100px auto; overflow: hidden; } li { margin:10px; float: left; position: relative; overflow: hidden; /*#cap2で上にポジションしたものを隠す*/ } #cap { width: 100%; height: 200px; background: rgba(0,0,0,0.5); color: #FFF; position: absolute; top: 0; left: 0; opacity: 0; /*最初は消えといてもらう・display:noneだとtransitionが効かない*/ transition: 0.5s; } li:hover #cap { opacity: 1; } #cap2 { width: 100%; height: 100px; background: rgba(0,0,0,0.5); color: #FFF; position: absolute; top: -100%; left: 0; transition: 1s; } li:hover #cap2 { top: 0; } #cap3 { width: 300px; height: 100%; background: rgba(0,0,0,0.5); color: #FFF; position: absolute; top: 0; left: -100%; transition: 1s; } li:hover #cap3 { left: 0; } #cap4 { width: 100%; height: 200px; background: rgba(0,0,0,0.5); color: #FFF; position: absolute; bottom: -100%; left: 0; transition: 1s; } li:hover #cap4 { bottom: 0; }
メディアクエリ 基本 レスポンシブ対応
画面サイズを変えるとbackgroundのカラーが変わります。
http://tototo.webcrow.jp/BlogUp/bgmedia/mediacueri.html
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>メディアクエリ</title> <link rel="stylesheet" href="media.css"> </head> <body> </body> </html>
@charset "utf-8"; /* CSS Document */ /*pcサイトのレイアウト*/ body { background: #9CF; } /*タブレットサイズのレイアウト・959px以下になった時に適用*/ @media screen and (max-width: 959px) { body { background: #C9C; } } /*スマホサイズのレイアウト・767px以下になった時に適用*/ @media screen and ( max-width: 767px) { body { background: #096; } }
先ほどのlightboxをプラグインしたものをメディアクエリでレスポンシブ対応にする
http://tototo.webcrow.jp/BlogUp/lightbox-media/index.html
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>light box</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/lightbox.css"> </head> <body> <ul> <li><a href="img/01.png" data-lightbox="roadtrip"><img src="img/01s.png" alt="#"> <div id="cap"> <h2>渓谷</h2> <p>崖から川が見渡せます。</p> </div> </a></li> <li><a href="img/02.png" data-lightbox="roadtrip"><img src="img/02s.png" alt="#"> <div id="cap2"> <h2>オーロラ</h2> <p>壮大なオーロラが見えます。</p> </div> </a></li> <li><a href="img/03.png" data-lightbox="roadtrip"><img src="img/03s.png" alt="#"> <div id="cap3"> <h2>ノイシュヴァンシュタイン城</h2> <p>世界で指折りの美しい城です。</p> </div> </a></li> <li><a href="img/04.png" data-lightbox="roadtrip"><img src="img/04s.png" alt="#"> <div id="cap4"> <h2>流星</h2> <p>シャッターを長くして撮影したものです。</p> </div> </a></li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="js/lightbox.js"></script> <script> lightbox.option({ 'resizeDuration': 200, 'wrapAround': true }) </script> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, p, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } img { border: 0; vertical-align: bottom; } ul { width: 1280px; margin: 100px auto; overflow: hidden; } li { margin:10px; float: left; position: relative; overflow: hidden; /*#cap2で上にポジションしたものを隠す*/ } #cap { width: 100%; height: 200px; background: rgba(0,0,0,0.5); color: #FFF; position: absolute; top: 0; left: 0; opacity: 0; /*最初は消えといてもらう・display:noneだとtransitionが効かない*/ transition: 0.5s; } li:hover #cap { opacity: 1; } #cap2 { width: 100%; height: 100px; background: rgba(0,0,0,0.5); color: #FFF; position: absolute; top: -100%; left: 0; transition: 1s; } li:hover #cap2 { top: 0; } #cap3 { width: 300px; height: 100%; background: rgba(0,0,0,0.5); color: #FFF; position: absolute; top: 0; left: -100%; transition: 1s; } li:hover #cap3 { left: 0; } #cap4 { width: 100%; height: 200px; background: rgba(0,0,0,0.5); color: #FFF; position: absolute; bottom: -100%; left: 0; transition: 1s; } li:hover #cap4 { bottom: 0; } /*タブレット*/ @media screen and (max-width:959px) { ul { width: 640px; } } /*スマホ*/ @media screen and (max-width:767px) { ul { width: 320px; } li { float: none; } }