HTML+CSS 実例１
今回は、初めてホームページを作成しよう！
という方の参考になればと思い、
とっても簡単でSEO対策もバッチリな、
『HTML＋CSSの参考例』を紹介してみようと思います！
私が５分ぐらいで作った、２カラムのページです。
ソースも載せておきますので、もし宜しかったら
そのまま、コピー＆ペーストしていじってみて下さいね☆
HTMLソース↓
<div id="container">
<div id="header">
<h1>タイトルなど</h1>
</div>
<div id="main">
<p>メインコンテンツ</p>
</div>
<div id="side">
<p>メニュー等</p>
</div>
<div id="footer ">
<address>著作権情報等</address>
</div>
</div>
CSSソース↓
#container {
width: 700px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000000;
}
#header {
background-color: #CCCCCC;
width: 700px;
height: 50px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#main {
width: 549px;
height: 500px;
float: right;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
}
#side {
float: left;
width: 150px;
height: 500px;
}
#footer {
clear: both;
height: 50px;
width: 700px;
background-color: #CCCCCC;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
以上が、Internet Explorerで見たページ画面と、そのソースになります。
この形のページは、どんなサイトを作成する上でも、
かなり応用の利くデザインだと思います。
ソースの詳しい解説は、いずれ記事にしたいと思っています。
また、質問等ございましたら、遠慮なくコメントしてくださいね☆
▼ 稼げる情報ランキングはこちら
