◆本日使用したタグと属性
[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;
}
・ブラウザ表示例
この文字を赤にする