Your SlideShare is downloading. ×
0
‣‣‣‣    ‣    ‣    ‣    ‣‣
‣‣‣‣
‣‣‣‣    ‣    ‣    ‣    ‣
‣<div id="hoo">   <h1>div           </h1>    <p>                      div               </p>    <p>                      <...
‣‣‣    ‣    ‣
‣    ‣    ‣‣    ‣    ‣    ‣
‣<div id="header">   <h1>                  </h1>    <p>header    id               div   </p></div><div id="sidebar">   <h1...
‣<div id="header">   <h1>                  </h1>    <p>header    id               div   </p></div><div id="sidebar">   <h1...
‣<div id="header">   <h1>                  </h1>    <p>header    id               div   </p></div><div id="sidebar">   <h1...
‣<div class="header">   <h1>                 </h1>    <p>header    id              div   </p></div><div class="sidebar">  ...
‣‣‣‣‣
‣              Header    Sidebar            Content              Footer
‣    ‣    ‣    ‣ http://goo.gl/gyOCP
<!DOCTYPE HTML><html>   <head>      <title>CSS                  </title>     <meta http-equiv="Content-Type" charset="utf-...
‣‣    ‣‣    ‣    ‣    ‣    ‣‣    ‣
‣
‣‣    ‣‣    ‣    ‣    ‣    ‣‣    ‣
‣    ‣    ‣    ‣‣
‣#container {}#header {   background-color:#C7E8FF;}#footer {   background-color:#C7E8FF;}#sidebar {   background-color:#F...
‣‣‣‣
‣@charset "UTF-8";/* CSS Document */#container {}#header {   background-color:#C7E8FF;}#footer {   background-color:#C7E8F...
‣@charset "UTF-8";/* CSS Document */#container {}#header {   background-color:#C7E8FF;}#footer {   background-color:#C7E8F...
‣    ‣    ‣    ‣
‣#sidebar {   background-color:#FFFBC7;   float:left;   width:200px;}#content {   background-color:#FFDCC7;   margin-left:...
‣#sidebar {   background-color:#FFFBC7;   float:left;   width:200px;}#content {   background-color:#FFDCC7;   margin-left:...
‣‣‣‣‣
‣#header, #footer, #sidebar, #content {   margin:0;   padding:5px 0;}#container {   width:800px;   margin:0 auto;}
‣#header, #footer, #sidebar, #content {   margin:0;   padding:5px 0;}#container {   width:800px;   margin:0 auto;}
‣‣‣‣‣
‣
‣....( )....<body>  <div id="header">    <p>      </p>    </div>    <div id="content">      <p>              </p>    </div...
‣‣‣‣‣‣‣‣
‣    ‣    ‣    ‣    ‣
‣#sidebar {   background-color:#FFFBC7;   float:right;   width:200px;}#content {   background-color:#FFDCC7;   float:right...
‣#sidebar {   background-color:#FFFBC7;   float:right;   width:200px;}#content {   background-color:#FFDCC7;   float:right...
‣
‣‣‣‣‣‣
‣#footer {   background-color:#C7E8FF;   clear:right;}
‣#footer {   background-color:#C7E8FF;   clear:right;}
‣body {                         #sidebar {   margin:0;                      background-color:#FFFBC7;}                    ...
‣
‣‣‣
‣‣‣‣‣‣    ‣    ‣    ‣
‣#container {   width:90%;   margin:0 5%;}#header {   background-color:#C7E8FF;}#footer {   background-color:#C7E8FF;   cl...
‣#container {    width:90%;    margin:0 5%;}#header {    background-color:#C7E8FF;}#footer {    background-color:#C7E8FF; ...
‣#sidebar {   background-color:#FFFBC7;   float:left;   width:20%;}#content {   background-color:#FFDCC7;   float:right;  ...
‣#sidebar {   background-color:#FFFBC7;   float:left;   width:20%;}#content {   background-color:#FFDCC7;   float:right;  ...
‣body {                         #sidebar {   margin:0;                      background-color:#FFFBC7;}                    ...
‣
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
Upcoming SlideShare
Loading in...5
×

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

1,758

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
1,758
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×