CSSでレイアウト - 基本

HTMLの基本構造

  • 理屈抜きに入力する必要があります
  • できなければ、できるまで入力練習をしましょう
  • パソコンに向かってできなければ、メモ書きで良いので、見本を見ないでも書けるまで練習しましょう
  • それでも自信がない場合は、10回書いたメモを講師に毎日見せましょう（見本を見ないでも書けるようになるまで）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webページを表示するための基本構造</title>
</head>
<body>

</body>
</html>
コンテンツ内容の入力
  • h1は、ページテーマの最優先見出し
  • pは、テーマの内容
  • 練習としては、「自分の好きな〇〇」を入力すること
  • 「自分の好きな食べ物」「自分の好きな音楽」「自分の好きな映画」「自分の好きなスポーツ」「自分の好きなゲーム」など
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webページを表示するための基本構造</title>
</head>
<body>
<h1>ブレンドコーヒー</h1>
<p>ブレンドコーヒーは味や香り等のバランスを良くする為に数種類のコーヒー豆を混合し抽出したコーヒーで、一種類の焙煎豆からなるコーヒーの事をストレートコーヒーと言います。</p>
</body>
</html>

画像挿入

  • テーマの内容をより理解したもらうために、視覚的にわかりやすい画像を挿入します
  • 画像は、imgフォルダー内にあることを前提に記述します
  • 画像は、段落中の１文字と同じ扱いをするため、p要素で囲みます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webページを表示するための基本構造</title>
</head>
<body>
<h1>ブレンドコーヒー</h1>
<p>ブレンドコーヒーは味や香り等のバランスを良くする為に数種類のコーヒー豆を混合し抽出したコーヒーで、一種類の焙煎豆からなるコーヒーの事をストレートコーヒーと言います。</p>
<p><img src="img/coffee.jpg" alt="ブレンドコーヒー"></p>
</body>
</html>


文字の改行は、ブラウザ幅に応じて自動的に改行されます。

f:id:web-css-design:20160828221411p:plain


この時の文字の大きさは、ブラウザが初期値として決めている（ブラウザのCSS）文字の大きさで表示されます。

レイアウトの設計

  • どんな見栄えにすれば良いか決めます
  • これを決めることができなければ、CSSで何を記述すれば良いかイメージできません
  • CSSを苦手と感じる人は、このどんなイメージのページにするかという「イメージの練習」をたくさん重ねる必要があります
文字でイメージを書いてみる
  • 文字の大きさは、このまま使う
  • コーヒーを連想できる色を設定する
  • 見出しと写真は中央に揃える
  • より見やすく、内容全体を幅指定をしてブラウザの中央に表示する
内容全体のグループ化
  • CSSを設計しやすいようにグループ化しておく
  • div要素を使い、class名でグループ名を記述する（idを使うか、classを使うか迷ったらclassを使います）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webページを表示するための基本構造</title>
</head>
<body>
<div class="container">
<h1>ブレンドコーヒー</h1>
<p>ブレンドコーヒーは味や香り等のバランスを良くする為に数種類のコーヒー豆を混合し抽出したコーヒーで、一種類の焙煎豆からなるコーヒーの事をストレートコーヒーと言います。</p>
<p><img src="img/coffee.jpg" alt="ブレンドコーヒー"></p>
</div><!-- /.container -->
</body>
</html>

CSSを記述

  • 最初の内容を確認するのみなので、HTML内に記述します（エンベッド）
  • </head>の直前に、style要素を記述します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webページを表示するための基本構造</title>
<style>

</style>
</head>
<body>
<div class="container">
<h1>ブレンドコーヒー</h1>
<p>ブレンドコーヒーは味や香り等のバランスを良くする為に数種類のコーヒー豆を混合し抽出したコーヒーで、一種類の焙煎豆からなるコーヒーの事をストレートコーヒーと言います。</p>
<p><img src="img/coffee.jpg" alt="ブレンドコーヒー"></p>
</div><!-- /.container -->
</body>
</html>
CSSをリセット
  • 特に少ない記述の場合は、自分が記述した要素のみをリセットします
  • CSSリセットは、ブラウザの初期値をなくして、自分独自の値を設定するために必要です
html, body, h1, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

CSSリセットに記述するべきこと

  • 要素間の空きをなしにする
  • 文字が持っているプロパティーで、スペースが空いているように見えるもをなしにする
  • すべてのデバイスで、文字が綺麗に見えるような文字指定をする

この時点では、ここまで。


f:id:web-css-design:20160828224919p:plain

ブラウザ全体の背景色を設定
  • ブラウザ全体の背景色を変更するためには、body要素の背景色を変更します
body {
  background-color: #6E4418;
}


f:id:web-css-design:20160828230526p:plain


この状態では、文字が読みにくいことがわかります。
ここで、２つの選択肢があります。

  1. 文字を白にする
  2. グループ化した.containerブロックの背景色を白にする

ここでは、２番目の記述をしてみます。

コンテントブロックの背景色を設定する
.container {
  background-color: #FFF;
}


f:id:web-css-design:20160828231252p:plain


文字は読めるようになりましたが、なんだか窮屈です。
リセットした空きをそれぞれに記述してみます。

空きを設定してレイアウト
  • まず、コンテントブロックの設定をします
  • レイアウトの設定をする場合は、body要素内の大きいブロックから設定をします
  • 幅を、80%にします（もちろん、px単位でも問題ありません）
  • 残りの、20%を自動的に半分にした値を表示するように設定します
.container {
  background-color: #FFF;
  width: 80%;
  margin: 0 auto;
}


f:id:web-css-design:20160828232521p:plain

コンテントブロック内の設定

  • 文字を中央揃えに設定する
.container {
  background-color: #FFF;
  width: 80%;
  margin: 0 auto;
  text-align: center;
}


f:id:web-css-design:20160828233348p:plain

  • 本文にclass名「section」をつけて左揃えにする
.container>p.section {
  text-align: left;
}


f:id:web-css-design:20160828234247p:plain


画像の下の空きを除く

  • それほど影響はありませんが、このままの設定では常に画像の下が見栄えのように空きます
  • 画像が１文字と同じ扱いをされることから、文字の「ディセンダー」の部分が表示に影響します
  • リセットの下にに以下の記述を追加します
img {
  vertical-align: bottom;
}


f:id:web-css-design:20160828235757p:plain

コンテントブロック内の空きを設定
  • 読みやすいように余白を設定します
  • 余白paddingは、幅に影響が出るため影響が出ない設定も記述します
  • box-sizing: border-box;を記述するとpaddingの値は、width内で表示されます
.container {
  background-color: #FFF;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}


f:id:web-css-design:20160828235848p:plain

各要素の空きを整える
  • h1とpとimgの空きを整える
.container>h1 {
  margin-bottom: 20px;
}
.container>p.section {
  text-align: left;
  margin-bottom: 20px;
}


f:id:web-css-design:20160829001354p:plain

見出しと本文の設定
  • h1要素の文字色を変更する
  • p要素の line-height を変更して読みやすくする
.container>h1 {
  margin-bottom: 20px;
  color: #6E4418;
}
.container>p.section {
  text-align: left;
  margin-bottom: 20px;
  line-height: 1.5;
}


f:id:web-css-design:20160829001944p:plain


《完成例》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webページを表示するための基本構造</title>
<style>
html, body, h1, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
img {
  vertical-align: bottom;
}
body {
  background-color: #6E4418;
}
.container {
  background-color: #FFF;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}
.container>h1 {
  margin-bottom: 20px;
  color: #6E4418;
}
.container>p.section {
  text-align: left;
  margin-bottom: 20px;
  line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<h1>ブレンドコーヒー</h1>
<p class="section">ブレンドコーヒーは味や香り等のバランスを良くする為に数種類のコーヒー豆を混合し抽出したコーヒーで、一種類の焙煎豆からなるコーヒーの事をストレートコーヒーと言います。</p>
<p><img src="img/coffee.jpg" alt="ブレンドコーヒー"></p>
</div><!-- /.container -->
</body>
</html>

CSSでレイアウトするということ

  • 少しでもより良く見せるための工夫をすること