46日目、VW で画面のサイズでフォントや画像のサイズを変える

46日目。Javascriptで配列を作ってまとめて更新、メンテしやすくなりました。

続きです。

画面のサイズで横幅を変える

画面の横幅を基準にする「vw」で画像やフォントの大きさを設定してみました。
ブラウザを伸ばしたり縮めたりすると図と文字がのびたり縮んだりします。おもしろーい！

CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分

test.css

.main {
  width:100vw;
  padding: 1em;
  }

.contents { 
  width: 100vw;
  height:15vw;
  }

.contents img {
  width:12vw;
  height:12vw;
  margin:0em 1vw;
}

.left { 
  float:left;
  margin-right:1vw; 
}

.center{
  float:left;
  width:70vw;
  height:12vw;
  background-size:cover;
  background-image: url(cat.png);
}

.right {
  float:right;
  }

リストの先頭文字をなしに。

test.css

li {
  list-style: none;
  color:white;
  }

フォントは明朝体にしたい。

どの環境でも綺麗なゴシック体、明朝体のフォントを指定する

test.css

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;   

要素のセルいっぱいに背景画像を表示したい。その上に文字を表示したい。

トップページ  > CSS3  > background-size

.center{
  float:left;
  width:70vw;
  height:12vw;
  background-size:cover;
  background-image: url(cat.png);
}

ProgateのHTML & CSS 初級編

復習しながらCSSを組み立てました。
学習コース HTML & CSS 初級編

完成！

HTML & CSS 初級編とVWだけでできています。
拡大縮小するとずれまくるし、画像は飛んでいくしなかなか大変でした。

所要時間　５時間

・HTML & CSS 初級編 １時間
・CSS組み立て
　１回目、pxで１時間
　２回目、vwで１時間
　３回目、画面を細長くしたときに要素が崩れるので組み直し　２時間

ここまで１１時間。
かかってるなー！！！