[前期の応用1] 子孫セレクタとは？スタイルシート３種類の使い分け 


これまでの復習として
  • CSSはボックスの組み合わせでできている。(ボックス= divボックス HTMLタグによるボックス)
  • ボックスの幅＝(中身の幅 + 余白の幅 + ボーダーの幅 + マージンの幅)
  • ※IDセレクタ＝1ページに1回だけ。※クラスセレクタ＝1ページに複数回使用可能。
  • CSSをHTMLにリンクして適用する
    　<link href="style.css" rel="stylesheet" type="text/css">　　　　※href=""の.cssの記述は保存している場所によって変わる。

  • 教科書に書いてある「グループ化」とは
    　＝文字(見出し)・本文・コピーライト・段落をdivボックスに入れること。

-------------------------

「DivボックスにCSSを使う」方法とは？

DivボックスにCSSを使う

・(1)　DIVボックスをつくる= 上のバー「挿入」→レイアウトオブジェクト→Divタグで作成

・(2)　DIVボックスに名前をつける= 出てくるDivパネルにclassかidを記入

・(3)　DIVボックスのCSSルールを作成する= CSSスタイルの新規CSSルールボタンをクリック 

・(4)　DIVボックスのCSSをデザインする

(余白／マージン／ボーダー=境界線／文字色／色背景色)


(1)

DIVボックスの名前＝iroiro



(2)

classなのでセレクタ名は.iroiro





(3)例えば
文字サイズ12pt 文字色#c00　背景色＝#39C 高さ400px 横幅300pxのデザインにする場合は
以下のようなコードになる
-----------------------------------------------------------------------

つまり、
(1)箱を作る→(2)箱に名前をつける→(3)その箱用の新規cssルールを作る→(4)その箱用のデザインを決める。→Dreamweaver上でできたものがブラウザでサーバ上で正しく同じように動作するか確認する。
をくりかえします。
-----------------------------------------------------------------------


確認して違ったところはどう直すの？

CSSスタイルのパネルから編集したい箱の名前をダブルクリックし
その設定のパネルを開いて確認します。

CSSスタイルは、非常によく使うパネルです。
これが画面上に出ていない状態で編集している人は
何か不便なことをして編集に混乱している場合がほとんどです。




↑
例：ザッカロクナナのCSSスタイルのパネルはこうなっています。

このうち、bodyからaddressまでの18個は
そもそも存在しているHTMLタグにCSSスタイルを設定しデザインしたもの、
それ以外の下から４個はdivボックスに作成者が任意で名前をつけたものです。


body=表示される部分全体を表すタグ
*＝ 全称セレクタ(アスタリスクで示され，あらゆる要素に適用)
img =画像のタグ
h1=一番大きい見出しのタグ
h2=２番目に大きい見出しのタグ
h3=３番目に大きい見出しのタグ
p=段落のタグ
ul=リストタグ(順序のない)
li=リストの中の項目タグ
ol=リストタグ(順序のある)
a : = リンクのタグ(:以降は、がリンクがどういう状態になっているかによってデザインを変える場合)
:link=未訪問のリンク :visited=訪問済みのリンク :hover=マウスをリンクの上に持って行った時の表示
strong = 強調タグ
table=表のタグ
th=表の項目のタグ
td=表の項目の見出しのタグ
address=作成者表示

#wrap = wrapというid名をつけたdivボックス
.item= itemというclass名をつけたdivボックス
.photo = photoというclass名をつけたdivボックス
.memo = memoというclass名をつけたdivボックス




-----------------------------------------------------------------

以上をまず理解したものとして、
次の説明に進みます。


 子孫セレクタとは

例えば、5番目のcssでは
bodyというHTMLタグの中のcontainerというdivボックスの中のh2だけを
このデザインにしたい

と言う指定になります。

ごく限られた範囲に特別にデザインを指定する場合にはとても有効な手段です。



が、初心者によくある失敗として、
「Dreamweaverのデザインビュー画面をクリックして
そのままCSSスタイルのパネルの一番下にある新規CSSボタンを押す」
と
どんどん子孫セレクタを自覚がないまま増殖してしまい、
どのCSSが一番有効になっているのか自分で判別できなくなって
デザイン操作不能に迷宮入りしてしまうことがあります。

CSSセレクタの効果的な使い方


↑このサイトの説明が大変わかりやすいです。

CSSスタイルのパネルを自分がデザインしやすいように整頓し、
不要に増殖している子孫セレクタは削除しましょう。


基本中の基本として、CSSは「下に書いたもののほうが効力が強い」です。

スタイルシート3種類の適用方法の練習


↑でも効力の強さを勉強しましたが、
それぞれの種類の記述方法の中でも
「そのコードの下に書いたもののほうが効力が強い」です。

コメント

コメントを投稿