HTML 入門

スタイルシートでデザインを作ろう

CSS にデザインを記述する

実際に style.css にデザインを記述してみよう．

style.cssコピー
@charset "utf-8";

p {
  color: #0000ff;
  text-indent: 16px;
}

CSSの冒頭には @charset "utf-8"; という命令を入力して，使用する文字エンコーディングを指定します．この命令は必ずしも必要になるわけではありません．しかし，このようにスタイルシートで使う文字エンコーディングを定義しておくことで，スタイルシート内で日本語文字などの非 ASCII 文字を利用できるようになります．この定義がなければ文字化けが発生する状況も考えられます．

上の例では，スタイルを適用したい要素に p タグを指定しています．その後，{ } で囲います．ここで，スタイルを適用したい対象となる要素を セレクタ と呼び，カッコの部分を 宣言ブロック と呼びます．宣言ブロックの中には プロパティ: 値; のセットを記述します．ここで，コロン (:) とセミコロン (;) の使い分けに注意しよう．上の例では，p タグ内部の文字の色を青に，字下げを 16px に変更していることになります．ファイルを保存してブラウザで確認すると次のようになります．なお，多くのブラウザで標準の文字サイズが 16px なので，字下げ幅は全角一文字分になっているはずです．（HTMLのサンプルを見る ／ CSSのサンプルを見る）

なお，CSS も HTML と同様にインデントや改行が無くても構いません．しかしながら人間にとっては読みにくいので適切なインデントを行うべきでしょう．また，コメントは /*   */で囲います．HTMLファイルのコメントアウトと同様に，Visual Studio Code を使っている場合は，ctrl + / で（macOS では ⌘ + / で）選択範囲（行）がコメントになります．

index.html（抜粋）コピー
@charset "utf-8";
/* このような書き方も可能 */
p{color:#0000ff;text-indent:16px;}

目次に戻る