RWDサイト｜ギャラリー部分

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RWDサイト｜ギャラリー部分</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/1130.css">
</head>

<body>
<div id="content">
<div class="inner">
<ul>
<li id="photo1" class="size-2x2"><a href="#"><img src="img/01.png"></a></li>
<li id="photo1-2" class="size-2x1"><a href="#"><img src="img/01-2.png"></a></li>
<li id="photo2" class="size-2x1"><a href="#"><img src="img/02.png"></a></li>
<li id="photo3" class="size-1x1"><a href="#"><img src="img/03.png"></a></li>
<li id="photo4" class="size-1x1"><a href="#"><img src="img/04.png"></a></li>
<li id="photo5" class="size-2x1"><a href="#"><img src="img/05.png"></a></li>
<li id="photo6" class="size-1x1"><a href="#"><img src="img/06.png"></a></li>
<li id="photo7" class="size-1x1"><a href="#"><img src="img/07.png"></a></li>
<li id="photo8" class="size-2x1"><a href="#"><img src="img/08.png"></a></li>
<li id="photo9" class="size-1x1"><a href="#"><img src="img/09.png"></a></li>
<li id="photo10" class="size-1x1"><a href="#"><img src="img/10.png"></a></li>
</ul>
</div>
</div>

</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
  color: #222;
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*レイアウト*/

body {
    background: #222;

}

#content ul {
  width: 970px;
  margin: 0 auto;
  background: #FFF;
  overflow: hidden;
  padding: 5px;
}
#content li {
  float: left;
  margin: 5px;
}
li#photo1-2, li#photo10 {
  display: none;
}


/*タブレット用記述*/
@media screen and (max-width:979px){
  
img {
  max-width: 100%; /*フルードイメージ*/
}
/*ギャラリー部分*/

#content ul {
  width: 98.98%;/* 970px÷980px*/
  padding:0.51%; /*5px÷980px*/
}
#content li {
  margin:0.51%; /*5px÷980px*/
}
.size-1x1 {width:18.775%; height: auto;} /*184÷980*/
.size-2x1 {width:38.57%; height: auto;}
.size-2x2 {width:38.57%; height: auto;} /*378÷980*/
li#photo1{
  width: 38.36%;
}
li#photo4{
  width: 18.77%;
}
}


/*スマートフォンサイト*/
@media screen and (max-width:767px){

#content li {
  margin:0;
  width:100%;
  padding: 3px;
  box-sizing: border-box;
}
#content li img {
  width: 100%;
}
li.size-1x1 {max-width:50%; height: auto;} 
li.size-2x1 {max-width:100%; height: auto;}
li.size-2x2 {max-width:100%; height: auto;}
li#photo1{
  width: 100%;
}
li#photo4{
  width: 50%;
}

li#photo1{
  display: none;
}
li#photo1-2 {
  display: block;
}
li#photo10 {
  display: block;
}

}

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

RWDサイト｜ギャラリー部分