HTML 入門トップページ

« 戻る 次へ »

目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
  3. 基礎的なタグをマスターしよう
  4. HTML 文書を検証してみよう
  5. スタイルシート
    1. CSS ファイルを準備する
    2. CSS ファイルを読み込む
    3. 表示を確認しておこう
    4. CSS にデザインを記述する
    5. 複数のセレクタに適用する
    6. classを使う
    7. 表のデザイン
    8. 図のデザイン
    9. HTML内にスタイルを記述する
  6. フォームを使ってみよう
  7. 参考サイト

スタイルシート

CSS にデザインを記述する

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

style.css
p {
  color: #0000FF;
  text-indent: 20px;
}

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

ブラウザでの表示結果

04-03

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

style.css
/* このような書き方も可能 */
p{color:#0000FF;text-indent:20px;}
« 戻る 次へ »