今まで活用していなかったCSS

ページ内リンクがスムーズスクロールに変化

html{
  scroll-behavior: smooth;
}

display:list-item

ネガティブマージン

visibility: hidden … 指定した場合は、その要素は非表示になるが、要素が占有していた領域はそのまま残る。
display: none … その要素が(存在していないかのように)非表示になる。

word-wrap: break-word … 改行

display: table … を使用時、table-layout: fixed; を使用すると幅を固定できる。※witdth指定する。

order: -1 … flexboxで順番を変えるとき、-(マイナス)を設定すると、一番先頭にくる。

heightとline-height を同じにすると、上下中央揃えになる。

nav > li

outline:0; … フォーカス時に青い枠線が表示されないようにする

 … aria-hidden=”true”は、スクリーンリーダーで読み取られないようにするための設定。単純に装飾目的でアイコンを利用する場合は、これを付けるように心がける。

数値がはみ出さないようにするには … white-space:nowrap;

アニメーションを定義するには、animationプロパティを用いて次のように記述します。
animation: [アニメーションの名前] [一回のアニメーション周期]

@keyframes [アニメーションの名前] {
/* アニメーションの途中のスタイリング */
}

CSS3

li[class^=”●●●”]{  } … 「特定の文字から始まる要素」の選択

li[class$=”●●●”]{  } … 「特定の文字で終わる要素」の選択

li:nth-child(数字) … 「ある要素の中でn番目の要素」の選択

li:first-of-type {  } … 「ある要素の中にある、最初の特定の要素」の選択

li:last-of-type {  } … 「ある要素の中にある、最後の特定の要素」の選択

li:nth-of-type(数字) { … } … 「ある要素の中にある、n個目の特定の要素」の選択

opacity

background:rgba(●●,●●,●●,透明度);

box-shadow: x座標 y座標 ぼかし 色;

box-shadow: x座標 y座標 ぼかし 色 inset; … 内側の影

border-radius

background: linear-gradient( 最初の色, 後の色 ); … 線形グラデーション

background: radial-gradient( 内側の色, 外側の色 ); … 円形グラデーション

div:hover
transition: 滑らかに変化させる属性( width, height など) linear 秒数(s);滑らかな変化
例)transition : background-color linear 0.5s;
例)transition : all linear 0.5s;
————————————–
linear: 速度は変わらない
ease: ゆっくり始まりゆっくり終わる
ease-in: ゆっくりと始まる
ease-out: ゆっくりと終わる
————————————–

div {
animation: mover linear 1.0s infinite alternate;
}

@keyframes mover {
0% {
background-color: #000;
border-radius: 0px;
}
100% {
background-color: #fff;
border-radius: 160px;
}

}