Chromeの設定＞デザイン＞フォントをカスタマイズ から、フォントの詳細設定（拡張機能のオプション） chrome.google.com この拡張機能を入れ、拡張機能で文字サイズを16pxから32pxにすると、200％にしたときの検証ができます。 W3Cアクセシビリティの担保と…
support.apple.com 公式サイトが参考になります。 アクセシビリティのチェックとして、音声でWebサイトを正しく読めるかがあります。 もちろんHTMLで入れた文字は問題なく読めますが、画像のAltなどは目でWebサイトを見ている限りは 認知されない情報ですよ…
知らなかった。会社のチャンネルで投稿されていて知った。言われてみればそりゃこういうのは全部ライブラリあるよね。 Webブラウザの種類やバージョンを判別するJSライブラリ「bowser」 lancedikson/bowser ・ブラウザ名 ・OS ・デバイス（PCかタブレットかS…
最近仕事でpugを触っている。 data-b-pdf-volume=attributes.pdf-volume だとだめで、 data-b-pdf-volume=attributes['pdf-volume'] と書く。 もしくは変数名のルール変えるか。 data-b-pdf-volume=attributes.pdfvolume -あると記号として扱われてしまう。
iamdustan/smoothscroll これのsrcの中身をダウンロードして置くか、 今どきのスムーズスクロール(2019年版) Webpack使えてimportで済むならscroll-behavior-polyfillで良い感じがする が、Webpack使えないのであれば、smoothscrollのsrcの中身のsmoothscrol…
matchMediaを使うとCSSとほぼ同じような書き味でメディアクエリを書けます。 が、CSSのようにデバイス幅をいつでも取得してるわけじゃない（そう書けばそう書けますが）ので、PCSPの切替時にイベントを起こせません。 と思ったら、matchmediaでaddListerを使…
SizedImageというComponentでspOnlyというPropsにtrueを渡す <SizedImage spOnly={true} filename={'about/history/img-logo.png'}></Image> SizedImageのComponentを定義 export default class SizedImage extends React.Component { render() { return( <Container spOnly={this.props.spOnly}> <Image filename={this.props.filename}><…</image></container>
メモ。 最近GithubのTeamの有料アカウントが9ドルから4ドルに値下げされましたね。 jp.techcrunch.com とはいえBitbucketは3ドルなので、まだBitbucketのほうが安い。 www.atlassian.com じゃあどんなところがGithubのほうが良いのか…？ 具体的には、 ・Inte…
原因は確かじゃないのであれなのですが。まあ備忘録として。メモです。 Swiperっていうスライダーを簡単に作れるライブラリ。 あれで自動再生して、サムネイル機能もつけて、ってのを作ったのですが。 たまにSwiperがエラー起こして自動再生が止まってしまう…
これがIEとSafariでは効かない。 window.scrollTo({ top: 100, behavior: 'smooth' }); 正確に言えばbehaviorが効かない。CSSのscroll-behaviorも同じく。 jQueryでanimateさせればよかったかもしれないが、今回はPolyfillで解決。 scroll-behavior-polyfill…
gatsby develop -H 0.0.0.0 で、いける。 これで自分のIPアドレスに他端末からアクセスしたら検証出来ます。
qiita.com これが参考になります。 $ git remote add upstream https://github.com/tokyo-metropolitan-gov/covid19.git これで、本家をfetchしてくるupstreamブランチを作成できます。 これで、 $ git fetch upstream で、upstreanブランチに本家の更新を反…
nichiyogogo.com まあ直し方は簡単で、 outline: none; これで終わり。inputがfocusされてるときとかだと思うので、そのときにoutlineがブラウザによって規定のものが出るはずなのでそれを消せます。 まあただ、これ出るのには理由あって、健常者なら関係な…
[追記] こちら最新です tech.motoki-watanabe.net 東京都 新型コロナウイルス対策サイトに貢献したかった。 で、yarn install しようとしたら、 nodenv: version `10.19.0' is not installed (set by./covid19/.node-version) こんな感じの表示が。で、なぜ…
qiita.com qiita.com とにかくデバッグてきなことしたいときは console.log これでコンソールのログを出す、これしかないと思っていました。 なにかの拍子に、会社のマネージャーに 「console.infoとかでエラー挙動のときはエラー文出すようにしたほうがいい…
