【CSS】 CSSの演習 - PCゲーマーのWebデザイン備忘録

CSSにも慣れてきたので、CSSを使った簡単なレイアウトを書いていきます。

01

f:id:game-web-design:20140919181931p:plain

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>01</title>
<style>
body{
  font-family:
  "HIragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}

h1{
  color: #108889;
 }

h2{
  background: #355584;
  color: #fff;
  padding: 5px 0 5px 0;
  line-height: 1.0;
}

p{
  color: #0007A7;
}

</style>
</head>

<body>
<h1>style要素</h1>
<h2>style element</h2>
<p>HTML文書内にまとめて設定します。</p>

</body>
</html>

02

f:id:game-web-design:20140919182213p:plain

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>02</title>
<style>
body{
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sens-serif;
  background: #91BC86;
  color: #fff;
}

h1{
  color:#FFFDFF;
}

h2{
  background:#BC908F;
  padding:3px 0 2px 5px;
}

p{
  background:#F5F5DB;
  color:#333;
  padding: 1.0em;
}

</style>

</head>

<body>

<h1>About wine</h1>
<h2>Chianti Classico Riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p>

</body>
</html>

03

f:id:game-web-design:20140919182529p:plain

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>03</title>
<style>
body{
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sens-serif;
}

h2{
  background: #006AB8;
  color: #fff;
  margin: 0;
  padding: 16px;
}

p{
  background: #BAD4EB;
  color: #000;
  margin :0;
  padding: 16px;
}

</style>

</head>

<body>

<h2>background-colorの設定</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>

</body>
</html>