CSSブログ
運営:株式会社グラビティ・ワークス
当社ホームページ
Tabキーでフォーカスさせる/させない要素を制御する
gravity-works
(
2024年10月 1日 15:12
)
|
コメント(0)
Webページをキーボード操作で閲覧しやすくする施策になります。
Tabキーでページ内のリンク要素を選択していく際、<a>タグや<button>タグなどはデフォルトで選択できるようになっていますが、JavaScriptで<div>タグや<span>タグなどをボタンとして使用している場合はそのままでは選択されません。
●Tabキーで選択できるようにする
tabindex="0"
をつけることでTabキーで選択できるようになります。
(例)
<div> ... </div>
↓
<div tabindex="0"> ... </div>
●Tabキーで選択できないようにする
逆にTabキーで選択できないようにしたい場合は
tabindex="-1"
をつけます。
親gridの行や列を引き継いだ子gridの作り方
gravity-works
(
2024年7月23日 15:40
)
|
コメント(0)
毎回忘れてしまうので見返せるようにメモします。
grid 内に grid を入れ子にしたとき、通常では子 grid は親 grid のグリッドラインに揃いませんが、subgrid を使うことで揃えることができます。
・grid の中に grid が入れ子になっている
・子 grid が親 grid のグリッドセルを複数個つかっている
上記のようなとき、子gridの
grid-template-columns
や
grid-template-rows
に "
subgrid
" を指定することで実装できます。
(例)
// 親
.parent
{
display
: grid;
grid-template-columns
:
1
fr
2
fr;
grid-template-rows
: auto;
}
// 子
.child
{
grid-columns: span 2; // 親 grid のグリッドセル横2つ分のサイズ
display
: grid;
grid-template-columns
: subgrid;
}
CSSのプロパティの値を初期値に戻す
gravity-works
(
2024年6月18日 15:00
)
|
コメント(0)
CSSですでに指定されている値をリセットしたい場合、「
initial
」「
revert
」「
inherit
」「
unset
」を使用します。
例えば
font-size: 20px;
と指定されている要素に対し、
font-size: revert;
のように上書きすることで文字サイズを初期値に戻すことができます。
では上記4つのどれを使うかというと、
リセットしてどのような状態にしたいかによって変わってきます。
●initial
仕様で決められたプロパティ自体の初期値にリセット
●
inherit
親要素からプロパティの値を継承
●
revert
ブラウザのデフォルトスタイルにリセット
●unset
親要素の値を継承できるプロパティには「inherit」を適用、
そうでないプロパティには「initial」を適用
要素の幅を中身に合わせて変えられる width:fit-content
gravity-works
(
2024年3月18日 15:06
)
|
コメント(0)
div等のブロック要素は、そのままだと幅が横いっぱいまで広がってしまいます。
「width: fit-content;」を使用することで幅が中身に合わせて可変するようになります。
以前は「display: inline-block;」や「display: table;」などでやや無理やり実装することが多かったと思いますが、よりシンプルに実装できるようになりました。
IE11以上であれば対応しています。
●CSS property: width: fit-content
https://caniuse.com/?search=fit-content
要素のアスペクト比を指定するaspect-ratio
gravity-works
(
2023年11月20日 10:52
)
|
コメント(0)
CSSプロパティの「aspect-ratio」を使うと、要素のアスペクト比を指定することができます。
IE11では使えませんが、モダンブラウザであれば基本的に対応しています。
レスポンシブ対応の際に便利。
aspect-ratio: 4 / 3;
上記のように指定すると、その要素のアスペクト比が4:3になります。
これまでもwidthに対して高さをpaddingで%指定することで同じようなことができましたが、それがよりストレートに指定できることになります。
また、paddingを使う方法だと高さから幅を決めることができませんが、aspect-ratioであれば普通にheightを指定すればaspect-ratioの比率に沿って幅が決まります。
ホバー可能なデバイスのみa要素のホバースタイルを有効にする
gravity-works
(
2023年10月10日 15:36
)
|
コメント(0)
通常、CSSで :hover スタイルを設定するとスマホでも有効になってしまい、
タップしたときにホバースタイルが有効になりつづけてしまう問題があります。
メディアクエリでPCサイズのみ効くようにすることもできますが、
ピクセルではなく以下のように書くことでホバー可能なデバイスのみホバーのスタイルを有効にすることができます。
@media (hover: hover) {
a:hover {
opacity: 0.7;
}
}
また、:any-link をつけることで href 属性の中身がある場合のみホバーを有効にすることができます。
@media (hover: hover) {
a:any-link:hover {
opacity: 0.7;
}
}
●参考
【CSS】まだホバー時のスタイルを :hover だけで指定してるの?
スマホでスクロールした際にslick.jsの自動再生が止まる
gravity-works
(
2023年3月20日 09:41
)
|
コメント(0)
画像が自動で切り替わるだけ(操作なし)のスライドショーをslick.jsで実装したのですが、スマホでページをスクロールしたときに「スライドショー上で指を離すとslickの自動再生が止まってしまう」という現象がおきました。
スライドショー外をタップするとまた動き始めます。
動作的に以下のオプションが効いてしまっているような感じです。
(どちらもfalseに設定しており、PCではちゃんと効いています)
pauseOnHover : マウスが乗ったりときに自動再生を止める
pauseOnFocus : フォーカスされたときに自動再生を止める
●回避方法
スライドショーに対して以下のCSSを設定したところ回避することができました。
pointer-events: none;
ただし、上記はクリックやタップを無効にするスタイルなので
スライドショー画像にリンクをつけたい場合は使えないかと思います。
font-sizeをrem指定する際の数値まとめ
gravity-works
(
2023年1月23日 10:39
)
|
コメント(0)
ユーザー側で文字サイズを変更できるように制作する場合、単位をremで指定すると便利です。
●
Can I use
https://caniuse.com/?search=rem
すでにモダンブラウザで使用できるようになっているので、メモとして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」で要素を追従
gravity-works
(
2022年9月30日 19:13
)
|
コメント(0)
CSSの「position: sticky」を使うことで、特定の範囲内で要素を追従させることができます。
JavaScriptで複雑な処理を書くことなく追随ナビなどを実装できます。
デモ
2022年の9月現在、モダンブラウザではサポートされています。
Can I use
●
使い方
使い方は簡単で、追従させたい要素(デモの黄色の要素)に以下のスタイルを当てます。
position: sticky;
top: 0;
top は追従する際の上部からの位置です。
20pxなど指定すると画面上部からその数値分空けた状態で追随します。
●
注意点
・position: sticky を当てた要素は、その要素の親要素の範囲内で追随します。そのため、親要素のほうが高くないと追随しません。
親要素に高さを指定するか、同じ親要素内に高さのある別の要素が必要です。
・top も指定しないと追随しません。
・親要素、または祖先要素にoverflow: hidden を指定していると追随しません。
スムーススクロールさせるCSS
gravity-works
(
2022年8月 8日 10:56
)
|
コメント(0)
アンカーリンクでスムーススクロールさせたい場合、以前はJavaScriptを使う必要がありましたが、2022年8月現在は以下のCSSだけで実装することができます。
html {
scroll-behavior: smooth;
}
また、ヘッダー分スクロール位置をずらす場合も、
アンカーリンクの対象に以下を当てるだけで実装できます。
例)sectionにアンカーリンクで移動する際に80pxずらす場合
section {
scroll-margin-top: 80px;
}
●対象ブラウザ
scroll-behavior
https://caniuse.com/css-scroll-behavior
scroll-margin-top
https://caniuse.com/mdn-css_properties_scroll-margin-top
アーカイブ
カテゴリ
CSS (42)
HTML (10)
確認 (1)
月別
アーカイブ
2024年10月 (1)
2024年7月 (1)
2024年6月 (1)
2024年3月 (1)
2023年11月 (1)
2023年10月 (1)
2023年3月 (1)
2023年1月 (1)
2022年9月 (1)
2022年8月 (1)
2022年6月 (1)
2022年5月 (1)
2020年11月 (1)
2019年4月 (1)
2019年1月 (1)
2018年8月 (1)
2018年3月 (1)
2017年5月 (1)
2016年10月 (1)
2016年8月 (1)
2016年7月 (1)
2016年6月 (1)
2016年2月 (1)
2015年10月 (1)
2015年1月 (2)
2013年8月 (1)
2013年4月 (1)
2013年3月 (1)
2013年1月 (1)
2012年11月 (1)
2012年8月 (2)
2012年4月 (1)
2012年2月 (1)
2011年12月 (1)
2011年7月 (1)
2011年4月 (3)
2010年3月 (1)
2009年8月 (3)
2009年7月 (1)
2009年5月 (6)
2009年4月 (1)
ウェブページ
このブログを購読
検索
最近のブログ記事
Tabキーでフォーカスさせる/させない要素を制御する
親gridの行や列を引き継いだ子gridの作り方
CSSのプロパティの値を初期値に戻す
要素の幅を中身に合わせて変えられる width:fit-content
要素のアスペクト比を指定するaspect-ratio
ホバー可能なデバイスのみa要素のホバースタイルを有効にする
スマホでスクロールした際にslick.jsの自動再生が止まる
font-sizeをrem指定する際の数値まとめ
CSSの「position: sticky」で要素を追従
スムーススクロールさせるCSS
クラス名指定にはnth-childを使用できない
画面サイズによって読み込む画像を変更する
ページ読み込み時に動かないはずのCSS transitionが動いてしまう
position: fixed がブラウザ基準にならない
今後使える(予定)の短いclearfix
CSS:フォントサイズのvw指定を少し楽にする書き方
Google chromeで画像を縮小表示したときにぼける問題の回避方法
CSSでのフェード時に要素がズレる
縦中央に揃える最新のCSS
iPhoneで画面を回転させたときに文字サイズが変わる
計算式を使った幅指定
IEで互換表示させない
CSSでマウスオーバー半透明
YouTubeの埋め込み動画を幅100%に対応させるCSS
hrの余白
clearfix当社用
要素の内側にボーダーを付ける方法
Google Chromeで印刷に対応する
inline-blockの手軽な書き方
IE6:div内の最後の要素が落ちてしまうときの対処法
アイテム
タグクラウド
CSS
レイアウト崩れ
フォント
alt
dl
font
title
XHTML
アンチエイリアス
タイトル
チェッカー
バージョン
中央揃え
宣言文
文書型
明朝
画像