

## 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

## 概要
[オフライン環境でも使えるブラウザベースの簡易マークダウンエディタ](https://github.com/ikmnjrd/browser-local-md-editor)を作成した際に知ったことなど、
箇条書きな内容です。　　

## Tips
- `<pre>`と`<div>`の違い。contenteditable属性と合わせて使う場合、preは改行やスペースなど入力を入力したまま保持（入出力）してくれる が、divだと改行など特にエスケープされてしまうので、
contenteditableと使う場合はpreを使う方がベター
- `<head>`に`<style>`タグでcssを書くとパースがシビアになりすぐ変な挙動になるので、個々のhtmlタグのstyle属性に直書きする。今回作成した簡易的なマークダウンエディタなど、
htmlが少ないなら有効。
- dataURIでhtml、特にマークダウン書式を書くならマークダウンんで多用する「#」をURLエンコードに合わせることを意識しておく。#は「%23」で表現される。
- tabキーなど、文字入力は色々気を使わなくちゃいけない。onkeydownで処理するよりonkeyupで処理した方が都合が良いことが多い。
- contenteditableなhtmlで参考にすべきはTwitter。Twitterすごい。
- dataURLではWebStorageが使えない。
- dataURLではlocationAPIが使えない(Not allowed to navigate top frame to data URL)


### 参考文献
- [How To Add New Line In Markdown? – WiseTut](https://wisetut.com/how-to-add-new-line-in-markdown/)
- [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
- [jQueryでIME入力確定時にイベントを発行する - Qiita](https://qiita.com/hrdaya/items/6488d8dd3962cf35c0a0)

オフライン環境でも使えるブラウザベースの簡易マークダウンエディタを作った時に知ったことのまとめ

contenteditable（HTML）とdataURIを使う際のTips


大好きなWebサービス「Gyazo」の紹介です。

簡単にこのサービスを説明すると、Gyazoを使ってスクリーンショットを撮ると無料のクラウドサーバーにアップロード&URLが発行され、共有が簡単にできるサービスです。

`https://gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8`
![例](https://i.gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8.png)


このようにすると、画像を直接指定できる。

`https://i.https://gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8.png`

以下のようにするとサイズを指定できる

`https://i.gyazo.com/thumb/300/37f2d7be5ea5964c6aa339f0aa95c9f8.png`

これを応用すると、画像を自前でホストせずに、最適化した画像によるレスポンシブ対応がhtmlだけでできる。

```html
  <img
    src="https://i.gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8.png"
    srcset="https://i.gyazo.com/thumb/320/37f2d7be5ea5964c6aa339f0aa95c9f8.png 320w,
            https://i.gyazo.com/thumb/640/37f2d7be5ea5964c6aa339f0aa95c9f8.png 640w,
            https://i.gyazo.com/thumb/1280/37f2d7be5ea5964c6aa339f0aa95c9f8.png 1280w"
    sizes="(max-width:1280px) 100vw, 1280px"
  >
```

`<picture/>`と`<source/>`を使えばより柔軟に設定できる。


### 周辺用語
- レスポンシブデザイン
- srcset
- ポリフィル「picturefill」

### 参考文献
- [レスポンシブ画像 - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
- [HTML 5.1のsrcset・sizes属性とpicture要素の使い方 - レスポンシブイメージで画像表示を最適化 - ICS MEDIA](https://ics.media/entry/13324/)


Gyazoをブログ用の画像ホストとして使い倒す


まずはこちらをご覧ください。毒々しいCSSが施されたselect要素です。
![chrome-normal](https://i.gyazo.com/a3079d8e10a42eb46b9d55d1f99e6c97.png)

上の画像のようなちょっと変わったデザインのselect要素を作った時、ChromeやOperaではfocus状態の時は次のようになります。  
![chrome-focus-default](https://i.gyazo.com/15638460feada9a82dfb8df92a5ccc7b.png)

毒々しくしたいのですがデフォルトの青い枠線が中途半端にかかり、邪魔になっています。
そんな時、borderとかなり似ている[outline](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)というプロパティを使います。
```css
.poison-select:focus {
  outline: 1px solid #ff0;
  /* Chromeなどでのデフォルトの色味を設定したい場合は「-webkit-focus-ring-color」を設定する */
  /* outline: 1px solid -webkit-focus-ring-color; */
}
```

![chrome-focus-custom](https://i.gyazo.com/81d1875832d0538bdded5a56d7af5895.png)

いい感じにすることができました。  
safariでも見てみましょう。

![safari-focus-without-offset](https://i.gyazo.com/151a452bffb8191e2c8949781dc14769.png)

違和感がありますよね？  
大きく2点で違いがあります。
* safariではselect要素の内側にfocus時の枠線ができる
* safariではoutline要素にradiusが効かない(※2023年3月27日リリースの[Safari V16.4](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/)から解消)

主に1点目の「select要素の内側にfocus時の枠線ができる」時の対策に[outline-offset](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset)を明示的に設定(0pxで)してあげます。

```css
.poison-select:focus {
  outline: 1px solid #ff0;
  outline-offset: 0px;
}
```
すると綺麗になります。  
![safari-focus-without-offset](https://i.gyazo.com/65572abbec5eaf9876f7e66ceef26857.png)


### Reproduction
<iframe src="https://codesandbox.io/embed/affectionate-surf-e2w97d?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="affectionate-surf-e2w97d"
     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>

### 参考文献
- [outlineプロパティで作った枠線は角丸にすることができない - dskd](https://dskd.jp/archives/73.html)
- [css - What is the default style of the blue focus outline in Chrome? - Stack Overflow](https://stackoverflow.com/questions/20609485/what-is-the-default-style-of-the-blue-focus-outline-in-chrome)

やっぱりsafariはおかしいね。select要素を少しカスタマイズしようとしたところにも地雷がある。

select要素をCSSでカスタマイズする際に気をつけるべきブラウザごとの差


### 疑問に遭遇した状況
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

HTMLの投稿記事一覧