NO.51 CSSを使うときの基本的な記述法①

CSSを使うと、ページ内・及び部分的にデザインを指定する事が出来ます。
HTMLタグでも出来るような色の設定から様々な配色・レイアウト等まで幅広いデザインを行えます。
ページ全体で一括して指定する事も出来れば、各タグ内・ページの一部分に絞ったデザインも可能な上、
外部CSSファイルを作って、複数のページのデザインを一括指定する事も可能になります。
実際CSSを使わなくてもWebページ製作は出来ますが、デザイン面を凝ったりする際には役立ちます。何より、作業が非常に楽になります。

CSSを記述する前に・・・

↑のようにmetaタグでCSSを使用することを宣言しておくのが正しい記述法だそうです。



ページ全体のCSS指定
HEAD内に以下のように書き込むと、ページ全体の文字サイズを15ピクセルの大きさに統一する事が出来ます。

HEAD内にCSSを記述する時は、↑のように<style type="text/css">～<style>内に書き込みます。
<style>～</style>内に書いても動くようですが、一応type属性を指定しておいた方がいいです・・
さらにCSS未対応のブラウザを考慮して、<style>の中は<!--～-->で括って下さい。
俺はユーザーの事はあまり考えないので滅多にそういう事はしませんが・・
ちなみにこれは後で紹介していきますが、body{}でページ全体の指定、font-size:は文字サイズ指定を表します。



各タグの属性値としてCSSを記述する
タグ内に属性値としてCSSを記述する時は、style属性を使います。
基本はそのタグで指定された内容と、CSSで指定されたデザインが合体する事になりますが、
両者が競合する場合はCSSで指定した内容が優先されるようです・・
FORM部品のデザインなんかはほとんどCSSを使わないと出来ません。

これはfontタグのcolor属性指定と同じ事をCSSで行ったパターン
uタグの下線効果と、CSSでの書体指定(System)が両方反映される

HTMLタグとCSSでそれぞれ色を設定した場合



※今回から若干ページの作り方を変えました。
・textareaをreadonly(読み取り専用)にしました
・配色


前に戻る　次に進む
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送