CSSレイアウト - 千葉商科大 Web表現

2,021 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,021
On SlideShare
0
From Embeds
0
Number of Embeds
331
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSSレイアウト - 千葉商科大 Web表現

  1. 1. ‣‣‣‣ ‣ ‣ ‣ ‣‣
  2. 2. ‣‣‣‣
  3. 3. ‣‣‣‣ ‣ ‣ ‣ ‣
  4. 4. ‣<div id="hoo"> <h1>div </h1> <p> div </p> <p> </p></div>‣<p> <span id="hoo"> </span> span </p>
  5. 5. ‣‣‣ ‣ ‣
  6. 6. ‣ ‣ ‣‣ ‣ ‣ ‣
  7. 7. ‣<div id="header"> <h1> </h1> <p>header id div </p></div><div id="sidebar"> <h1> </h1> <p>sidebar id div </p></div>‣#header {}#sidebar {}
  8. 8. ‣<div id="header"> <h1> </h1> <p>header id div </p></div><div id="sidebar"> <h1> </h1> <p>sidebar id div </p></div>‣#header {}#sidebar {}
  9. 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. 10. ‣<div class="header"> <h1> </h1> <p>header id div </p></div><div class="sidebar"> <h1> </h1> <p>sidebar id div </p></div>‣.header {}.sidebar {}
  11. 11. ‣‣‣‣‣
  12. 12. ‣ Header Sidebar Content Footer
  13. 13. ‣ ‣ ‣ ‣ http://goo.gl/gyOCP
  14. 14. <!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>
  15. 15. ‣‣ ‣‣ ‣ ‣ ‣ ‣‣ ‣
  16. 16.
  17. 17. ‣‣ ‣‣ ‣ ‣ ‣ ‣‣ ‣
  18. 18. ‣ ‣ ‣ ‣‣
  19. 19. ‣#container {}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF;}#sidebar { background-color:#FFFBC7;}#content { background-color:#FFDCC7;}
  20. 20. ‣‣‣‣
  21. 21. ‣@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;}
  22. 22. ‣@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;}
  23. 23. ‣ ‣ ‣ ‣
  24. 24. ‣#sidebar { background-color:#FFFBC7; float:left; width:200px;}#content { background-color:#FFDCC7; margin-left:200px;}
  25. 25. ‣#sidebar { background-color:#FFFBC7; float:left; width:200px;}#content { background-color:#FFDCC7; margin-left:200px;}
  26. 26. ‣‣‣‣‣
  27. 27. ‣#header, #footer, #sidebar, #content { margin:0; padding:5px 0;}#container { width:800px; margin:0 auto;}
  28. 28. ‣#header, #footer, #sidebar, #content { margin:0; padding:5px 0;}#container { width:800px; margin:0 auto;}
  29. 29. ‣‣‣‣‣
  30. 30.
  31. 31. ‣....( )....<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>....( )....
  32. 32. ‣‣‣‣‣‣‣‣
  33. 33. ‣ ‣ ‣ ‣ ‣
  34. 34. ‣#sidebar { background-color:#FFFBC7; float:right; width:200px;}#content { background-color:#FFDCC7; float:right; width:600px;}
  35. 35. ‣#sidebar { background-color:#FFFBC7; float:right; width:200px;}#content { background-color:#FFDCC7; float:right; width:600px;}
  36. 36.
  37. 37. ‣‣‣‣‣‣
  38. 38. ‣#footer { background-color:#C7E8FF; clear:right;}
  39. 39. ‣#footer { background-color:#C7E8FF; clear:right;}
  40. 40. ‣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;}
  41. 41.
  42. 42. ‣‣‣
  43. 43. ‣‣‣‣‣‣ ‣ ‣ ‣
  44. 44. ‣#container { width:90%; margin:0 5%;}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF; clear:both;}#sidebar { background-color:#FFFBC7; float:left; width:20%;}...
  45. 45. ‣#container { width:90%; margin:0 5%;}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF; clear:both;}#sidebar { background-color:#FFFBC7; float:left; width:20%;}...
  46. 46. ‣#sidebar { background-color:#FFFBC7; float:left; width:20%;}#content { background-color:#FFDCC7; float:right; width:79%;}
  47. 47. ‣#sidebar { background-color:#FFFBC7; float:left; width:20%;}#content { background-color:#FFDCC7; float:right; width:79%;}
  48. 48. ‣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;}
  49. 49.

×