Chapter03 HTMLの作成とベースのCSS

概要と目標 HTML部分を完成させ、
ベースのCSSを定義する

スマホサイトに必要な viewportメタタグやpicture要素を使って、
HTML部分を完成させましょう。
その後、CSSファイルを作成し、ブラウザのCSSをリセット、
デフォルトスタイルを定義しましょう。

今回のゴール

RERUN

新しいウインドウで表示する

完成イメージ架空のPhotoギャラリーを、
レスポンシブで。

スマートフォン、タブレット、PCの3デバイスに対応した、
架空のPhotoギャラリーサイトを制作しましょう。
対応ブラウザは、 IE9 〜。その他のブラウザは最新版のみとする。

完成イメージ
完成イメージ
完成例

RERUN

新しいウインドウで表示する

viewportメタタグまずは、画面の表示領域を設定。

一般的なスマートフォンは、デフォルトの状態だと
横幅980pxのWebページを、 横幅ぴったりに縮小して表示する。
viewportメタタグを使って、表示領域を変更する。

viewportメタタグを記述しよう

  1. 「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
  2. head要素内に、モバイル端末の画面サイズに合わせる、viewportメタタグを記述。
    （初期の拡大倍率も 1 に設定）
dummy-photo-gallery/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dummy Photo Gallery - 架空の写真ギャラリー</title>
</head>

答えを見る

  1. 上書き保存
  2. ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセス
ブラウザでの表示例

RERUN

新しいウインドウで表示する

メインビジュアル スマホ、タブレット、PC
全て違う画像に切り替える。

メインビジュアルは、各デバイスで違う比率の画像にしたい。
picture要素やsource要素を活用して、画像を切り替える。
また高解像度ディスプレイへの対応として、 srcset属性で、
2倍の大きさの画像もセットする。

メインビジュアルに使う画像
メインビジュアル

メインビジュアルを配置しよう

  1. 「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
  2. 文字列「The Picture Taken By Me is Beautiful」の上に、
    picture要素、source要素を活用してメインビジュアルを配置
    （上の「メインビジュアルに使う画像」を参考）
dummy-photo-gallery/index.html
<main role="main">
  <picture>
    <source srcset="images/hero-top-sp.jpg 1x, images/hero-top-sp@2x.jpg 2x" media="(max-width: 767px)">
    <source srcset="images/hero-top-tab.jpg 1x, images/hero-top-tab@2x.jpg 2x" media="(max-width: 1023px)">
    <img src="images/hero-top-pc.jpg" srcset="images/hero-top-pc.jpg 1x, images/hero-top-pc@2x.jpg 2x" alt="川の横で夕日を見ながら寄り添う男女">
  </picture>
  <p>The Picture Taken By Me is <em>Beautiful</em></p>

答えを見る

  1. 上書き保存
  2. ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
    ウインドウサイズに応じて画像が変更されるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

ブラウザのCSSをリセットブラウザが持っている
スタイルをリセット。

ブラウザが持っているデフォルのスタイル

ブラウザのCSSをリセットしてみよう

  1. 「dummy-photo-gallery」フォルダ内に「css」フォルダを作成
  2. 「css」フォルダ内に「common.css」ファイルを作成
  3. 「dummy-photo-gallery」フォルダ内の「index.html」をテキストエディタで開く
  4. 「index.html」のtitle要素の下で「common.css」をリンクする
dummy-photo-gallery/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dummy Photo Gallery - 架空の写真ギャラリー</title>
  <link rel="stylesheet" href="css/common.css">
</head>

答えを見る

  1. 上書き保存
  2. 「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
  3. 以下のCSSをコピー&ペーストして、ブラウザのスタイルをリセットする。
dummy-photo-gallery/css/common.css
@charset "UTF-8";

/*
Base
-----------------------------------------------------*/

/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
  1. 上書き保存
  2. ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
    リセットされているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

サイトのデフォルトスタイル 要素セレクタを使って、
サイトのデフォルトCSSを設定

文字サイズや、文字の色、書体、背景色など、サイトのベースとなるCSSを
詳細度の低い要素セレクタで指定する

デフォルトスタイルを設定しよう

今回は以下のデフォルトスタイルを定義する。

セレクタ プロパティ 値
html ボックスサイズの算出 ボーダー領域まで
ボックスの高さ 100%
文字のサイズ medium
書体 '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic',
'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
'Meiryo UI', 'メイリオ', Meiryo, sans-serif
行間 1.5
html要素の
全ての子要素と
その before、after		 ボックスサイズの算出 継承
body ボックスの高さ 100%
文字の色 #263238
img ボックスの最大幅 100%
ボックスの高さ 自動
縦方向の位置揃え 下
lang属性の
属性値が"en"の
全ての要素		 大文字／小文字の表記 全て大文字
  1. 「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
  2. リセットの下にデフォルトスタイルを追記する
dummy-photo-gallery/css/common.css
/* Default Style */
html {
  box-sizing: border-box;
  height: 100%;
  font: medium/1.5 '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, sans-serif;
}

html *,
html *:before,
html *:after {
  box-sizing: inherit;
}

body {
  height: 100%;
  color: #263238;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

*[lang='en'] {
  text-transform: uppercase;
}

答えを見る

  1. 上書き保存
  2. ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
    デフォルトスタイルを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

Webフォントの利用Open Sans Condensed
を使ってみる。

今回は、英文の箇所にGoogle FontsのOpen Sans Condensedを使ってみる。

デフォルトスタイルを設定しよう

HTMLファイルに以下のlink要素を追加

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">

CSSファイルに以下のプロパティと値を追加

font-family: 'Open Sans Condensed', sans-serif;
  1. 「dummy-photo-gallery」フォルダ内の「index.html」を開く
  2. head要素内に、Webフォント用のlink要素をコピー
dummy-photo-gallery/index.html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dummy Photo Gallery - 架空の写真ギャラリー</title>
  <link rel="stylesheet" href="css/common.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
</head>
  1. 上書き保存
  2. 「dummy-photo-gallery」› 「css」フォルダ内の「common.css」を開く
  3. Webフォント用のfont-familyを*[lang='en']の宣言ブロック内にコピー
dummy-photo-gallery/css/common.css
*[lang='en'] {
  text-transform: uppercase;
  font-family: 'Open Sans Condensed', sans-serif;
}
  1. 上書き保存
  2. ブラウザで「dummy-photo-gallery」フォルダ内の「index.html」にアクセスし、
    英語のフォントが変わっているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する