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に置き換えました サンプルキャンバスページ 使用したフリー素材の背景
備忘録

1行に入らない文字列を三点リーダで省略表示する

タイトルとURLをコピーしました