2006年05月06日

スタイルシートの指定

さて、それではスタイルシートの記述について。


主なものを上げていきますね。


サイズ関係

width:800px;」=幅
height:200px;」=高さ


位置や余白関係

text-align:center;」=文字や画像の横方向の位置 leftは左寄せ、centerは中央、rightは右寄せ
text-valign:middle;」=文字や画像の縦方向の位置 topは上寄せ、middleは中央、bottomは下寄せ
padding:0px;」=内側の余白
margin:0px;」=外側の余白

※パディングとマージンですが、例えばテーブルがあった場合、パディングはテーブルの枠線と内側の文字or画像との間の余白、マージンは隣接する他の要素(隣のテーブルとか)と枠線との間の余白を指定します。
テーブルでない限り、どちらを使うかはあまり気にしなくていいと思います。

※2 パディングとマージンは、数字がひとつの時は、上下左右を一度に同じ数字で指定すると扱われます。
数字をバラバラに指定したい時は「padding:0px 10px 0px 20px;」などのように、半角スペースを入れて並べます。
順番は、「上、右、下、左」・・・上から順番に時計回りと覚えると簡単です。
バラバラに「padding-top:10px;」のような書き方をしてあることもあります。


文字関係

font-family: Arial, Helvetica, sans-serif;」=使用フォントの指定
color:#00C657;」=文字色の指定 「black」などのように色名で指定出来るものもあります
font-size:20px;」=文字サイズの指定
font-weight:normal;」=文字の太さの指定 boldまたはbolderで太字になります
line-height:140%;」=行間の指定 これは、覚えておくと便利です
tex-t-decoration:none;」=文字の装飾の指定
 none(何もなし)、underline(下線)、overline(上線)、line-through(打ち消し線)、blink(点滅)の種類があります


背景関係

background-color:#ccccff;」=背景色の指定
background-image:url(http://blog.seesaa.jp/img/bg/blue/bg.gif );」=背景画像の指定
background-repeat:repeat-x;」=背景画像は何も指定しない限り、縦・横どちらも繰り返して表示されます
 これを避ける場合には、次のようにします。
  横方向だけに繰り返したい場合は「repeat-x
  縦方向だけに繰り返したい場合は「repeat-y
  1枚物の大きな画像など、繰り返ししてほしくない場合は「no-repeat
background-position:left bottom」=上の no-repeat を指定した時に使う画像の位置指定
 横方向・上方向の順で指定します
 このような書き方の他、「400px 0px」「80% 5%」などのような指定方法も出来ます。

他にこんなことも
background-attachment: fixed;」=これを入れると、背景を固定し、スクロールすると文字が流れるように出来ます


とりあえず、こんなものでしょうか。
HTMLやスタイルシートの解説サイトへ行っても、沢山ありすぎてわからないんじゃないでしょうか。
でも、これだけわかれば、自分のブログのカスタマイズくらいは大丈夫ですw


スタイルシートを弄る際には。
「まず、弄る前のスタイルシートを全部、メモ帳にでもコピーしましょう!」
それさえしておけば、弄って変になっても、どこを弄ったか忘れても大丈夫w
一度に沢山弄ってしまわずに、不安なうちは、少しずつ弄って確認しましょう。


スタイルシートは怖くない、習うより慣れろ、ですw



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事へのコメント
こんばんは。今日も勉強させてもらいます。お互いがんばりましょう!応援して帰りますね。
Posted by カフカ at 2006年05月07日 00:09
こんにちは!!ブログのブログ管理人のなかやんです。早速ブログ紹介させていただきましたので時間のあるときにでもご確認ください。その際には応援クリックお願いします^^ぼくも応援して帰ります。
Posted by なかやん at 2006年05月07日 00:25
soraさん、ほじめまして。souと申します。

相互リンク有難うございます。

こちらもリンク貼らせていただきました。

これからも宜しくお願いします。

応援ポチ

Posted by sou 起業の基本・・・きほん!! at 2006年05月07日 08:20
こんにちは、子猫です。
遊びにきました。
子猫、スタイルシート弱いんです。
勉強になりました。
これからもよろしくお願いしますね。
応援クリックして帰ります。
仲良くしてくださいね。
Posted by ブログでアフィリエイト!初心者必見の子猫 at 2006年05月07日 11:40
こんにちわ。
コメントありがとうございます。
100相互リンク様よりいらしてくれたとのことなのですが、どうでしょう?
私と相互リンクさせていただけますでしょうか?
私もまだ始めたばかりなのでお役に立てないかもしれませんが…
よろしくお願いいたします。
Posted by 弓削 at 2006年05月07日 12:04
みなさんこんばんわ、応援ありがとうございます♪
GW終わりましたねぇ、どんな風に過ごされましたでしょうか?
私はGWの始めに子供が病気になり、それがまだ治らず、明日(今日ですけど)は学校を休んで病院に行かなければという・・・;;

カフカさん>お勉強だなんて・・・私もみなさんのページで沢山お勉強させてもらってます、お互い頑張りましょうね♪

なかやんさん>確認しました、(応援もしておきました)書いてあることが立派すぎて、マウスを持つ手が震えてしまいましたw

souさん>ありがとうございます。つたないページですが、これからもよろしくお願いしますね♪

子猫さん>いらしてくださってとても嬉しいです。今度そちらへもお邪魔させていただきます、ありがとうございます。

弓削さん>えと、すでにリンク張らせていただいてます。そのご報告のつもりだったのですが、わかりにくい書き方ですみません;; これからもよろしくお願いします。
Posted by sora at 2006年05月08日 00:23
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/17466638
×

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