-
-
ページ
カテゴリー
-
基金訓練に行ってきました。(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名を持つことは許されない。
カテゴリー: 職業訓練
コメント / トラックバック: 0個
こんなん、いました。
大阪の本町に坐摩神社というのがあって、
その神社の夏祭りでこんなん見つけたんで載せておきます。一昨日、撮ったものです。
「角さん狸」です。
普通の信楽焼きの狸なら、股間に大きなタマがぶら下がっているのですが、TV局のMBSのイベント用に作られたものなので、流石に、それは付いていないようです。(作った人の抵抗でしょうか。股間が妙に膨らんでいます。)
ちなみに神社の名前は、「いかすりじんじゃ」と読むそうで、「ざまじんじゃ」ではありません。でも、通称「ざまじんじゃ」でとおっているそうです。ほぼ、100%の人が「ざまじんじゃ」って読んじゃうんだから、そう呼ばれても仕方ありませんね。
カテゴリー: フォトグラフ
コメント / トラックバック: 0個