Contenu connexe
Plus de Atsushi Tadokoro (20)
CSSレイアウト - 千葉商科大 Web表現
- 6. ‣
<div id="hoo">
<h1>div </h1>
<p> div </p>
<p> </p>
</div>
‣
<p> <span id="hoo"> </span> span
</p>
- 9. ‣
<div id="header">
<h1> </h1>
<p>header id div </p>
</div>
<div id="sidebar">
<h1> </h1>
<p>sidebar id div </p>
</div>
‣
#header {
}
#sidebar {
}
- 10. ‣
<div id="header">
<h1> </h1>
<p>header id div </p>
</div>
<div id="sidebar">
<h1> </h1>
<p>sidebar id div </p>
</div>
‣
#header {
}
#sidebar {
}
- 11. ‣
<div id="header">
<h1> </h1>
<p>header id div </p>
</div>
<div id="sidebar">
<h1> </h1>
<p>sidebar id div </p>
</div>
‣
#header {
}
#sidebar {
}
- 12. ‣
<div class="header">
<h1> </h1>
<p>header id div </p>
</div>
<div class="sidebar">
<h1> </h1>
<p>sidebar id div </p>
</div>
‣
.header {
}
.sidebar {
}
- 15. ‣
Header
Sidebar Content
Footer
- 16. ‣
‣
‣
‣ http://goo.gl/gyOCP
- 17. <!DOCTYPE HTML>
<html>
<head>
<title>CSS </title>
<meta http-equiv="Content-Type" charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="sidebar">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
- 23. ‣
#container {
}
#header {
background-color:#C7E8FF;
}
#footer {
background-color:#C7E8FF;
}
#sidebar {
background-color:#FFFBC7;
}
#content {
background-color:#FFDCC7;
}
- 25. ‣
@charset "UTF-8";
/* CSS Document */
#container {
}
#header {
background-color:#C7E8FF;
}
#footer {
background-color:#C7E8FF;
}
#sidebar {
background-color:#FFFBC7;
float:left;
width:200px;
}
#content {
background-color:#FFDCC7;
}
- 26. ‣
@charset "UTF-8";
/* CSS Document */
#container {
}
#header {
background-color:#C7E8FF;
}
#footer {
background-color:#C7E8FF;
}
#sidebar {
background-color:#FFFBC7;
float:left;
width:200px;
}
#content {
background-color:#FFDCC7;
}
- 31. ‣
#sidebar {
background-color:#FFFBC7;
float:left;
width:200px;
}
#content {
background-color:#FFDCC7;
margin-left:200px;
}
- 32. ‣
#sidebar {
background-color:#FFFBC7;
float:left;
width:200px;
}
#content {
background-color:#FFDCC7;
margin-left:200px;
}
- 41. ‣
....( )....
<body>
<div id="header">
<p> </p>
</div>
<div id="content">
<p> </p>
</div>
<div id="sidebar">
<p> </p>
</div>
<div id="footer">
<p> </p>
</div>
</body>
....( )....
- 44. ‣
#sidebar {
background-color:#FFFBC7;
float:right;
width:200px;
}
#content {
background-color:#FFDCC7;
float:right;
width:600px;
}
- 45. ‣
#sidebar {
background-color:#FFFBC7;
float:right;
width:200px;
}
#content {
background-color:#FFDCC7;
float:right;
width:600px;
}
- 48. ‣
#footer {
background-color:#C7E8FF;
clear:right;
}
- 49. ‣
#footer {
background-color:#C7E8FF;
clear:right;
}
- 50. ‣
body { #sidebar {
margin:0; background-color:#FFFBC7;
} float:right;
#header, #footer, #sidebar, width:200px;
#content { }
margin:0; #content {
padding:5px 0; background-color:#FFDCC7;
} float:right;
#container { width:600px;
width:800px; }
margin:0 auto;
}
#header {
background-color:#C7E8FF;
}
#footer {
background-color:#C7E8FF;
clear:right;
}
- 55. ‣
#container {
width:90%;
margin:0 5%;
}
#header {
background-color:#C7E8FF;
}
#footer {
background-color:#C7E8FF;
clear:both;
}
#sidebar {
background-color:#FFFBC7;
float:left;
width:20%;
}
...
- 56. ‣
#container {
width:90%;
margin:0 5%;
}
#header {
background-color:#C7E8FF;
}
#footer {
background-color:#C7E8FF;
clear:both;
}
#sidebar {
background-color:#FFFBC7;
float:left;
width:20%;
}
...
- 57. ‣
#sidebar {
background-color:#FFFBC7;
float:left;
width:20%;
}
#content {
background-color:#FFDCC7;
float:right;
width:79%;
}
- 58. ‣
#sidebar {
background-color:#FFFBC7;
float:left;
width:20%;
}
#content {
background-color:#FFDCC7;
float:right;
width:79%;
}
- 59. ‣
body { #sidebar {
margin:0; background-color:#FFFBC7;
} float:left;
#header, #footer, #sidebar, width:20%;
#content { }
margin:0; #content {
padding:5px 0; background-color:#FFDCC7;
} float:right;
#container { width:80%;
width:90%; }
margin:0 5%;
}
#header {
background-color:#C7E8FF;
}
#footer {
background-color:#C7E8FF;
clear:both;
}
