基金訓練に行ってきました。(38日目)


基金訓練(Webデザイン・プログラミング科)の38日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。

本日の内容は下記のとおりです。

1.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名を持つことは許されない。

関連記事

カテゴリー:職業訓練
.

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください