読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

placehold.it を使ったレスポンシブレイアウトの演習

yachin29.hatenablog.com


「placehold.it」は可変にも対応しているので、レスポンシブレイアウトの演習にも非常に便利です。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>レスポンシブ演習</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,ul,li {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
img {
  border:0;
  vertical-align:bottom;
}

body {
  padding-top:5px;
}
ul {
  width:950px;
  overflow:hidden;
  margin:0 auto;
}
li {
  width:180px;
  height:180px;
  float:left;
  margin:5px;
}
li.size_2x2 {
  width:370px;
  height:370px;
}
li.size_2x1 {
  width:370px;
  height:180px;
}
li.sp_on {
  display:none;
}
@media screen and (max-width:949px) {
 body {
  padding-top:0.5%;
}
ul {
  width:100%;/*950pxが100%*/
  margin:0 auto;

}
li {
  width:19%;
  height:19%;
  float:left;
  margin:0.5%;/*5÷950=0.5%*/
}
li.size_2x2 {
  width:39%;
  height:39%;
}
li.size_2x1 {
  width:39%;
  height:19%;
}
img {
  max-width:100%;
}
}
@media screen and (max-width:640px) {
ul {
  width:100%;/*950pxが100%*/
  margin:0 auto;
  padding-top:0.5%;
}
li {
  width:49%;
  height:49%;
  float:left;
  margin:0.5%;/*5÷950=0.5%*/
}
li.size_2x2 {
  width:99%;
  height:99%;
}
li.size_2x1 {
  width:99%;
  height:49%;
}
img {
  width:100%;
}
li.sp_on {
  display:block;
}
}
</style>
</head>

<body>
<ul>
<li class="size_2x2"><img src="http://placehold.it/370x370"></li>
<li class="size_2x1"><img src="http://placehold.it/370x180"></li>
<li><img src="http://placehold.it/180x180"></li>
<li class="odd"><img src="http://placehold.it/180x180"></li>
<li class="size_2x1"><img src="http://placehold.it/370x180"></li>
</ul>
<ul>
<li><img src="http://placehold.it/180x180"></li>
<li><img src="http://placehold.it/180x180"></li>
<li><img src="http://placehold.it/180x180"></li>
<li><img src="http://placehold.it/180x180"></li>
<li><img src="http://placehold.it/180x180"></li>
<li class="sp_on"><img src="http://placehold.it/180x180/FF0000"></li>
</ul>
</body>
</html>