スタイルシート（その１）

HPを作る上で大事なのがデザインですね(´ω｀)ﾉ
デザインを作成する上で使うのがCSSです(￣ー+￣)ｷﾗﾘ

ってことで、スタイルシートの書き方もメモりましょう((φ(-ω-)ｶｷｶｷ

style.cssのファイルを作成しました(ﾉ´∀｀*)

/*ヘッダー*/

div#header h1     {font-size: 1.875em;
                   margin:0;
                   float: left;
                   margin-bottom: 4px}

div#header h1 a   {text-decoration: nome;
                   color: #000000}

div#header p#desc {font-size:0.75em;
                   color: #444444;
                   margin:0;
                   float: right;
                   margin-top: 18px}

div#header        {border-bottom: none;
                   padding-bottom: 0;
                   margin-bottom: 20px}

h1：文字の大きさがH1の時
margin：文字の周りの余白
h1 a:リンク部分
p#desc：でマークアップしたブログの説明の部分
border-bottom：罫線を表示
padding-bottom：ブログの説明と罫線の間の余白
margin-bottom：罫線の下の余白

/*コンテナ*/

div#container {width: 760px;
               margin:auto}

auto:ボックスは中央に寄せられる

/*記事*/

div.post     {border: solid 1px #0c8bcd;
              padding: 15px;
              margin-bottom: 20px}

div.post h2  {background-color: #a3d2f2;
              background-image: url(〜);
              font-size: 0.875em;
              adding: 10px;
              margin: 0}

div.post h2 a {text-decoration: none;
               color: #000000}

div.post p    {font-size: 0.875em;
               line-height: 1.6;
               margin-top: 10px}

p.postinfo    {color #0c8bcd;
               text-align: right;
               margin: 20px 0 0}

p.postinfo a  {color: #0c8bcd}

post：< div class="post">に対してborderのプロパティを設定します
background-color：背景の色
backgroud-image：背景の画像
text-decoration:none：テキストの装飾を施さない
line-height:行の高さを指定する
postinfo：記事の投稿クラス

/*ページリンク*/

span.oldpage {float: left}

span.newpage {float: right}

p.pagelink a {font-size: 0.75em;
              color: #0c8bcd}

p.pagelink   {overflow: hidden;
              width:100}

oldpage：投稿の昔の記事へのリンク()
newpage：投稿の新しい記事へのリンク()
p.pagelink：ページリンク()

/*フッター*/

div#footer {clear: both;
            border-top: solid 3px #000000;
            padding: 6px 0*}

address    {font-size: 0.75em;
            font-style: normal;
            font-family: Verdana, sans-serif;
            margin: 0}

address a  {color: #000000}

clear：回りこみを解除
address：コピーライトの文字を設定