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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

9月30日復習課題回答例と解説

復習課題

  • 昨日の復習を課題としてまとめる
  • PC用CSSを設定
  • モバイル用CSSを設定
HTMLの記述
  • h1のみ記述
<body>
<h1>テーマタイトル</h1>
</body>
リセットCSS
  • 常にbody内で使用している要素に対して設定する
  • 先祖要素である「html」も含めて記述する
  • line-heightとfont-familyを同時に記述することで、文字のリセットを最適化する
/* reset
-----------------------------------------------------*/
html, body, h1 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
font-size
  • font-sizeは、基準となる大きさを決めておく(実際には、その後上書きして別の大きさにする場合でも、基準にしたサイズは記述しておく)
  • 今回は、使用している要素が2つのみ
/* font-size
-----------------------------------------------------*/
body { font-size: 16px; }
h1 { font-size: 32px; }
h1
  • 幅/高さを指定して、背景画像を読み込む
/* h1
-----------------------------------------------------*/
h1 {
  width: 800px;
  height: 300px;
  background: #FFF url(img/h1_bg.png) no-repeat;
}
モバイル用の記述
  • viewportを記述する
<meta name="viewport" content="width=device-width">


メディアクエリを記述

  • @mediaで、CSSが切り替わるブレイクポイントを設定する
  • 幅が640px以下であることを感知したら、CSSをモバイル用に切り替える
  • メディアクエリで指定しない設定は、PC用の値が継承される(リセットCSSなど)
@media screen and (max-width:640px) {

}
モバイル用font-size
  • 単位は「rem(root+em)」
  • 先祖要素htmlは必ず記述する
  • 62.5%の意味は、ブラウザの基準font-sizeが、16pxであることから「 16px × 0.625 = 10px」とし、10pxを1.0remと記述することにより、他のサイズも記述しやすくする
  • 各サイズは、モバイルの見栄えを想定し適宜設定する
  /* font-size
  -----------------------------------------------------*/
  html { font-size: 62.5%; }
  body { font-size: 1.2rem; }
  h1 { font-size: 2.0rem; }
背景画像を最適化
  • 幅の可変に対応させるため「width: 100%;」を記述する
  • 背景画像も幅の可変に対応させるため「background-size: 100%;」を記述する
  /* h1
  -----------------------------------------------------*/
  h1 {
    width: 100%;
    background-size: 100%;
    text-align: center;
    }

《記述例》

  • 今回は、h1の文字指定はサイズ以外は割愛
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブWebデザイン基礎 - 背景画像を最適化</title>
<meta name="viewport" content="width=device-width">
<style>
/* reset
-----------------------------------------------------*/
html, body, h1 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* font-size
-----------------------------------------------------*/
body { font-size: 16px; }
h1 { font-size: 32px; }

/* h1
-----------------------------------------------------*/
h1 {
  width: 800px;
  height: 300px;
  background: #FFF url(img/h1_bg.png) no-repeat;
}

@media screen and (max-width:640px) {
  /* font-size
  -----------------------------------------------------*/
  html { font-size: 62.5% }
  body { font-size: 1.2rem; }
  h1 { font-size: 2.0rem; }

  /* h1
  -----------------------------------------------------*/
  h1 {
    width: 100%;
    background-size: 100%;
    text-align: center;
    }
}
</style>
</head>
<body>
<h1>テーマタイトル</h1>
</body>
</html>

縦ナビゲーション - テキストリンク

  • テキストリンクのhover時の設定
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>縦ナビゲーション</title>
<style>
/* reset
-----------------------------------------------------*/
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }
a { text-decoration: none; }

/* body
-----------------------------------------------------*/
body {
  background: #FFF;
  font-size: 16px;
}

/* nav
-----------------------------------------------------*/
ul.nav {
  width: 100px;
  margin: 50px auto;
}
li {
  margin-bottom: 20px;
  font-weight: bold;
}
li a {
  color: royalblue;
}
li a:hover {
  color: coral;
  text-decoration: underline;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">新着情報</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">店舗案内</a></li>
<li><a href="#">会社案内</a></li>
</ul>
</body>
</html>

縦ナビゲーション - ボタンの面を設定

  • 初期の値を設定し、後に続く記述で上書きし、初期値が活かすことができる部分は継承し、変更して上書きしたい部分のみを記述する
  • id名は、ユニークな値を上書きするためのセレクタ指定のために記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>縦ナビゲーション</title>
<style>
/* reset
-----------------------------------------------------*/
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }
a { text-decoration: none; }

/* body
-----------------------------------------------------*/
body {
  background: #FFF;
  font-size: 16px;
}

/* nav
-----------------------------------------------------*/
ul.nav {
  width: 100px;
  margin: 50px auto;
}
li {
  width: 100px;
  height: 70px;
}
li a {
  display: block;
  background-color: red;
  border: 2px solid black;
  color: white;
  font-weight: bold;
  line-height: 66px;
  text-align: center;
}
li#new a {
  background-color: red;
  border-color: red;
}
li#info a {
  background-color: orange;
  border-color: orange;
}
li#item a {
  background-color: yellowgreen;
  border-color: yellowgreen;
}
li#shop a {
  background-color: green;
  border-color: green;
}
li#company a {
  background-color: skyblue;
  border-color: skyblue;
}
li#new a:hover {
  background-color: white;
  color: red;
}
li#info a:hover {
  background-color: white;
  color: orange;
}
li#item a:hover {
  background-color: white;
  color: yellowgreen;
}
li#shop a:hover {
  background-color: white;
  color: green;
}
li#company a:hover {
  background-color: white;
  color: skyblue;
}
</style>
</head>
<body>
<ul class="nav">
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>
</body>
</html>