
## 色関数とは
rgb(255,255,255)はもろに色関数。色関数にも種類があり、rgbのRGBAやHSLはCSS Color Module 3(2011年)のもの。次世代のCSS Color Module 4ではHWBやOklchなどがある。  


## HSLとOKLCHの比較

| 特性          | HSL                    | OKLCH                          |
|--------------|------------------------|--------------------------------|
| **CSSでの指定** | hsl(H S L[ / A])      |  oklch(L C H[ / A])             |
| **色相 (H)** | 0から360度の範囲        | 0から360度の範囲                |
| **彩度 (S/C)** | 0%から100% (パーセンテージ) | 数値で表され、最大値は色空間に依存 |
| **明度 (L)** | 0%から100% (パーセンテージ) | 0から100の範囲の数値             |
| **色の表現** | 直感的で使いやすい      | 色の知覚的均一性に優れる         |
| **用途**     | 一般的なWebデザインやアプリケーション | 専門的なデザインや色の一貫性が重要な用途 |
| **色の調整** | 色相を変えるだけで簡単に色のバリエーションを生成 | 明度や彩度を変えても色相が保持されるため、異なる明度での色の調和が容易 |

### 説明:

- **色相 (Hue)**: 両モデルともに色相は度数で表され、色の種類（赤、緑、青など）を定義します。
- **彩度 (Saturation/Chroma)**: HSLではパーセンテージで彩度を表し、色の鮮やかさを示す。OKLCHでは彩度が数値で表され、色の純度を示すため、より精密な色調整が可能
- **明度 (Lightness)**: HSLでは明度もパーセンテージで表され、0%が黒、100%が白。OKLCHでは明度が数値で表され、より広範な色調整が可能
- **色の表現と用途**: HSLは直感的で、誰でも簡単に色を選ぶことができるが、OKLCHは色の均一性を重視しており、専門的な用途に使われるらしい。

どちらにも基準の色から色を足し引き等で指定できる。  
hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30))  
oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)  

## 感想
使うのは実際骨が折れそう。特にデザイナーは慣れない色指定方法になるだろうし。  
エンジニア視点だと基準を決めればそれに応じた色を出せるようになるというのは夢があるが。



### 参考文献
- [Xユーザーのjhey ▲🐻🎈さん: 「Use CSS relative color syntax to darken/lighten colors for borders, backgrounds, etc. 🔥](https://x.com/jh3yy/status/1770948509933445269)
- [Theming with CSS color functions 🤙](https://codepen.io/jh3y/pen/rNbmBrE)
- [oklch() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch)
- [hsl() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)
- [CSS の 色関数 について #CSS3 - Qiita](https://qiita.com/pon_u/items/0c216ee81f3b7aa04f98)


色関数について調べたことと感想

CSSの色関数について調べたこと



## stickyを使ったフッターの実装
よく見る残念な実装に、コンテンツ量が少なくフッターが画面下に貼り付かないことがありますが、以下の例はコンテンツ量が少なくても大丈夫でこのコード量なので現時点でもっとも優れた実装だと思います。

```html
<html>
  <body>
    <main>
      ここには色々。100vhを超えるものも入ったり。
    </main>
    <footer>
      これはフッターです
    </footer>
  </body>
</html>
```

```css
body { min-height: 100%;}

body > footer {
  position: sticky;
  top: 100vh; // もしくはbottom: 0
}
```

## stickyの解説
そもそも、position: sticky とはMDNによれば

> `sticky`
> 要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック（直近のブロックレベル祖先、表関連要素を含む）に対して top, right, bottom, left の値に基づいて相対配置されます。このオフセットは他の要素の配置には影響を与えません。
> この値は、常に新しい重ね合わせコンテキストを生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先（overflow が hidden, scroll, auto, overlay として作成されたもの）に「粘着」します。
> <cite>引用元: [position - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/position#sticky)</cite>

難しい言葉がでてきますが、私なりに簡単に要約するなら「スクロールの機能を持つ直近の包含ブロックにくっつく」ことだと言ってみます。  

包含ブロックというのは「widthやheightを%指定したとき、その元となる要素（ブロック）」という理解でまずは大丈夫です。詳しくはMDNの[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block#%E5%8C%85%E5%90%AB%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AE%E8%AD%98%E5%88%A5)のページで。



### stickyの理解のためのデモ

`try-change-height`クラスのheight指定部分を色々と触ってみてください。
<iframe src="https://codesandbox.io/p/devbox/position-sticky-ycj8mq?file=%2Fstyles.css&embed=1"
     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
     title="position-sticky"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>





### 参考文献
- [この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック | コリス](https://coliss.com/articles/build-websites/operation/css/clever-sticky-footer-technique.html)
- [position - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/position#sticky)
- [レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block#%E5%8C%85%E5%90%AB%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AE%E8%AD%98%E5%88%A5)


最優のフッター固定CSSからposition=stickyを動かして理解する

フッター固定のCSSトリックから学ぶsticky


## サンプルコード

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwLeEOj" data-user="ikmnjrd" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ikmnjrd/pen/RwLeEOj">
  CSS-hamburger</a> by ike (<a href="https://codepen.io/ikmnjrd">@ikmnjrd</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



### 重要なポイント

#### CSSプロパティ
```css
background: currentColor;
```
参考:[https://zenn.dev/phi/articles/css-tips-currentcolor](https://zenn.dev/phi/articles/css-tips-currentcolor)

#### アニメーションのイージング
- `cubic-bezier`
  - [cubic-bezier を知る。](https://qiita.com/96usa_koi/items/6f313f1d664806a77313)

#### アニメーション
座標変換の原点を設定する`transform-origin`

#### WAI-ARIA
aria-expanded="false"



CSSアニメーションで作るハンバーガーメニュー


## Sandbox


<iframe src="https://codesandbox.io/embed/beautiful-darwin-4gf3h?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="beautiful-darwin-4gf3h"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

## ポイント

### SVG化した文字に陰影をつける

cssではこのようにすると綺麗に抜ける。
```css
svg {
  filter: drop-shadow(3px 3px 3px #fff)
    drop-shadow(-3px -3px 1px rgba(0, 0, 0, 0.15));
}
```
html上では、適宜fillやstrokeを設定する。

[https://danmarshall.github.io/google-font-to-svg-path/](https://danmarshall.github.io/google-font-to-svg-path/)（[GitHubリポジトリ](https://github.com/danmarshall/google-font-to-svg-path)）を使って文字を事前にSVG化しておく。

npmパッケージで似たものを提供している人もいる[https://github.com/shrhdk/text-to-svg](https://github.com/shrhdk/text-to-svg)


Neumorphismサンプル


チェックボックスを少し洒落たデザインにする時、疑似要素の:beforeと:afterを使って実装すると思う。そんな時にsafariで困った時の備忘録。  

### 実装の雰囲気
```html
<div class="box">
  <input id="checkbox_1" type="checkbox" class="no-display" />
  <label for="checkbox_1" class="designed"><span>テキスト</span></label>
</div>
```
```css
.box {
  position: relative;
}
.no-display {
  display: none;
}
.designed:before,
.designed:after {
  position: absolute;
  content: "";
  display: block;
}
.designed:before {
  z-index: 1;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  left: 7px;
  width: 5px;
  height: 8px;
  top: 3px;
  transform: rotate(45deg);
  opacity: 0;
}
.designed:after {
  content: "";
  border: 1px solid #d3d5d5;
  border-radius: 4px;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background-color: #fff;
}
.designed > span {
  margin-left: 24px;
}
.no-display:checked + .designed:before {
  opacity: 1;
}

```

### 問題の状態
問題になった箇所がsafariで、`position: absolute`をしていしているにも関わらず、疑似要素が before - 要素 - afterの順を崩してくれない。  
そのためbeforeとafterの要素を重ね合わせたいのに分離してしまっている。  

- safariでのレンダリング結果
![OSX-safari(16.0)でのレンダリング結果](https://i.gyazo.com/e63e9404ae95aa49af9b4616f9c4d15a.png)

- Chrome等でのレンダリング結果
![OSX-Braveでのレンダリング結果](https://i.gyazo.com/a4a4deec03d659f3a271762295f3c265.png)

### 対策
自分に何の理解が足りていないのかがいまいち判然としませんが、「span(非変形可能要素)にtransformが効かないようなものかな〜」と感じて、上記コードを次のようにすることで無理やり解決しました。


```css
.box {
  position: relative;
  display: flex;
  justify-content: left;
}
```

場当たり感が否めません。


### 検証に使ったsandbox
safari用のものが見たいならsafariで開き、chrome用のものが見たいならchromeで開いてください。頭痛が痛い。  
<iframe src="https://codesandbox.io/embed/pedantic-nash-sr1d7v?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="pedantic-nash-sr1d7v"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

疑似要素を使ったチェックボックスを書いた際にSafariで困ったこと


### 疑問に遭遇した状況
cssでtransformを使ったスタイリングが、なぜかWindows環境だけで見受けられるぼやけるという報告を受けて、ぼやっと[キャンバスの最適化](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)のページを見ていると次のような記述がありました。
> キャンバスで整数以外の値を使用してオブジェクトを描画すると、サブピクセルレンダリングを実行します。
> <cite>出典: [浮動小数点数値の座標を避けて整数を使用](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#%E6%B5%AE%E5%8B%95%E5%B0%8F%E6%95%B0%E7%82%B9%E6%95%B0%E5%80%A4%E3%81%AE%E5%BA%A7%E6%A8%99%E3%82%92%E9%81%BF%E3%81%91%E3%81%A6%E6%95%B4%E6%95%B0%E3%82%92%E4%BD%BF%E7%94%A8)</cite>

### サブピクセルレンダリングとは
wikipediaによると
> サブピクセルレンダリング(Subpixel rendering)とは、液晶・有機ELモニタ上のピクセルを構成する三原色の発光源を、仮想的にそれぞれ一つのピクセルとみなして横方向に三倍の解像度を得る技術のことである。 アンチエイリアスの一種。
> <cite>出典: [サブピクセルレンダリング - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%96%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0)</cite>
>

アンチエイリアスといえば、斜めにギザギザしたものをできるだけ真っ直ぐ見せるための技術と理解してる。  
各種ブラウザ（とOSが協調している）はデフォルトでアンチエイリアスが効いている。  
そしてCSSではfont-smoothというプロパティがある。  
```css
.something {
  -webkit-font-smoothing: antialiased; // auto | none | antialiased | subpixel-antialiased
  -moz-osx-font-smoothing: grayscale; // auto | grayscale
}
```
主にすでにかかったアンチエイリアスを効かせない方向に調整するためのもの。  
要は綺麗に見せたい場合では、ブラウザとOSに任せるしかなく、transformを適用しすぎてジャギジャギのままになった箇所はtransformによるスタイリングをやめるほかないと思う。  
試せていないが、遭遇したのは少数を含む指定だったので、transformを過剰に使ってもその指定が整数ならもしかするかもしれない（整数で済むような要件ならtransformを使っていない気がする）。

直接この答えになるような記事等は見つけられていないがMDNには次のような記述もある
> CSS 座標変換は、 GPU を使用しますのでより高速です。もっともよいのは拡大縮小しないことですが、そうでなければ大きなキャンバスを縮小するよりも小さなキャンバスを拡大したほうが良好です。
> <cite>出典: [CSS 座標変換を使用してキャンバスを拡大縮小する](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#css_%E5%BA%A7%E6%A8%99%E5%A4%89%E6%8F%9B%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%90%E3%82%B9%E3%82%92%E6%8B%A1%E5%A4%A7%E7%B8%AE%E5%B0%8F%E3%81%99%E3%82%8B)</cite>

canvasと同一視するのはどうかとも思うが、大きく離れてもいなさそうだと思う私でした。

### 参考文献
- [Webブラウザにおける文字のアンチエイリアスの現状の最適解 | dwango creators' blog（ドワンゴクリエイターズブログ）](http://creator.dwango.co.jp/14128.html)
- [CSS 座標変換の使用 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
- [font-smooth - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-smooth)

transformを過剰にあてた結果、ぼやけて表示されるフォントに救いのてはあるのか？いや、ない。

ikmnjrd.github.io

CSSの投稿記事一覧