CSS基礎演習（１）

css

（問）下記の画像を使って以下のように記述しなさい。値は適宜で良い。

 

f:id:fujiwarashinichi:20140301233755j:plain

01.jpg

f:id:fujiwarashinichi:20140316020624p:plain

着眼

  • ｈ１、ｈ２，ｐで骨格ができそう・・
    宮沢賢治作品→ｈ１
    いてふの実→ｈ２
    画像→ｐにしようか・・
  • 画像はｉｍｇ挿入ではなく、飾りだからバックグランドイメージだな・・
  • CSSリセットするので全体をｄｉｖで包むか・・上と左にマージンを取りたいし、ｐの幅とｈ１、ｈ２，画像の幅も合わせないといけないからね。
  • 問題は「いてふの実」と画像の配置をどう処理するか・・。

 

ｈｔｍｌ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>いてふの実</title>
<link rel="stylesheet" href="css/style_01">
</head>
<body>
<div id="container">
<h1>宮沢賢治作品</h1>
<h2>いてふの実</h2>
<p>
そらのてっぺん・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・<br>・・・・・・・・
・・・・・・・・・・・・<br>・・・・・・・・・
二羽の鶏もさう云いました。
</p>
</div><!--/#container-->
</body>
</html>

ｃｓｓ

html, body, div, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  font-size: 16px;
}
#container {
  width: 530px;
  margin: 50px 0 0 50px;
}
h1 {
  margin-bottom: 20px;
}
h2 {
  margin-bottom: 20px;
  padding-bottom: 43px;
  background: url(img/01.jpg) no-repeat left bottom;
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    serif;
  font-weight: bold;
  text-align: center;
}
p {
  line-height: 1.6;
}

 

ｂｒｏｗｓｅｒ

f:id:fujiwarashinichi:20140225224046j:plain

ｐｉｃｋ　ｕｐ

ｈ２ブロックボックスで「コンテント＝いてふの実」を上側に、画像を下側に配置したいので

  1. 画像をｂｏｔｔｏｍに配置し
  2. ｐａｄｄｉｎｇーｂｏｔｔｏｍで調整