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

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

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

画像の可変方法

レスポンシブデザイン

画像をレスポンシブに対応(可変)にするには2つの方法があります。
img要素の場合はフルードイメージ化(max-width:100%)
background画像の場合はbackground-sizeを指定します。

この2つの方法をしっかりと覚えていれば、画像をレスポンシブに対応(可変)させる事が出来るのでしっかりと覚えましょう。

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

html,body,p {
  margin:0;
  padding:0;
}
img {
  vertical-align:bottom;
}

body {
  background:#666666;
}
#container {
  width:1000px;
  margin:0 auto;
}
header {
  width:1000px;
  height:350px;
  background:url(img/header.png) no-repeat;
}
#content {
  width:1000px;
  background:#FFF;
  overflow:hidden;
}
p {
  width:480px;
  float:left;
  margin:10px;
}
@media screen and (max-width:999px) {
#container {
  width:100%;
}
header {
  width:100%;
  height:0;
  padding-bottom:35%;
  background:url(img/header.png) no-repeat left top/cover;
}
#content {
  width:100%;
}
p {
  width:48%;
  margin:1%;
}
img {
  max-width:100%;/*フルードイメージ*/
}
}
@media screen and (max-width:500px){
p {
  width:98%;
  float:none;
}
}
広告を非表示にする