119
今日のメモ
・属性セレクタ
＞「[]」をつけると属性名自体をセレクタに指定する事ができる
[class] {
background-color: crimson
color: white
padding: 5px
}
・擬似要素
＞動的に発生する事象を要素として指定する
link ＞まだ訪問されていないリンク
visited ＞訪問済みのリンク
focus ＞フォーカスされている
hover ＞マウスポインタが乗っている
a:hover {
text-decoration: none;
background-color: lightgrey;
}
・構造的な擬似要素
:first-child ＞最初の子要素
:last-child ＞最後の子要素
:only-child ＞唯一の子要素
- リストタグの最初だけに反映
li:first-child {
background-color: steelblue;
}
## 単位
- 絶対的なサイズ
- in (インチ) 1inch = 2.54cm = 25.4mm
- mm (ミルメートル)
- cm (センチメートル)
- pt (ポイント) 72pt = 1inch = 6pc
- pc (パイカ) 1pc = 12pt
- 相対的なサイズ
- ex (“x”の高さを基準(=1)とするときのサイズ)
- em (一文字分の高さを基準(=1)とするときのサイズ)
- px (ピクセル) 画面の光点(ドット)一つ分が1px
- % (パーセント) 何かの基準に対しての割合で決めるサイズ
# 単語による指定方法
## プロパティに対して決まっているもの
- align
center / left / right
- vertical-align
middle / top / bottom
- text-decoration
underline / none / …
- margin
auto (余白を自動的に調整する→左右に指定すると、ブロック要素が中央寄せされる)
## CSSのルールにつていのもの
- inherit
親要素の設定を継承する
→ 通常、継承されない設定を強制的に継承させられる
<p>
<a>ここには親要素であるpタグのcolorの指定は有効ではない</a>
</p>
## url
- url(“urlを書く”)
## ダブルクオーテーションなどを使う時の注意点
ダブルクオーテーションは、文字列として使いたい時には\でエスケープする
ex) content: “ここに文章を書いています。\”CSS\”の勉強をします。”;
ex) content: “\\3,500-”
# 色の指定方法
## 色名で指定する
特定の色でないと指定できない
W3Cという団体が決めている色
## RGBを利用する
0~255までの数字を赤、緑、青の順に指定する
0が一番弱い,255が一番強い
### 10進数を利用する
rgb(赤の値、緑の値、青の値)
rgb(127, 255, 127)
### 16進数を利用する
#赤の値緑の値青の値
#88ff88
## HSLを利用する
色相、彩度、明るさを指定する
hsl(色相、彩度、明るさ)
hsl(120, 100%, 100%)
## rgb()とhsl()はアルファチャンネル(透明度)が使える
rgba(255, 255, 127, 0.5)
hsla()
# フォントの指定
## font-family
font-family: フォント名;
- serif 明朝体
- sans-serif ゴシック体
- monospace
すべての文字が同じ幅に設定されたフォント → プログラミングのコードを表示するときに使われる
font-family: Courier;
→ Courierが、閲覧者の手元で存在しないフォントなら、初期値のフォントが指定される
### 明朝体であることを最終的に固定したい。
font-family: “Times New Roman”, Times, serif;
→”Times New Roman”から順に適用される
#文字の太さの指定
## font-weight
- 言葉で指定する
normal: 通常
bold: 太い
bolder: やや太い
lighter: やや細い
inherit: 親要素の指定を引き継ぐ(継承)
- 数字で指定する
100~900で指定する
100単位で指定されることが多い
normal = 400
bold = 700
フォントファイルで対応しきれない場合には、指定が無視される場合がある。
- フォントファイルのboldスタイルやlightスタイルを利用する
- それらが無い場合はブラウザがフォントファイルを元にエミュレート(演算)して実現する
- エミュレートがうまくいかない場合には無視される
