備忘録 要素を見えないようにするが、スクリーンリーダーには読ませるcss
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
posit...
CSS
備忘録 備忘録 borderで作るカスタムCheckbox
ポイント
TABでフォーカスできるようにinput要素はdisplay:none;にはしない。
間接セレクタ(~)を使用することで、input要素がcheckedになった時のCSSを兄弟セレクタに当てる。
サンプルコード
...
備忘録 ヘッダー固定のレイアウトテンプレート
ポイント
ヘッダー自体にheightをもたせることで、mainをヘッダーに隠れないように表示できる。
body に、height: 100%;をもたせることで、web viewを100%とする。
headerにflex-shr...
備忘録 擬似クラス、擬似要素まとめ
シンプルセレクタ
ダイナミック擬似クラス（リンク擬似クラス）
:link リンク先に未アクセスの要素
:visited リンク先にアクセス済要素
ダイナミック擬似クラス(ユーザアクション擬似クラス)
:hover カーソルを重...
備忘録 iPadなどのタブレットでのheight(vh)が
PCブラウザとずれる現象の対策
結論
CSSStyleDeclaration.setProperty()を使用してvhを再定義する
原因
タブレットなどではvhの高さにメニューバーの高さも含まれてしまうため。
参考
CSSStyleDeclaration.setPrope...
備忘録 iOSで慣性スクロールさせる方法
結論
スクロールさせる要素に下記のCSSを記述する
備忘録 ローディング画面を作成した
axiosでデータ更新している間、ローディングが表示される
GitHub
備忘録 カラーコード16進数、RGBA、補色、反転色変換ツール
公開先リンク
サンプル
備忘録 インプット要素のアウトラインを変更するcss、sass
アウトラインスタイルの値
none
アウトラインは表示されず、太さも0になります。これが初期値です。
solid
1本線で表示されます。
double
2本線で表示されます。
groove
立体的に窪んだ線で表示されます...
備忘録 nuxtでcanvasタグを使って、新1万円を降らせてみた。
参考
こちらのコードをnuxtに置き換えました
サンプルキャンバスページ
使用したフリー素材の背景