WEB、始めました

半年間WEB制作の学校に通います。その記録。

43日目 jQuery プラグイン-lightbox-  メディアクエリ  css3

CSS3
transform
transition

f:id:chawannmusi:20160405160722p:plain
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している間だけ動く





lightbox

f:id:chawannmusi:20160405154238p:plain

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で画像に説明文を加えています。

css

@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>


css

@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>

css

@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;
}
}