8/28｜CSSページ作成,レイアウト

/ 28

- ページ制作

f:id:tk3m:20140901235454p:plain 　margin,padding,borderの活用

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<style>
html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
body {
  color; #333;
  font-size: 16px;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
#content {
  width: 550px;
  margin: 50px auto;
}
h1 {
margin-bottom: 20px;
}
h2 {
  color: #FFF;
  background: #5DB254;
  padding: 10px 0 8px 20px;
  border: #5DB254 solid 1px;
}

p {
  padding:20px;
  line-height: 1.5;
  border: #5DB254 solid 1px;
}

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

</body>
</html>

—

- ページ制作

f:id:tk3m:20140901235505p:plain

margin, paddingの活用

背景画像の記述

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<style>
html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
body {
  color; #333;
  font-size: 16px;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
#content {
  width: 550px;
  margin: 50px auto;
}
h1 {
  margin-bottom: 20px;
}
h2 {
  text-align:center;
  background: url(img/01.jpg) no-repeat center bottom;
  padding-bottom: 40px;
}

p {
  padding:16px;
  line-height: 1.5;
}

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

—

- 2カラムサイト

f:id:tk3m:20140901235907p:plain 　　#wrapper　←　レイアウトの固定

　　float: left;　←　レイアウト位置の指定

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<style>
html, body, div {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
#container {
  width: 760px;
  margin: 50px auto;
}
#header {
  height: 50px;
  margin-bottom: 10px;
  background: #DDD;
}
#wrapper {
  overflow: hidden;
  margin-bottom: 10px;
}
#content {
  float: right;
  width: 500px;
  height: 200px;
  background: #C7D5EE;
}
#sidebar {
  float: left;
  width: 250px;
  height: 200px;
  background: #FACFB8;
}
#footer {
  height: 50px;
  margin-bottom: 50px;
  background: #DDD;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
  <div id="content"></div>
  <div id="sidebar"></div>
</div><!--/#wrapper-->
<div id="footer"></div>
</div><!--/#container-->

</body>
</html>

でざいんとうぇぶ。｜WEB学習

WEBスクール半年間の学習過程