8月2日 (土)講義内容- 実技(HTML・CSS基礎)3-

Pocket

◆本日使用したタグと属性

[id名とclass名]
・id → 要素に対してID(固有の識別名)を付けることができます。スタイルシートのセレクタ(スタイルの適用対象)として使用されるほか、スクリプトやリンクなどの参照先として使用される
・class → 要素に対してクラス名(分類名)を付けることができます。主にスタイルシートのセレクタ(スタイルの適用対象)として使用される ※id名は1ページで一回のみ使うことができ、classは複数回使うことが可能

CSSプロパティ[フォント]
◎text-align 文字の揃え方を指定するプロパティ (p.189)
◎text-decoration テキストに下線・上線・打ち消し線を付けたり、点滅させる際に使用するプロパティ (p.186)
・none 初期値。テキストに線は付かず、点滅もしない
・underline テキストに下線が付ける時に使用
・overline テキストに上線が付ける時に使用
・line-through テキストに打ち消し線が付きます。
・blink テキストが点滅させる。今ではほとんど使わない

CSSプロパティ[画像]
◎background-image:url("表示させたい画像のパス") 背景画像を指定する際に使用するプロパティ。ダブルクォーテーションはあっても無くてもどちらでも良い (p.248)
◎background-repeat 同じ画像をリピートさせたい時に使用するプロパティ (p.251)
:repeat-x 「background-repeat」にを指定すると、横一列だけ表示される
:repeat-y 「background-repeat」に指定すると、縦一列だけ表示される
:no-repeat background-repeat」に指定すると、りピートされなくなる。backgroundと同じ結果になる
◎backgrand-position エリア内で、背景画像の表示開始位置を指定するプロパティ。 (p.255)
:center 中央に表示
:left 左に表示
:right 右に表示
:top 上に表示
:bottom 下に表示
※数値で開始位置の座標指定も可能
◆デフォルトでついてしまう余白をなくす設定

CSSの最初に全称セレクター(アスタリスク*)でマージンとパディングを0に設定する指定を記述する

{
margin:0;
padding:0;
}
※この、隙間をなくす設定をしない場合はブラウザがタグに対して勝手に隙間をとってしまいます。

◆CSSセレクタ指定の優先順位

→100点     id
→10点       class
→1点         タグ
この点数が多いほど適用の優先順位が高くなる

例:文字を赤色にする
[HTMLの指定]
<span class=”red”>この文字を赤にする。</span>

[CSSでの指定]
class指定のみ → 10点
.red
color:red;
}
タグとclass指定 → 11点
span.red
color:red;
}

下の指定の方が優先順位が高くなる

注意!!
CSSでタグとclass名、またはタグとid名で指定する時、間に半角スペースを入れてしまうと、意味が変わってしまいます。

例1

○下記の指定の場合は、spanタグにクラス名が付いています。
HTML
<span class=”red”>この文字を赤にする。</span>

・CSS
span.red
color:red;
}

・ブラウザ表示例
この文字を赤にする。

例2

○下記の指定の場合は、spanタグに囲われている中の違うタグにクラス名が付いています。
・HTML
<span>この文字を<em class=”red”>赤。</em>にする。</span>

・CSS
span .red
color:red;
}

・ブラウザ表示例
この文字をにする

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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