自作サイト作成　CSS基本編　1

さていよいよCSS作成に突入します。
基本的には同じ事の繰り返しなので構えなくても大丈夫ですよ＾＾

まず基本のCSSのソースを
こちらを確認下さい

もし記事を見ながら一緒に作成しつつ覚えようとされているのであれば、
『Crescent Eve』にコピペして『style.css』の名前に変えて下さいね。

注意して欲しいのがCSSは『同じタグ』を複数回指定すると
『下にある方が適用される』ということを覚えておいて下さい。

なので間違って同じタグを再度指定してしまうと
変更しても『あれ？変わらない？？』となりますので＾＾；

例えばh1タグの文字色を黒色で指定しても
その後に緑色で指定してしまうと緑色で表示されてしまいます。

なのでCSSを書く場合はhタグを明記している部分、
枠に関しての部分といったふうに順番に書いていくと
間違えにくくなります＾＾

後書く順番や書き方ですが特に決まりはありません。
基本さえ守っていればOKです。

例えば『bodyの設定』と『hタグの設定』では『 { 』の後が
隙間をあけるかあけないかとかもそれぞれのクセです。
なので他の人が作成したCSSソースを見て『この位置に書かないとダメだ』
というのはないので後から自分が変更しやすいように書きましょう。

それとHTMLの時の
<!--サイト表示ここから-->～<!--サイト表示ここまで-->のように
CSSも説明をつけておくと便利です。

CSSの説明の明記の仕方は
/*------サイト全体の設定------*/のように
『/*』～『*/』で挟むようにして書きこみます。
（中身はどのようにして書いても構いません。）

ではではいきます。
まずdivタグで指定したときにidやclassをつけて名前を指定しました。

例えば<div id="container">の部分だと、
div#container{●●}と書いてcontainerがどういったものなのかを決めます。

ではidではなくclassの場合はどうなるのか。
<div class="container">だったとしたらdiv.container{●●}と
『#』ではなく『.』で書くようにします。

タグを指定するときによく使うのが『margin』と『padding』です。

marginはdiv間の隙間でpaddingはdiv内の隙間を指定できます。
上記のように文字を書くと見た目が変わってますよね。
このようにどこを起点にした範囲にするのかを決めることができます。

marginやpaddingの後ろに書いてある数字が『どの場所に』という意味なのですが、
色んな箇所を見てみると1～4個とバラバラになっています。

これは省略をすることができるのでこのようになっています。
例えば4個の場合は『上・右・下・左』の順で指定しています。
2個の場合は『上下・左右』となっていて1個だと『上下左右』を指定しています。

で・・・数字の単位も幾つもあります。
大抵の人は『px』『em』が多いのですが『cm』を使っている人もいます。
画像単位がpxですからpxでなれた方がいいのかもしれませんんね。

ちなみにemは基本要素の倍率を示しています。
またptはフォントサイズの時にしか使うことはないと思います。
（ptは72分の1インチです。）

まずここまでで『１・メインコンテンツ関連』のmarginやpaddingを
少し変えて見ながら色々試してみて下さい。

あ、色はまだ変えないで下さいね。
『#』の後ろの英数字を変えると変更できますが
どの程度の範囲なのかわかりにくいので＾＾；

＜＜編集後記＞＞

初めてサイト作成を覚えようとした時、
『本を買うより他人のサイトを色々といじってみるのが覚えやすい』と
ネットではよく見かけましたが・・・

人それぞれのクセがあって基本を覚えた上で応用するのはいいけど、
0から始めるのには難しいです・・・

初心者の人にも分り易く書けていればいいですが＾＾；

2010年2月 3日

ユウ (09:49) | コメント(0)

カテゴリ：06.自作テンプレ作成編