ソースの確認｜floatレイアウトホームページ作成講座

Loading

スポンサードリンク

CSSデザインサンプルのホームページ制作の流れをご確認下さい。

HTMLファイル

プレーン表示コピー印刷?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">  
  2. <html lang="ja">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">  
  5. <meta http-equiv="Content-Style-Type" content="text/css">  
  6. <meta name="ROBOTS" content="ALL">  
  7. <meta name="description" content="ホームページの説明文">  
  8. <meta name="keywords" content="キーワード,キーワード,キーワード">  
  9. <title>ホームページ作成</title>  
  10. <link rel="stylesheet" href="css/hp.css" type="text/css">  
  11. </head>  
  12. <body>  
  13. <div id="wrapper">  
  14. <!--header部分-->  
  15. <div id="header">  
  16. *** ヘッダー部分 ***  
  17. </div>  
  18. <!--header部分終わり-->  
  19. <!--contents部分-->  
  20. <div id="contents">  
  21. *** コンテンツ部分 ***  
  22. </div>  
  23. <!--contents部分終わり-->  
  24. <!--sidebar部分-->  
  25. <div id="sidebar">  
  26. *** サイドバー部分 ***  
  27. </div>  
  28. <!--sidebar部分終わり-->  
  29. <!--footer部分-->  
  30. <div id="footer">  
  31. *** フッター部分 ***  
  32. </div>  
  33. <!--footer部分終わり-->  
  34. </div>  
  35. </body>  

CSSファイル

プレーン表示コピー印刷?
  1. /*-------------------------フォントスタイル フォントサイズの指定*/   
  2. body {  
  3.   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;  
  4.   font-size: 90%;  
  5.   text-align: center;  
  6.   margin: 0;  
  7.   padding: 0;  
  8. }  
  9.   
  10. /*-------------------------wrapperの指定*/   
  11. #wrapper {  
  12.   text-align: left;  
  13.   width: 800px;  
  14.   margin: 0 auto;  
  15.   padding: 0;  
  16. }  
  17.   
  18. /*-------------------------headerの指定*/   
  19. #header {  
  20.   height: 160px;  
  21.   margin: 0;  
  22.   padding: 0;  
  23. }  
  24.   
  25. /*-------------------------contentsの指定*/  
  26. #contents {  
  27.   width: 600px;  
  28.   float: right;  
  29.   margin: 0;  
  30.   padding: 0;  
  31. }  
  32.   
  33. /*-------------------------sidebarの指定*/  
  34. #sidebar {  
  35.   width: 180px;  
  36.   float: left;  
  37.   margin: 0;  
  38.   padding: 0;  
  39. }  
  40.   
  41. /*-------------------------footerの指定*/  
  42. #footer {  
  43.   text-align: center;  
  44.   clear: both;  
  45.   margin: 0;  
  46.   padding: 0.5em 0;  
  47. }  

スポンサードリンク