CSSの基本文法

■CSSの基本文法

それでは、ここではCSSの用語をご紹介したいと思います。HTMLにタグや属性といった名前があるように、CSSも名前が付いています。CSSの基本的な記述方法は、「#(ID)」や「.(コロン)」といったセレクタつけて名前を付ける方法です。例で言うと、「#.namae」「.namae」となり、namaeの部分は自分が覚えやすいものを使うようにしましょう!「#(ID)」は、そのページに一つしか使ってはいけないCSSで、「.(コロン)」はいくつでもCSS適用させることができます。
次にプロバティといって、CSSに効果を付けることのできる部分です。記述としては、{ }で囲みます。その囲んだ中にCSSで効果を付けることのできるcolorやfont-sizeを記述、その後ろに「: (コロン)」「; (セミコロン)」を入力してCSSの効果を設定します。先ほどの.namaeで試してみましょう!

#namae{ font-size : 20px ; }
.namae{ font-size : 20px ; }

これによって、namaeに文字の大きさを20pxの効果を付けることができました。この20pxと指定した部分を、「値」と言います。CSSは
セレクタ{ プロバティ : 値 ; }
による記述方法が、基本となります。また、HTMLの属性のように一つのCSSに複数の効果を指定することができます。

#namae{ font-size : 20px ;
 color: #FFFFFF ; }

これによって、namaeのCSSに文字の大きさ「20px」と文字の色「白色」の効果を付けることができました。さまざまな効果を付けることができるので、いろいろ試してみるとホームページ制作の幅が広がります。ぜひ、挑戦してみて下さい。あっ、言い忘れていましたがCSSもHTML同様、半角でなければ動かないので注意しましょう!

 

■お役立ちPR

iTunesバックアップ、新パソコンへの移行は外付けHDDで
http://magazine.voicenote.jp/20152632/

Copyright (C) 2008 HP Factory. All Rights Reserved.