css3の勉強に入る前に、今回はcssの基本文法をおさらいしておきます。
css(スタイルシート)の利点は、何といってもサイトのデザインを一発で変更出来るところです。
htmlファイルには一切触れずに、cssファイルを修正するだけでガラッとデザインを変えられるんです。まるで、ワードプレスのテーマを着替えるみたいに。なんて素晴らしい☆〃
まずは基本をマスターして、新しい効果をどんどん取り入れていきたいものですね！
cssの基本文法
《例》
「見出しh3は、フォントの色は＃666で、フォントのサイズは16ピクセルです。」をcssで記述すると…
h3 {
color:#666;
font-size:16px;
}
と、なります。
まず、デザインを加えたい対象のセレクタを一番前に記述します。この例の場合、セレクタはh3です。
{ }の中に、○○○:○○○;（プロパティ:値;）で、デザインを加えていきます。
○○○:○○○; のセットは続けて記述出来ます。
セレクタ { ○○○は: ○○○です; }
文法についてはこれだけです。簡単ですね。
cssのプロパティは山ほどあります。
どのプロパティがどんな効果を出すのかについては、これからcss3を使って色々と実験しながら、使えそうなものはどんどんご紹介していこうと思います。
各種コメントタグについて
コメントタグは言語によって書き方が違います。
ややこしいので、間違えない様ここで覚えちゃいましょう。
1.htmlはコレ → <!– –>
<!– ここにコメントを書く –>
2.CSS,java script,phpはコレ → /* */
/* ここにコメントを書く */
注意!! cssのコメントタグの終了タグの直前に全角文字が入っていると閉じられません。
コメントに全角文字を使っている場合は閉じタグ*/の直前に半角スペースを入れる様にします。
*/の直前の文字が半角の場合はスペースを入れる必要はありません。
3.java script,phpはコレも使える → //
// ここにコメントを書く。終了タグは無し。
一行のみ有効で、改行されるまで効果があります。