「職業訓練」カテゴリーアーカイブ

「基金訓練」についての投稿です。

職業訓練

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

コメントする


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

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

１．文字リンクのマウスオーバー設定の仕方。

  • マウスオーバーしているときと、していないときの両方のスタイル指定する。
  • マウスオーバーしていないときのセレクタは、a要素までをセレクタに含める。
  • マウスオーバーしているときのセレクタは、a:hoverのように、していないときのセレクタに擬似クラス:hoverを加えて記述する。
  • マウスオーバーの有無で、colorやtext-decorationの値を設定する。

２．position:absolute　で、画像を配置するとき。

  • 配置の基準となるボックスに、position:relative　を設定する。

３．text-decorationの値。

none
標準。
under-line
下線をつける。
over-line
上線をつける。
line-through
取り消し線をつける。
blink
点滅させる。

今日のポイント

  • ブロックレベル要素のフロート時、widthの値は必須。

職業訓練

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

コメントする


基金訓練(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名を持つことは許されない。