基金訓練(Webデザイン・プログラミング科)の38日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。
本日の内容は下記のとおりです。
１．CSSのセレクタについて
ⅰHTMLの特定の要素名
- 記述方法
- 要素名 ｛ プロパティ ： 値 ； ｝
- 例
- ・HTMLのみで記述
<h4 font color=red>文字は赤</h4>
・CSSを使って記述
CSS部（<style>内)
h2 { color : red ; }HTML部
（<body>内）
<h4>文字は赤</h4> - ブラウザの表示
-
文字は赤
ⅱクラス
- 記述方法
- ．クラス名 ｛ プロパティ ： 値 ； ｝
- 例
- ・HTMLのみで記述
<h4 font color=red>文字は赤</h4>
<h4>文字は黒</h4>・CSSを使って記述
CSS部（<style>内)
.red { color : red ; }HTML部
（<body>内）
<h4 class=”red”>文字は赤</h4>
<h4>文字は黒</h4> - ブラウザの表示
-
文字は赤
文字は黒
ⅲ要素+クラス
- 記述方法
- 要素名．クラス名 ｛ プロパティ ： 値 ； ｝
- 例
- ・HTMLのみで記述
<h4 font color=red>文字は赤</h4>
<h4>文字は黒</h4>
<h5>文字は黒</h5>・CSSを使って記述
CSS部（<style>内)
h4.red { color : red ; }HTML部
（<body>内）
<h4 class=”red”>文字は赤</h4>
<h4>文字は黒</h4>
<h5 class=”red”>文字は黒</h5> - ブラウザの表示
-
文字は赤
文字は黒
色は黒
ⅳID
- 記述方法
- ＃ID名 ｛ プロパティ ： 値 ； ｝
- 例
- ・HTMLのみで記述
<h4 font color=red>文字は赤</h4>
<h4>文字は黒</h4>・CSSを使って記述
CSS部（<style>内)
#red { color : red ; }HTML部
（<body>内）
<h4 ID=”red”>文字は赤</h4>
<h4>文字は黒</h4> - ブラウザの表示
-
文字は赤
文字は黒
ⅴID+クラス
- 記述方法
- 要素名＃ID名 ｛ プロパティ ： 値 ； ｝
- 例
- ・HTMLのみで記述
<h4 font color=red>文字は赤</h4>
<h4>文字は黒</h4>
<h5>文字は黒</h5>・CSSを使って記述
CSS部（<style>内)
h4#red { color : red ; }HTML部
（<body>内）
<h4 id=”red”>文字は赤</h4>
<h4>文字は黒</h4>
<h5 id=”red”>文字は黒</h5> - ブラウザの表示
-
文字は赤
文字は黒
色は黒
ⅵ親セレクタ+子セレクタ
- 記述方法
- ＃ID名1 ＃ID名2 要素名1 要素名2 ｛ プロパティ ： 値 ； ｝
- 例
- ・HTMLのみで記述
<p>段落の中で<u>強調</u>しています。</p>
<p>段落の<em><font color=”red”>中で強調</font></em>しています。</p>
<p>段落の<em><font color=”red”>中で<u><strong>強調</strong></u></font></em>しています。</p>
<p>段落の<em>中で<u>強調</u></em>しています。</p>・CSSを使って記述
CSS部（<style>内)
#all #boxA p em u {
font-weigt: bold; }
#all #boxA p em {
color: red;}HTML部
（<body>内）
<div id=”all”>
<div id=”boxA”>
<p>段落の中で<u>強調</u>しています。</p>
<p>段落の<em>中で強調</em>しています。</p>
<p>段落の<em>中で<u>強調</u></em>しています。</p>
</div>
<div id=”boxB”>
<p>段落の<em>中で<u>強調</u></em>しています。</p></div>
</div> - ブラウザの表示
-
段落の中で強調しています。
段落の中で強調しています。
段落の中で強調しています。
段落の中で強調しています。
今日のポイント
- 同じHTML文書の中では、複数の要素が、同じID名を持つことは許されない。
