So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

CSSの基礎知識 [基礎編]

CSS(スタイルシート)とは
CSS(スタイルシート)とは、HTML(HPを構成するための基本部分)で書かれたブログを含むWebサイトなどのレイアウトやデザイン等の見た目を決めるツールのようなものです。

記述方法はテキストで、もし記述方法が間違っていたら無視されるだけなので、これによってブログが壊れる心配はありません。ですから、思い切ってトライしてみて大丈夫です。

その代わり、思ったとおりにならないとか、レイアウトが崩れたりとかいうこともよくあるので、変更は一気にやってしまわず、ターゲットを決めて一つ一つ自分の思い通りになってることを確認しながら進めていきましょう。間違った!と思ったら、すぐさま変更箇所を元に戻すことをオススメします。

注意点を以下に挙げます。
  • 必ず半角英数字で記入しなければならない決まりなので、予め入力を「半角英数」にしてから始めてください。
  • 記述方法の間違いやスペルミスがある行は無視されます。
  • /*  〜  */でくくられた範囲はコメント行となります。この中に何を書いても認識されません。


スタイルの設定
本当は「属性」とかいう言い方をしますが、ここでは簡単に「スタイルの設定」と表現することにします。

例えば、こういう行があるとします。
.entry {
margin:20px;
}

これは、HTMLに「entry」というグループの名前を付けていて、そのスタイルを{ }内で設定出来るようになっています。
「.entry」という名は変えられません。変えられるのは{ }の中だけです。

{ }内は基本的に
  ○○○:△△△;
という書き方をします。

○○○は予めHTML内で決められているスタイルで、△△△はその値です。
一つのスタイルに複数の値を設定できる場合は、区切りは「半角スペース」です。しかし、稀にカンマ「,」で区切られることもあります。

必ず忘れてはいけないのは、行の終わりを示すセミコロン「;」です。
これがないだけで、その行は認識されず、思い通りのレイアウトにならないので注意してください。

尚、スタイルの項目に順序はありませんが、同じ名前を持つグループの中に同じスタイルが二つ以上設定された場合、最後の行が有効になります。
この性質を利用して、編集中は同じスタイルを二行設定すると元の値に戻しやすいです。

例:marginの値を20pxから30pxに変更してみる。
.entry {
margin:20px;
margin:30px; ← こちらの設定が上書きされる
}

これで思い通りのデザインになったら、上の行は消してくださいね。あとで混乱しますから。


スタイルの種類
スキンのカスタマイズに使いそうなスタイルをいくつか挙げ、簡単に説明します。

color
テキスト(文字)の色を指定します。
色については基礎編:カラーについてを参照してください。

例:文字をグレーにします。
color:#808080;


background
背景を設定します。
色を指定する場合と、画像を設定する場合、そしてそれら両方の設定が出来ます。

例:背景に色(赤色)を指定します。
background:#FF0000;

例:画像(aaa.jpg)を繰り返し表示させます。
background:url(aaa.jpg);

例:背景に色(黄色)と画像(bbb.jpg)の両方を指定します。画像は繰り返さず一度だけ表示し、位置は右寄せにします。
background:#FFFF00 url(bbb.jpg) no-repeat right center;

タイトル部に写真を貼り付ける場合は、このスタイルを使って背景に画像を設定することになります。

margin
先に出てきた「entry」をグループと言いましたが、本当は「ボックス要素」とかいう言い方をします。各々に別の背景色を付ければ見えてきますが、実はブログはこのボックス要素がいくつか集まって構成されています。それらが上下にいくつか重なっている、もしくは同じ階層に隣り合っているとイメージするとわかりやすいと思います。

難しくなってきましたね。わからなかったら、読み進めて大丈夫です。なんとかなります。

marginというスタイルは、ボックスの枠の外側の上下左右の間隔(マージン)を設定します。

マージンの設定方法や、マージンを設定するときの単位がいくつかありますが、ここではイメージしやすいものを紹介します。

例:上下左右のマージンを一括で10pxに設定する。
margin:10px;

例:上下左右のマージンをそれぞれ、0、10、20、30pxに設定する。
margin-top:0px;
margin-bottom:10px;
margin-left:20px;
margin-right:30px;

ここで、「px」は単位です。必ず付けましょう。
それと前にも述べましたが、記述方法、つまり、スペルが間違っていたら変化が起こらないので、あれ?変わらないな?と思ったらまずスペルチェックをしてください。

padding
非常にmarginと似ていますが、こちらは対象となるボックスとその枠内の文字との上下左右の間隔(パディング)を設定します。

パディングの設定方法や、パディングを設定するときの単位がいくつかありますが、ここではイメージしやすいものを紹介します。

例:上下左右のパディングを一括で10pxに設定する。
padding:10px;

例:上下左右のパディングをそれぞれ、0、10、20、30pxに設定する。
padding-top:0px;
padding-bottom:10px;
padding-left:20px;
padding-right:30px;

ここで、「px」は単位です。必ず付けましょう。
marginと同様、スペルミスには気をつけてください。

border
borderは枠線の太さ、形、色を設定します。


例えば、こういう行があります。
border:1px solid #000080;

これは、ボックスの枠線を、1pxの太さの実線で表し、その色をネイビーに設定した場合です。

設定可能な形(スタイル)はいろいろありますが、ブラウザによって見え方が違うので、ここでは無難なものだけご紹介します。

none:枠なし
solid:直線
double:二重線
dotted:点線

例:
none solid
double dotted


また、上下左右個別に設定することも出来ます。

例:左側だけに二重線を付ける。
border-left:8px double #000080;

左側だけに二重線

二重線の場合は少し太めに設定するのがポイントです。それ以外は1pxがシンプルでいいと思います。

上下左右のスタイルは、次のようになります。
  border-top
  border-bottom
  border-left
  border-right
これらのスタイルを上手に使うと、いろいろ楽しめますよ。


以上が今すぐ使えそうなスタイルです。
その他にも様々なスタイルがありますので、必要になったときに説明していきます。


nice!(2)  コメント(2) 
共通テーマ:ペット

nice! 2

コメント 2

GOMIMA

かほりん先生へ・・・
「わからなかったら、読み進めて大丈夫です。なんとかなります。」
読み進んで・・・おります(笑)
by GOMIMA (2008-06-19 11:22) 

かほりん

* GOMIMAさん *

おっけ〜、おっけ〜!(笑)
それで大丈夫です。(^^)
by かほりん (2008-06-19 12:12) 

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。