- ベストアンサー
CSSの作成について
図のようなレイアウトでホームページを作りたいのですが 恥ずかしながら、私html位しか書けなくて、 CSSの作り方があまり良くわからないのです。 googleで検索したところ、 このようなサンプルテンプレートがありませんでした。 あと、htmlとCSSを分けて書く、という意味がいまいち ピンときません。 どなたか、初心者に寛容な方、教えていただけないでしょうか？
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
（１）HTMLの中に外部ＣＳＳファイルへのリンクを定義しておく。 <link href="style/main.css" rel="stylesheet" type="text/css" /> （２）ＨＴＭＬ内のＣＳＳは、ＣＳＳファイルないで定義できる。 ////////////////////////////////////// ｈｔｍｌ ////////////////////////////////////// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="style/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <h2>タイトル</h2> </div> <div id="left-contents"> <ul> <li>aaa</li> <li>bbb</li> </ul> </div> <div id="righ-contents"> <p>ほにゃらら</p> <p>にゃらら</p> </div> <div id="footer"><p>copy right</p></div> </div> </body> </html> ///////////////////////////////////////////////////////////////// style/main.css ///////////////////////////////////////////////////////////////// @charset "utf-8"; * { margin: 0px; padding: 0px; } body { margin-top: 20px; background-color: #CCCCCC; } /* CSS Document */ #container { float: none; width: 760px; margin-right: auto; margin-left: auto; } #container #header { background-color: #FFFF00; width: 760px; } #container #header h2 { padding-left: 30px; } #container #left-contents { float: left; width: 200px; background-color: #33CCFF; display: block; } #container #left-contents ul { list-style-position: inside; padding-left: 30px; } #container #righ-contents { background-color: #CCFF33; float: right; width: 560px; } #container #righ-contents p { padding-left: 30px; } #container #footer { clear: both; width: 760px; background-color: #FFFF00; display: block; } #container #footer p { padding-top: 10px; padding-bottom: 10px; margin-right: auto; margin-left: auto; padding-left: 30px; }
お礼
dreamweaver上でやったら出来ました！！ 有難うございます。
補足
ソースありがとうございます。しかし、 拡張子はhtmlとcssでalphaEDITで作成したのですが、 IE9上で確認したところ、図のようにはなりませんでした。 …なにがいけないんでしょうか？