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
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

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