2007-04-12 [Thu]
これだけ覚えておけば何とかなるCSSの超基本
とりあえずこれだけ覚えておけば動かせるCSSの基本をメモ。

�．謄鵐廛譟璽箸�CSSの関係

1.テンプレートでコントロールしたい箇所にdivタグを入れる。
idは一度しか使えないので、何度も使うならclassで指定する。
例）
<div class="test">
</div>
例）
<div id="test">
</div>

2.CSSにdivを指定した部分のコードを記述する。
例）
.test {
font-size: 12px;
margin: 10px;
padding: 5px;
background-color: #ffffff;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

��marginとpadding

marginは他の要素との間隔を指定する。
paddingは同じ要素内での間隔を指定する。

例えば、2カラムの場合、サイドバーのカラム（左）と本文のカラム（右）の間隔を指定するにはmarginで指定する。
本文を書いている右カラムの中で、文章と端の間隔を指定するにはpaddingで指定する。
（margin、paddingとも書き方は共通）

上下・左右全ての方向に10pxの間隔を指定する。
margin: 10px;

上下が10px、左右に5pxの間隔を指定する。
margin: 10px 5px;

上が10px、左右に5px、下に1pxの間隔を指定する。
margin: 10px 5px 1px;

左から順に上、右、下、左となり（時計回り）、それぞれ1px,2px,3px,4pxを指定する。
margin: 1px 2px 3px 4px;

左から順に上、右、下、左となり（時計回り）、それぞれ1px,2px,3px,4pxを指定する。
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

��線を引く
CSSで線を指定するには、border属性を指定する。
書き方は以下のように行う。

border-方向: px数 線の種類 #色の種類;

例）
border-top: 1px solid #000000;

上下左右の指定の方法はmargin、paddingと同様である。

方向を指定しない場合、上下左右全ての方向に線が引かれる。
いわゆる四角で囲む状態になる。
以下の内容はどちらも同じ内容である。
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border: 1px solid #000000;

�で愀平Г了慊�

属性に背景色を指定するには、background-colorで行う。
background-color: #ffffff;

�グ銘屬了慊�

属性の位置を指定するにはalignで行う。

縦方向の上
align="top"

縦方向の中央
align="middle"

縦方向の下
align="bottom"

横方向の右
align="right"

横方向の中央
align="center"

横方向の左
align="left"

�Ε灰瓮鵐肇▲Ε�

/* と */ の間で挟んだ記述はコメントアウトされるので、日本語での注釈や、処理を一時的に無効化しておきたい箇所に挿入する。
/* この部分の記述はコメントアウトされます */
/*
この部分の記述はコメントアウトされます
*/

�Д謄鵐廛譟璽箸把樟楪蟲舛垢�

CSSでなくテンプレート中で直接定義することも出来る。
<span style="font-style:italic;">この部分はイタリックになります。</span>

スレッドテーマ:カスタマイズ:ブログ

Posted at 21:50 | blog | | Cm [0] | Tb [0] | このエントリーのブックマーク数



main

コメント

コメントする

サイト管理者にのみ通知する

トラックバックURL


トラックバック