ドリル式ホームページの作り方

CSSの基本構造

ドリル式ホームページの作り方TOP  >>  Lesson3〜CSSを使った装飾〜  >>  CSSの基本構造

CSSの基本構造

@規則と規則集合

CSSの大まかな構文構造は、

@規則

セレクタ {
プロパティ:値;
}

のような@規則を冒頭に書き、そのあとに規則集合を書いていくという構造をとります。

@規則には、@charset規則、@import規則、@media規則、@page規則の4つがあり、セレクタはh1やpなど、各タグ名に対応しています。具体的には下のようになります。

@charset "UTF-8"; /* 文字コードの指定 */
@import "○○.css"; /* 他のCSSを読み込む */
@media screen {
color:#fff;
}
@media print {
color:#000;
}
 /* PC画面では白文字だが印刷するときのみ黒文字に */

h1 {
color:#000;
}
 /* h1タグに囲まれた文字の色を黒にする */

セレクタのあとには、「"半角スペース"を空けてから"{"」を打ち、改行、キーボードのTABキーで空白をとった後、「プロパティ+":(コロン)"+値+";(セミコロン)"」、また改行して、TABの後に"}"でしめます。

TABは全てのプログラム共通で、TABで取った空白は空白として認識されないので、プログラムを見やすくするのに使われます。

規則集合の省略

規則集合の記述方法の基本は上記の通りですが、h1とp要素どちらもに同じスタイルを適用したいとき、

h1 {
color:#000;
}
p {
color:#000;
}

上記のように二つ同じことを書いてももちろん問題はありませんが、下記のように",(カンマ)"で区切って省略することもできます。

h1,p {
color:#000;
}


Lesson3〜CSSを使った装飾〜

  1. htmlの骨格を作成する
  2. CSS(スタイルシート)の組込み方法
  3. CSSの基本構造
  4. @規則の指定
  5. 文字の大きさを変える
  6. 文字・背景の色を変える
  7. 文字のスタイルと太さを変える
  8. 幅と高さを変える
  9. 間隔と枠線を指定する
  10. カーソルを当てたときのリンクの色

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.