--年--月--日(--)--時

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2010年11月16日(火)18時

CSSを使い始める

やっと、CSSを使い始めてみます。
と言っても、まずは準備のようなものですが。。。


■作業
HTML を divタグでパーツに分けて、そのパーツに名前のようなものを付ける。
CSS をちょっと書く。


■ソースファイル

HTML

<!DOCTYPE ~略~>
<html ~略~>

<head>
~略~
</head>

<body>
<div id="contents">

<div id="header">
<h1><a href="<%url>"><%blog_name></a></h1>
<h2><%introduction></h2>
</div>

<div id="main">

<!--topentry-->
<div class="entry">
~略~
</div>
<!--/topentry-->

<div id="page">
<!--prevpage--><a href="<%prevpage_url>">前のページ</a><!--/prevpage-->
|<a href="<%url>">トップページ</a>|
<!--nextpage--><a href="<%nextpage_url>">次のページ</a><!--/nextpage-->
</div>

<div id="commentarea">
<!--comment_area-->
<h3>コメント</h3>
<!--comment-->
<div id="comment">
~略~
</div>
<!--/comment-->
~略~
<!--/comment_area-->
</div>

</div>

<div id="footer">
<address>
BaseDesigned by <a href="http://templates2.blog136.fc2.com/">FlatCraft</a><br />
Powered by FC2 BLOG<br />
<%ad><%ad2><br />
Copyright <%blog_name> All Rights Reserved.<br />
</address>
</div>

</div>
</body>

</html>


CSS
body
{
   width: 800px; 
   margin: 0 auto;
}
#header

   height: 150px;
}
#main
{
   width: 600px; 
   float: left;
}
#footer

   clear: both;
}


■結果
CSSでパーツの幅などを設定しましたが、表示はあまり変わりません。
まあ、今後の準備です。

スポンサーサイト

コメント

コメントの投稿

カテゴリ
作り方 (0)
自作 (25)
配布 (0)
ブログ (2)
全記事表示リンク

全ての記事を表示する

プロフィール

FlatCraft

Author:FlatCraft
こんにちわ

カレンダー
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
最新記事
最新コメント
最新トラックバック
月別アーカイブ
FC2アクセスランキング
ランダムブログボタン
検索フォーム
RSSリンクの表示
リンク
このブログをリンクに追加する
FC2ブックマーク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。