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

共通部分を先に作る

仕上がりイメージを作る

ラフまたはワイヤーフレームを作る。

  • ヘッダー
  • グローバルナビゲーション
  • メインビジュアル
  • メインエリア
  • サイドバー
  • フッター

共通部分を先に作る

  • サイトの完成イメージをもとに共通部分を先に作る
  • デザイン・レイアウトのためにdiv要素にid名・class名をつけ役割を明確にする
<header>
<nav id="global_navi">
</nav>
</header><!-- /header -->

<div id="wrapper">
<div id="main">
</div><!-- /#main -->
<aside id="sidebar">
</aside><!-- /aside -->
</div><!-- /#wrapper -->

<footer>
</footer><!-- /footer -->

Webサイト制作

  • Webサイト制作用のフォルダー「bloom」を作成する
  • 「img」フォルダーに画像を用意しておく
  • 「base.html」を作成し保存する
  • 外部CSSファイルを作成し読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フラワーアレンジメント教室 Bloom</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
骨格のための要素を追加
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フラワーアレンジメント教室 Bloom</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<nav id="global_navi">
</nav>
</header><!-- /header -->

<div id="wrapper">
<div id="main">
</div><!-- /#main -->
<aside id="sidebar">
</aside><!-- /aside -->
</div><!-- /#wrapper -->

<footer>
</footer><!-- /footer -->

</body>
</html>

Webページで使われる単位

px
ピクセル
ディスプレイの表示単位のpxを使って設定する単位
em
ピクセル
1文字分の高さを1emとして設定する単位
(アルファベッドの大文字 M が文字のスペースになっている)
rem
ピクセル
「root」+「em」という意味で、root要素(html要素)
に対して相対的にフォントサイズを指定する単位
%
ピクセル
基準になる数値に対して何%で表示するかを指定する相対単位
数字が
「0」のとき
単位は、記述しない

※幅の固定には「px」、幅の可変には「%」、文字サイズには「em」と決めておくと迷わずに指定できます。
※レスポンシブWebデザインで使用する「Media Query」の記述では「px」を使用しません。

CSSの基本設定

@charset "UTF-8";

/* reset
-------------------------------------------------------*/
html, body, h1, h2, h3, h4, p, ul, lol, li, dl, dt,  dd {
  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; }
img { vertical-align: bottom; border: none; }

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
  display:block;
}

/* font-size
-------------------------------------------------------*/
html { font-size: 100%; }
body { font-size:62.5%; } /* =10px */
h1 { font-size: 3.2em; } /* =32px */
p  { font-size: 1.6em; } /* =16px */
li { font-size: 1.4em; } /* =14px? */
/* 上記以外に複利計算の起こる要素には、常に1.0emを宣言し続けます */