CSSのプロパティの値を初期値に戻す

| コメント(0)
CSSですでに指定されている値をリセットしたい場合、「initial」「revert」「inherit」「unset」を使用します。

例えば
font-size: 20px;
と指定されている要素に対し、
font-size: revert;
のように上書きすることで文字サイズを初期値に戻すことができます。

では上記4つのどれを使うかというと、
リセットしてどのような状態にしたいかによって変わってきます。

●initial
仕様で決められたプロパティ自体の初期値にリセット

●revert
親要素からプロパティの値を継承

●inherit
ブラウザのデフォルトスタイルにリセット

●unset
親要素の値を継承できるプロパティには「inherit」を適用、
そうでないプロパティには「initial」を適用

div等のブロック要素は、そのままだと幅が横いっぱいまで広がってしまいます。
「width: fit-content;」を使用することで幅が中身に合わせて可変するようになります。

以前は「display: inline-block;」や「display: table;」などでやや無理やり実装することが多かったと思いますが、よりシンプルに実装できるようになりました。

IE11以上であれば対応しています。

●CSS property: width: fit-content
CSSプロパティの「aspect-ratio」を使うと、要素のアスペクト比を指定することができます。
IE11では使えませんが、モダンブラウザであれば基本的に対応しています。
レスポンシブ対応の際に便利。

aspect-ratio: 4 / 3;

上記のように指定すると、その要素のアスペクト比が4:3になります。

これまでもwidthに対して高さをpaddingで%指定することで同じようなことができましたが、それがよりストレートに指定できることになります。
また、paddingを使う方法だと高さから幅を決めることができませんが、aspect-ratioであれば普通にheightを指定すればaspect-ratioの比率に沿って幅が決まります。
通常、CSSで :hover スタイルを設定するとスマホでも有効になってしまい、
タップしたときにホバースタイルが有効になりつづけてしまう問題があります。

メディアクエリでPCサイズのみ効くようにすることもできますが、
ピクセルではなく以下のように書くことでホバー可能なデバイスのみホバーのスタイルを有効にすることができます。

@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

また、:any-link をつけることで href 属性の中身がある場合のみホバーを有効にすることができます。

@media (hover: hover) {
  a:any-link:hover {
    opacity: 0.7;
  }
}

●参考
画像が自動で切り替わるだけ(操作なし)のスライドショーをslick.jsで実装したのですが、スマホでページをスクロールしたときに「スライドショー上で指を離すとslickの自動再生が止まってしまう」という現象がおきました。
スライドショー外をタップするとまた動き始めます。

動作的に以下のオプションが効いてしまっているような感じです。
(どちらもfalseに設定しており、PCではちゃんと効いています)

pauseOnHover : マウスが乗ったりときに自動再生を止める
pauseOnFocus : フォーカスされたときに自動再生を止める

●回避方法
スライドショーに対して以下のCSSを設定したところ回避することができました。

pointer-events: none;

ただし、上記はクリックやタップを無効にするスタイルなので
スライドショー画像にリンクをつけたい場合は使えないかと思います。

font-sizeをrem指定する際の数値まとめ

| コメント(0)
ユーザー側で文字サイズを変更できるように制作する場合、単位をremで指定すると便利です。

Can I use

すでにモダンブラウザで使用できるようになっているので、メモとしてpx毎の対応表をまとめておこうと思います。

●html要素に62.5%(10px)を指定している場合
10px → 1rem
11px → 1.1rem
12px → 1.2rem
13px → 1.3rem
14px → 1.4rem
15px → 1.5rem
 ・
 ・
 ・

●html要素に81.25%(13px)を指定している場合
10px → 0.7692rem
11px → 0.8461rem
12px → 0.9230rem
13px → 1rem
14px → 1.0769rem
15px → 1.1538rem
16px → 1.2308rem
17px → 1.3077rem
18px → 1.3846rem
19px → 1.4615rem
20px → 1.5385rem
21px → 1.6154rem
22px → 1.6923rem
23px → 1.7692rem
24px → 1.8461rem
25px → 1.9231rem
26px → 2rem
27px → 2.0769rem
28px → 2.1538rem
29px → 2.2308rem
30px → 2.3077rem

●html要素に87.5%(14px)を指定している場合
10px → 0.7143rem
11px → 0.7857rem
12px → 0.8571rem
13px → 0.9286rem
14px → 1rem
15px → 1.0714rem
16px → 1.1429rem
17px → 1.2143rem
18px → 1.2857rem
19px → 1.3571rem
20px → 1.4286rem
21px → 1.5rem
22px → 1.5714rem
23px → 1.6429rem
24px → 1.7143rem
25px → 1.7857rem
26px → 1.8571rem
27px → 1.9286rem
28px → 2rem
29px → 2.0714rem
30px → 2.1429rem

●html要素に93.75%(15px)を指定している場合
10px → 0.6667rem
11px → 0.7333rem
12px → 0.8rem
13px → 0.8667rem
14px → 0.9333rem
15px → 1rem
16px → 1.0667rem
17px → 1.1333rem
18px → 1.2rem
19px → 1.2667rem
20px → 1.3333rem
21px → 1.4rem
22px → 1.4667rem
23px → 1.5333rem
24px → 1.6rem
25px → 1.6667rem
26px → 1.7333rem
27px → 1.8rem
28px → 1.8667rem
29px → 1.9333rem
30px → 2rem

●html要素に100%(16px)を指定している場合
10px → 0.625rem
11px → 0.6875rem
12px → 0.75rem
13px → 0.8125rem
14px → 0.875rem
15px → 0.9375rem
16px → 1rem
17px → 1.0625rem
18px → 1.125rem
19px → 1.1875rem
20px → 1.25rem
21px → 1.3125rem
22px → 1.375rem
23px → 1.4375rem
24px → 1.5rem
25px → 1.5625rem
26px → 1.625rem
27px → 1.6875rem
28px → 1.75rem
29px → 1.8125rem
30px → 1.875rem

CSSの「position: sticky」で要素を追従

| コメント(0)
CSSの「position: sticky」を使うことで、特定の範囲内で要素を追従させることができます。
JavaScriptで複雑な処理を書くことなく追随ナビなどを実装できます。


2022年の9月現在、モダンブラウザではサポートされています。

使い方
使い方は簡単で、追従させたい要素(デモの黄色の要素)に以下のスタイルを当てます。

position: sticky;
top: 0;

top は追従する際の上部からの位置です。
20pxなど指定すると画面上部からその数値分空けた状態で追随します。


注意点
・position: sticky を当てた要素は、その要素の親要素の範囲内で追随します。そのため、親要素のほうが高くないと追随しません。
親要素に高さを指定するか、同じ親要素内に高さのある別の要素が必要です。
・top も指定しないと追随しません。
・親要素、または祖先要素にoverflow: hidden を指定していると追随しません。

スムーススクロールさせるCSS

| コメント(0)
アンカーリンクでスムーススクロールさせたい場合、以前はJavaScriptを使う必要がありましたが、2022年8月現在は以下のCSSだけで実装することができます。

html {
  scroll-behavior: smooth;
}

また、ヘッダー分スクロール位置をずらす場合も、
アンカーリンクの対象に以下を当てるだけで実装できます。

例)sectionにアンカーリンクで移動する際に80pxずらす場合
section {
  scroll-margin-top: 80px;
}

●対象ブラウザ
scroll-behavior

scroll-margin-top
x番目の要素にスタイルを当てる擬似クラス nth-child ですが、クラス名と合わせて使用すると思った通りの動きをしないことがあります。

<p>テキスト</p>
<p>テキスト</p>
<p class="style">テキスト</p>
<p class="style">テキスト</p>

例えば上記のようなhtmlがあったときに、.styleクラスを持った2番目の要素に色をつけようと、
以下のように指定しても色が付きません。

.style:nth-child(2){
  color: red;
}

この場合は「子要素の2番目が.styleクラスを持つ場合」という条件になるため、致する要素がなくスタイルが適用されません。

.style:nth-child(3){
  color: red;
}

上記のようにすると3番目の文字色が赤になります。

ちなみに、現在(2022年6月)ではまだほとんどのブラウザで使用できないのですが、新しい記述方法として以下のような指定が追加されたようです。

p:nth-child(2 of .style){
  color: red;
}

これがまさに上記でやろうとしていたことで、
.styleクラスを持った2番目の要素に色が付きます。
各ブラウザの実装に期待です。

●対応状況
もうずっと便利に使っていますが、度々書き方を忘れて調べに行くことがあるので備忘録です。

画面サイズによってPC向け、スマホ向け等画像を切替えたい場合に、HTML5.1 で追加された<picture>タグが便利です。

<picture>
  <source media="(max-width: 767px)" srcset="img_sp.jpg"/>
  <img src="img_pc.jpg" alt="画像です">
</picture>

上記のように記述することで、

・画面サイズ767px以下では img_sp.jpg を表示
・それ以上では img_pc.jpg を表示

となります。

(max-width: 767px) の部分は min-width: ○○px とすることで、○○px以上でこの画像を表示、とすることもできます。

html は少しごちゃつくものの、以下のような利点があるのでとても便利です。
・htmlのみで実装できる
・条件に当てはまった画像のみ読み込まれる

ちなみにIE11以下が非対応なのですが、icturefill.js を読み込むことでJSで対応させることができます。