コメント(0)Webページをキーボード操作で閲覧しやすくする施策になります。Tabキーでページ内のリンク要素を選択していく際、<a>タグや<button>タグなどはデフォルトで選択できるようになっていますが、JavaScriptで<div>タグや<span>タグなどをボタンとして使用している場合はそのままでは選択されません。●Tabキーで選択できるようにするtabindex="0"をつけることでTabキーで選択できるようになります。</div>●Tabキーで選択できないようにする逆にTabキーで選択できないようにしたい場合はtabindex="-1"をつけます。コメント(0)毎回忘れてしまうので見返せるようにメモします。使うことで揃えることができます。指定することで実装できます。コメント(0)CSSですでに指定されている値をリセットしたい場合、「initial」「revert」「inherit」「unset」を使用します。revert;のように上書きすることで文字サイズを初期値に戻すことができます。上記4つのどれを使うかというと、リセットしてどのような状態にしたいかによって変わってきます。コメント(0)div等のブロック要素は、そのままだと幅が横いっぱいまで広がってしまいます。fit-content;」を使用することで幅が中身に合わせて可変するようになります。table;」などでやや無理やり実装することが多かったと思いますが、よりシンプルに実装できるようになりました。IE11以上であれば対応しています。コメント(0)CSSプロパティの「aspect-ratio」を使うと、要素のアスペクト比を指定することができます。IE11では使えませんが、モダンブラウザであれば基本的に対応しています。レスポンシブ対応の際に便利。3;上記のように指定すると、その要素のアスペクト比が4:3になります。これまでもwidthに対して高さをpaddingで%指定することで同じようなことができましたが、それがよりストレートに指定できることになります。paddingを使う方法だと高さから幅を決めることができませんが、aspect-ratioであれば普通にheightを指定すればaspect-ratioの比率に沿って幅が決まります。スタイルを設定するとスマホでも有効になってしまい、タップしたときにホバースタイルが有効になりつづけてしまう問題があります。メディアクエリでPCサイズのみ効くようにすることもできますが、ピクセルではなく以下のように書くことでホバー可能なデバイスのみホバーのスタイルを有効にすることができます。属性の中身がある場合のみホバーを有効にすることができます。コメント(0)画像が自動で切り替わるだけ(操作なし)のスライドショーをslick.jsで実装したのですが、スマホでページをスクロールしたときに「スライドショー上で指を離すとslickの自動再生が止まってしまう」という現象がおきました。スライドショー外をタップするとまた動き始めます。動作的に以下のオプションが効いてしまっているような感じです。フォーカスされたときに自動再生を止める●回避方法スライドショーに対して以下のCSSを設定したところ回避することができました。none;ただし、上記はクリックやタップを無効にするスタイルなのでスライドショー画像にリンクをつけたい場合は使えないかと思います。コメント(0)ユーザー側で文字サイズを変更できるように制作する場合、単位をremで指定すると便利です。usehttps://caniuse.com/?search=remすでにモダンブラウザで使用できるようになっているので、メモとしてpx毎の対応表をまとめておこうと思います。sticky」を使うことで、特定の範囲内で要素を追従させることができます。JavaScriptで複雑な処理を書くことなく追随ナビなどを実装できます。デモ2022年の9月現在、モダンブラウザではサポートされています。使い方は簡単で、追従させたい要素(デモの黄色の要素)に以下のスタイルを当てます。追従する際の上部からの位置です。20pxなど指定すると画面上部からその数値分空けた状態で追随します。当てた要素は、その要素の親要素の範囲内で追随します。そのため、親要素のほうが高くないと追随しません。親要素に高さを指定するか、同じ親要素内に高さのある別の要素が必要です。指定しないと追随しません。指定していると追随しません。コメント(0)アンカーリンクでスムーススクロールさせたい場合、以前はJavaScriptを使う必要がありましたが、2022年8月現在は以下のCSSだけで実装することができます。smooth;}また、ヘッダー分スクロール位置をずらす場合も、アンカーリンクの対象に以下を当てるだけで実装できます。