cssについて学んだことまとめ
初学者がCSSを学ぶ上で、最初に使い方を悩むであろうものについてまとめてみる
aタグ、buttonタグで使われる状態を表現するCSS
:link
:visited
:hover
:active
:focus
LVHAFの順番で記述の優先度を覚える
:link-:visited-:hover-:active-:focus
:link
通常の状態での表現
:visited
既にクリックされている（訪問されている）リンクの状態
:hover
カーソルをリンクの上に置いた時の状態
:active
ボタンが押されている間だけの状態
第1ボタン、つまり右手用のマウスではふつう一番左のボタンにのみ適用すべき
:focus
タッチデバイスでタップした時、tabキーで移動した時などの状態
基本的にはform関連、ユーザビリティ的にある方がよい
::before,::after
HTMLには書かれていない要素もどきをCSSで作ることができる
::beforeは要素の直前に要素もどきが入る
::afterは要素の直後に要素もどきが入る
具体的な使い方
出力結果：吾輩は、猫である
<h1>猫である</h1>
h1::before {
content: ‘吾輩は、’;
}
メリット
・SEOを気にせずにユーザーのための自由な表現ができる
（UIに出したいけどSEOとして不要な要素をCSSから画面に当てる）
・アイコンやフォントを疑似要素で表示できる
・position: absoluteで絶対配置にして、自分の好きな位置に配置が可能
具体的な使い方
ブログとかのカード要素の右上のラベルとかに使われている
ブログ：まじまじパーティーより引用
::backdrop-filter（IE未対応）
背景にfilterを使える
具体的な使い方
背景のすりガラスの表現等
使えるコード種類
| コード | 意味 |
|---|---|
| blur | ぼかし（pxで指定） |
| brightness | 明るさ（単位なし） |
| contrast | コントラスト（％で指定） |
| grayscale | モノトーン（％で指定） |
| invert | 階調反転（％で指定） |
| hue-rotate | 色相（degで指定） |
| opacity | 不透明度（％で指定） |
| sepia | セピア調（％で指定） |
| saturate | 彩度（％で指定） |
| drop-shadow | ドロップシャドウ（pxで指定） |
メリット
1つの画像の別々の部分に、別々のフィルターを使える（表現性が豊富）
内側の要素に影響がない
::filterとコーディング法は同じ
デメリット
対応ブラウザが少なく、実験状態
calc
css上で計算ができる
具体的な使い方
横幅が1/6になる
.hoge{
width: calc(100% / 6);
}
メリット
calc() はマージン設定を持つボックス配置、フォーム要素のサイズ変更等