主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

2018-01-01から1年間の記事一覧

:focus-within は Edge に対応していないからといって甘くみてるとぶっこわれた話

:focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素にスタイルがあてられる。 <div class="button"> <input type="submit"> // ↑ focus はこっちにしか移動できないけど。親.button にフォーカスがあたったようなスタイルがつけられる </div> 例えば、 <li> <button>ボタン</button> <button>ボタン</button> <button></button></li>…

衝撃!Mac の Firefox で Tabキー移動したいときはシステム設定いじる必要がある

最近、諸事情から Firefox に乗り換えたんですけど、Tabキーでフォーカス移動したいところにぜんぜんいけなくて、どうやらボタンとかフォームは移動できるんやけど、アンカーリンクに移動できない。あれ、バグってる?と思って、いろいろ調べていたら、 stac…

visibility: hidden の中の visibility: visible なアイツ

visibility: hidden で css的に要素を消すということはあるあるだと思うんですが、その消している要素は、見た目的には存在していないようでして、しっかりとDOM としても、要素としても存在しているのでスクロールのパフォーマンスなどにも影響してくること…

html font-size: 1px で body font-size: 16rem

CSS

ってすると、16rem = 16px ってわかり易くない?っておもったけど、ブラウザの最小フォントサイズが指定されるとくずれるみたい。 butchi.github.io 62.5% で 10px にして 1.6rem = 16px っていうのがベターな感じですが、 qiita.com ブラウザの最小フォン…

TypeScript の型宣言の ?

TypeScript の型をインターフェース宣言してるときにある? interface Props { className?: string; children?: string; } なんやこの ? と思ってたんですけど、必須のプロパティじゃないときにつけるみたいです。 参考: TypeScript 型と型宣言の備忘録

webpack 4系、ts-loader 4系、storybook 4系にしたときに出る謎のエラーを解決

React で storybook を使ってコンポーネントベースのUI開発をするっていうのが、こんな書籍も出てるぐらい Atomic Design ~堅牢で使いやすいUIを効率良く設計する作者: 五藤佑典出版社/メーカー: 技術評論社発売日: 2018/04/25メディア: 単行本(ソフトカバ…