CSSの文法とホームページに適用させる3つの方法

  • このエントリーをはてなブックマークに追加

CSSの文法

HTMLに文法があったように、CSSにも文法があります。
例えばp要素にCSSでデザインをしたい場合、まずは下のように書きます。

p {}

このように装飾したい要素を指定して、{}」(波括弧)の内側に装飾する内容を書き込んでいきます。
ちなみに、装飾を適用させる対象となる要素を「セレクタ」波括弧の部分を「宣言ブロック」と呼びます。

試しに文字を20px、太字にする場合は宣言ブロックへ以下のように書きます。

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

宣言ブロックの中は、「プロパティ」「値」の順に書き込みます。
上記の例だと、プロパティは「font-size」「font-weight」、値は「20px」「bold」という事です。
これでp要素で囲んだ中の文字はすべて「20px・太字」の文字に変化します。

CSSを書くとき、プロパティの後ろには「:(コロン)値の後ろには「;(セミコロン)を必ず書きこんでください。

CSSを書いているのに、要素に変化がない時に注意深くチェックすると、「コロンとセミコロンを間違えている」だとか、「抜けている」ということが時々あります・・・
:(コロン);(セミコロン)は間違えたり忘れたりしやすい要素ですので、注意してください。

CSSは要素を指定して、プロパティ、値を入力する

先ほど説明したように、CSSを使って装飾したい要素を指定して、それからどのような装飾を加えるのかを書き込んできます。
「どこに?」を指定してあげて、次に「何を?」を教え、最後に「具体的な内容」を伝える。と覚えておいてください。

事例では「p」を指定しましたが、「h1」に書き換えてあげれば、h1要素の文字が20px、太字の文字に装飾されます。

まとめ

・CSSで装飾したい「要素」を指定して、「{}」(波括弧)
・波括弧の内側には「プロパティ」「値」の順に書き込む
・プロパティの後ろには「:(コロン)」
・値の後ろには「;(セミコロン)」
・CSSの適用は「HTMLファイルに直接書き込む」「専用のCSSファイルを作成して読み込ませる」「HTMLタグに直接書き込む」と3つの方法がある
・「専用のCSSファイルを作成して読み込ませる」方法を主に使うと変更にかかる手間が省ける

  • このエントリーをはてなブックマークに追加

新潟県地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301