css基本文法とコメントタグの種類について

2022.1.10 更新

今回はcssの基本文法の確認です。

css(スタイルシート)の利点は、htmlファイルには一切触れずにサイトのデザインを瞬時に変更出来るところです。

cssの基本文法

セレクタ { ○○○は: ○○○です; }

これが基本文法になります。

《例》
「見出しh3は、フォントの色は＃666で、フォントのサイズは16ピクセルです。」をcssで記述すると…

h3 {
　color:#666;
　font-size:16px;
　　}

と、なります。
まず、デザインを加えたい対象のセレクタを記述します。この例の場合のセレクタとはh3のことになります。

続けて{　}を記述し、その中に、○○○:○○○;（プロパティ:値;）で、デザインを加えていきます。
○○○:○○○; のセットは続けていくつでも記述出来ます。

面白い効果が出せるなど、使えそうなCSSプロパティを見つけたら、今後どんどんご紹介していこうと思います！

コンテンツをプロテクトしてくれるCSS

CSSアニメーションで文字を点滅させてみよう

position:sticky;がスクロールで要素を固定するのに便利すぎた件

各種コメントタグについて

コメントタグは言語によって書き方が違います。
ややこしいので、間違えない様ここで覚えちゃいましょう。

注意!! cssのコメントタグの終了タグの直前に全角文字が入っていると閉じられません。
コメントに全角文字を使っている場合は閉じタグ*/の直前に半角スペースを入れる様にします。
*/の直前の文字が半角の場合はスペースを入れる必要はありません。

コメントを残しておくと、共同作業時や、後からメンテナンスする時の自分用としてもとても便利です。ぜひコメントアウトを活用してわかりやすいコーディングを心掛けてみましょう。