9/27 金 子孫セレクタ

動画が再生できない場合
Safariの環境設定のセキュリティを
下記の設定にすると再生が可能な場合があります。

　大前提● 復 習：CSSってなんだった？ 

・HTML=骨組み
・CSS=見た目の着せ替え=デザイン

前回までの復習

• CSSはボックスの組み合わせでできている。(ボックス= divボックス)
• ボックスの幅＝(中身の幅 + 余白の幅 + ボーダーの幅 + マージンの幅)
• ※IDセレクタ＝1ページに1回だけ。※クラスセレクタ＝1ページに複数回使用可能。

• CSSをHTMLにリンクして適用する
  　<link href="style.css" rel="stylesheet" type="text/css">
• グループ化とは
  　＝文字(見出し)・本文・コピーライト・段落をdivボックスに入れること。
• 2段組みや3段組みの方法＝フロートに左・右を入れる。
• プロパティの項目からフロートしたものの次の要素に解除(clear)を指定
  
  << CSSの読み方>>
• 読みづらいCSSプロパティの正しい読み方 ...
•  何て読む!? 今さら聞けない読みにくいCSSプロパティー名

 子孫セレクタについて   利点：特定の構造環境でのみ有効なルールを定義できる

body { backgroundcolor: #999;} 
 body #container {padding: 20px; margin-right: 50px; margin-left: 50px;   border: 0px ; backgroundcolor: #FFF;}

body #container #keyword

{text-align: right; margin: 0px;    padding: 0px;}  

body #container h1{font-size: x-large; 〜} 




body #container h2{font-size: medium;  〜} 
body #container #figbox { padding: 12px; border: 0px ;}
body #container #figbox #figure { float: left; margin-right: 1em;}

  
body #container address { clear: left;}

DivボックスにCSSを使う

・(1)　DIVボックスをつくる 　　　　　= 上のバー「挿入」→レイアウトオブジェクト→Div　タグで作成 ・(2)　DIVボックスに名前をつける 　　　　　= 出てくるDivパネルにクラスかidを記入 ・(3)　DIVボックスのCSSルールを作成する 　　　　　= CSSスタイルの新規CSSルールボタンをクリック ・(4)　DIVボックスのCSSをデザインする 　　　　(余白／マージン／ボーダー=境界線)

(1)

(2)

(3)