外部SVGファイルの色をCSSで変更する

gravity-works (2024年11月19日 15:50)
imgタグでページに配置したSVGの色を、CSSで変更する方法です。
この方法は以下の条件を満たしている必要があります。

・SVG画像を黒一色で書き出せる
・指定した色と多少の誤差があってもよい

●手順
1. ページ内に配置するSVG画像は黒一色にしておく。

2. 以下のサイトにアクセスします。

3. 「Target color」に変更後のカラーを入力し、「Compute Filters」をクリック。

4. カラー変更用のCSS（filterプロパティ）が出力されるので、SVG画像に対して適用する。

filter: invert(57%) sepia(34%) saturate(6436%) hue-rotate(160deg) brightness(93%) contrast(101%);

以上でCSSによって色を変更することができます。

ただ、実際に変更後の色をカラーピッカーで取得してみると指定した色と多少誤差があるようでした。

※例えば、上記のCSSはTarget color「#00a4d6」で出力しているのですが、
　変更後の色は「#00a4d4」となっていました。
　微差なので厳密なカラー指定がなければ問題ないと思います。

●参考

Tabキーでフォーカスさせる／させない要素を制御する

gravity-works (2024年10月 1日 15:12)
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)
毎回忘れてしまうので見返せるようにメモします。

grid 内に grid を入れ子にしたとき、通常では子 grid は親 grid のグリッドラインに揃いませんが、subgrid を使うことで揃えることができます。

・grid の中に grid が入れ子になっている
・子 grid が親 grid のグリッドセルを複数個つかっている

上記のようなとき、子gridの grid-template-columns や grid-template-rows に "subgrid" を指定することで実装できます。

（例）
// 親
.parent {
    display: grid;
    grid-template-columns: 1fr 2fr;
    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)
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)
div等のブロック要素は、そのままだと幅が横いっぱいまで広がってしまいます。
「width: fit-content;」を使用することで幅が中身に合わせて可変するようになります。

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

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

●CSS property: width: fit-content

要素のアスペクト比を指定するaspect-ratio

gravity-works (2023年11月20日 10:52)
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)
通常、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の自動再生が止まる

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

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

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

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

pointer-events: none;

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

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

gravity-works (2023年1月23日 10:39)
ユーザー側で文字サイズを変更できるように制作する場合、単位を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」で要素を追従

gravity-works (2022年9月30日 19:13)

CSSの「position: sticky」を使うことで、特定の範囲内で要素を追従させることができます。

JavaScriptで複雑な処理を書くことなく追随ナビなどを実装できます。

2022年の9月現在、モダンブラウザではサポートされています。
●使い方
使い方は簡単で、追従させたい要素（デモの黄色の要素）に以下のスタイルを当てます。
position: sticky;
top: 0;
top は追従する際の上部からの位置です。
20pxなど指定すると画面上部からその数値分空けた状態で追随します。
●注意点
・position: sticky を当てた要素は、その要素の親要素の範囲内で追随します。そのため、親要素のほうが高くないと追随しません。
親要素に高さを指定するか、同じ親要素内に高さのある別の要素が必要です。
・top も指定しないと追随しません。
・親要素、または祖先要素にoverflow: hidden を指定していると追随しません。（追記：overflow: visible か clip 以外はすべてダメなようです）
・親要素に別方向のスクロール（例：縦に追随する場合は横のスクロール）があると追随しません。
アーカイブ

最近のブログ記事

アイテム

  • 180314_oshi_01.jpg
  • 150121_oshi.gif
  • 150114_oshi_01.gif
  • 130814_oshi_01.jpg
  • 130115_oshi.gif
  • 110420.gif
  • 090811_02.gif
  • 090811_01.gif
  • 090810_02.gif
  • 090810_01.gif
​