CSSのアウトプット

3759 ワード
CSS CSS3 CSS設計 UI CSS テキストリンク

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() はマージン設定を持つボックス配置、フォーム要素のサイズ変更等