HTMLとCSSが分かりやすく学べるサイト

  1. ホーム
  2. HTML・CSS
  3. 基礎13. CSSとは

基礎13. CSSとは

  1. 公開日:2016年04月05日
  2. 最終更新日:2023年03月08日

HTML・CSS

この記事をシェアする:

CSSとは

CSSは、HTMLの構造をどのように装飾するかを指定するものです。
CSSは、カスケーディング・スタイルシート(Cascading Style Sheets)の略です。
カスケーディングとは「連鎖的に伝わる」という意味で、装飾の上書きや継承ができるのがCSSです。
CSSで行う装飾は、色やサイズだけでなく、余白や構造の指定などもあり、HTML以上に覚えることが多くなります。

CSSの構造

CSSは「セレクタ」を使って、装飾する箇所を絞り込み「プロパティ」で装飾を指定します。
プロパティは、{ }(波括弧)内に記述します。
プロパティと値の区切りには :(コロン)。
プロパティの区切りには ;(セミコロン)をいれます。
セレクタの構造

一例として


p {
  font-size: 16px;
  font-weight: bold;
}  

複数のセレクタに対して、プロパティを一括指定もできます。
その場合は、セレクタの区切りに ,(カンマ)を入れます。
セレクタをカンマで区切る

一例として


h1,
p {
  font-size: 16px;
  font-weight: bold;
}  

CSSの記述のポイント

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


h1,p{font-size:16px; font-weight:bold;}  


h1,p{
font-size:16px;
font-weight:bold;
}  


h1, p {
  font-size: 16px;
  font-weight: bold;
}  

どの記述方法でも、CSSは指定できますが、HTMLと同じく、読みやすく、分かりやすく記述することが重要です。
制作の現場でもよく使われるのは、3番目の記述方法です。
インデント(字下げ)は、HTMLのインデントと同じく、半角スペース2個、または、タブ文字を使用するケースが多く見られます。
ポイントは下記の通りです。

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

半角スペースは、下記の場所でも挿入できます。
また、半角スペースは、いくついれても表示に影響はでません。

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

半角スペースの挿入箇所

CSSのコメントアウト

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

CSSのコメント

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


/* CSSのコメント */


/* 複数行のコメント */

/*
h1{
  font-size: 20px;
}
*/

練習用ファイル

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

まとめ

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