HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎13. CSSとは

      2017/07/11   hatano

この章について

下記のcss01.zipをダウンロードしてstyle.cssに実際に記述してみましょう。
css01

CSSとは

CSSはHTMLをどのように装飾するかを指定するものです。
CSSはカスケーディング・スタイルシート(Cascading Style Sheets)の略です。カスケーディングとは「連鎖的に伝わる」という意味で、装飾の上書きや継承ができるのがCSSです。

CSSの構造

CSSは「セレクタ」を使いHTMLのどの部分を装飾するかを指定し「プロパティ」で装飾の種類を指定します。プロパティは複数指定ができ{ }(波括弧)内に記述します。プロパティと値の区切りには :(コロン)。プロパティの終わりは ;(セミコロン)>をいれます。
セレクタの構造

一例として

セレクタは複数指定もできます。セレクタとの区切りには ,(カンマ)を入れます。
セレクタをカンマで区切る

一例として

CSSの記述のポイント

CSSの記述の際に、インデント、改行、半角スペースは必須ではありません。下記のコードは、どれも同じ表示結果になります。

どの記述方法でもCSSとして利用できますが、HTMLと同じく、読みやすく、分かりやすく記述することが重要です。一般的なのは3番目の記述方法です。インデントはhtmlと同じで、半角スペース2個、またはタブ文字を使用します。
ポイントは下記の通りです。

  • {}で改行する
  • プロパティごとに改行する
  • プロパティの前はインデントする

半角スペースは下記の場所でも挿入できます。

  • セレクタの後
  • セレクタにつけたカンマの後
  • プロパティのコロンの後

半角スペースの挿入箇所

CSSのコメント

CSSでもコメントが使えます。HTMLのコメントと記述が違うので注意してください。CSSのコメントは下記のように記述します。

CSSのコメント

コメントされたブロックは表示(レンダリング)されません。一行だけでなく複数行をコメントにすることもできます。コメントはメモを残したり、CSSを一時的に無効にしたりすることができます。

まとめ

  • CSSは、HTMLを装飾することができる
  • どの部分を装飾するかを指定「セレクタ」
  • 装飾の種類を指定「プロパティ」
  • 改行、スペース、インデント、コメントを使い分かりやすく、読みやすくする

広告

 - HTML・CSS