CSSでレイアウト - 演習

CSSでレイアウト

  • CSSでレイアウト - 基本」を踏まえて設定する
  • 最低限の記述に徹する

web-design.hatenadiary.jp

ボックスモデル
  • CSSでレイアウト - 基本」で設定したように、ボックスモデルというより「どう見せたいか」を意識して設定します
  • 結局のところ、ボックスモデルは「空きの設定」に過ぎません
  • どう見せたいかがイメージしていなければ、その値を設定することはできません

例題テキスト

宮沢賢治作品
いてふの実
そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。
文書構造の記述
  • 背景画像を設定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>いてふの実 | 宮沢賢治作品</title>
</head>
<body>
<div class="container">
<h1>宮沢賢治作品</h1>
<h2>いてふの実</h2>
<p>そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。<br>
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。<br>
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。<br>
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。<br>
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。</p>
</div><!-- /.container -->
</body>
</html>

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

例題A

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

html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  background-color: #FFF;
}
.container {
  width: 80%;
  margin: 20px auto;
}
.container>h1 {
  margin-bottom: 20px;
}
.container>h2 {
  padding: 10px 1.0em 8px 1.0em;
  background-color: #5DB254;
  color: #FFF;
}
.container>p {
  padding: 20px;
  box-sizing: border-box;
  line-height: 1.5;
  border: 1px solid #5DB254;
}
例題B


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

html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  background-color: #FFF;
}
.container {
  width: 80%;
  margin: 20px auto;
}
.container>h1, .container>h2 {
  margin-bottom: 20px;
}
.container>h2 {
  padding-bottom: 45px;
  background: url(img/01.jpg) no-repeat center bottom;
  text-align: center;
}
.container>p {
  line-height: 1.5;
}
例題C


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

html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  background-color: #FFF;
}
.container {
  width: 80%;
  margin: 20px auto;
}
.container>h1, .container>h2 {
  margin-bottom: 20px;
}
.container>h2 {
  line-height: 40px;
  background: url(img/02.jpg) no-repeat center top;
  text-align: center;
}
.container>p {
  line-height: 1.5;
}