role=”tab”で実装したタブのキーボード操作対応
キーボード操作に対応したタブを作るポイントです。 タブ押下をキーボードで実行可能にする role=”tab”でliなどクリッカブルではない要素もタブにできます。 role定義により、セマンティック的にはliをタブとして宣 …
記事一覧
ReactでDOMに後付するスクリプトはuseRefで取得してuseEffectで定義
React環境で、グラフの描画やスライダーなど、DOMを取得しインスタンス化を行うタイプのプラグインを使用するときのTipsです。 refで指定したDOMをuseRef で取得しuseEffectで、描画後に実行したい処 …
linear-gradientで六角形の背景
backgoundで複数のlinear-gradientを指定すると、CSSだけで六角形の背景をつくられます。 4分割して線形グラデーションを指定 左上、右上、右下、左下に4分割して、それぞれに線形グラデーションのlin …
内部参照SVGスプライトをCSSでカスタマイズ(IE11対応)
SVG画像をHTMLへ<svg>タグとして設置すると塗りのfillや、線のstrokeなどをCSSから変更することができオンマウスでの色変更にtransitionでアニメーションをつけるなど表現の幅が広がりま …
SSIのように外部ファイル化したパーツを1枚のHTMLに合成するgulpタスク
SSIのインクルードのような感覚でソースの一部を別ファイルから呼び出すgulpタスクです。 可読性を良くするために長いHTMLを分割したり、くりかえし呼び出す共通パーツに使ったり、ejsやpugを導入するほどでもないとき …
Vuexミニマム導入
Vuexをモジュールで導入するときの基本的な環境設定です。設計思想というより、最低限の動作環境を手配するやりかたになっています。 サンプルは、ページ内にVueコンポーネントのいいねボタンを複数設置し、値をVuexで共通管 …
Nodeを10以上にするとnode-sassとgulp-sassがエラー
結論 node-sassはupdateしてからrebuild エラー内の、「node-sassをrebuildしようね」というメッセージに促されるままrebuildを試して解消されないエラー首を捻っていましたが その前に …
IE11とiPhon対応 フッタを画面下に表示
コンテンツの量が少ない場合や、解像度の高いディスプレイでみた場合、いわゆるスクロールバーが出ない状態では、フッタが上にせり上がった状態になり、下へ隙間ができます。 この解決方法でよく見かけるCSS対策がこの2つ。 bod …
クレジットカード情報のオートコンプリート
クレジットカード情報の入力欄にフォーカスしたときAppleやGoogleのアカウントに保存しているクレジットカード情報があれば、カード番号や有効期限を自動入力するかきいてくれる、あれ、10桁以上ある番号を暗記するのは難し …
@supportsでクリーンなIEハック
特定の機能が有効な環境にだけ適用させる@supportsでobject-fitなどInternetExplorerだけ非対応の機能を指定すると、クリーンなCSSハックができます。 サンプルソース 参考：@supports …