【授業メモ】レスポンシブデザイン

レスポンシブデザイン

フルードグリッドでのレスポンシブデザイン

カラムのレスポンシブは、ブレイクポイントごとの幅に合わせてカラムの並び方を変えるやりかた

フルードグリッドは、レスポンシブにしても元のデザインのまま小さくするやりかた

★「高さ÷親要素の横幅」の％をpadding-bottomにいれ、paddingはゼロにすることで高さを可変にする

<!DOCTYPE HTML> 
<html lang="ja"> 
<head> 
<meta charset="utf-8"> 
<title>フルードグリッドのレスポンシブ</title> 
<meta name="viewport" content="width=device-width"> 
<style> 
html,body,div,ul,li { 
  margin: 0; 
  padding: 0; 
} 
ul { 
  list-style: none; 
} 
 
body{ 
  background: pink; 
} 
ul { 
  width: 960px; 
  padding:10px; 
  height: 340px; 
  overflow: hidden; 
  box-sizing: border-box; 
  margin: 50px auto; 
  background: white; 
} 
li { 
  width: 33.33%; 
  height: 0; 
  padding-bottom: 33.33%; 　
★指定したい固定値の高さ320÷親要素の横幅960　heightは0にする
  float: left; 
  background: orange; 
} 
li:nth-child(2) { 
  background: yellow; 
} 
</style> 
</head> 
 
<body> 
<ul> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</body> 
</html>
 

★固定値の場合、calcを使えば複雑なサイズ指定も可能　

　calcは四則演算なので、ー＋の両側は必ずスペース！calcと()の間はスペース禁止！

　calc(〇% - △px)

ul { 
  width: 980px; 
  padding: 5px; 
  overflow: hidden; 
  box-sizing: border-box; 
  margin: 50px auto; 
  background: white; 
} 
li { 
  width: calc(33.33% - 10px); 
  height: 0; 
  padding-bottom:calc(33.33% - 10px); 
  float: left; 
  background: orange; 
  margin: 5px; 
}
 