備忘録 カラーコード16進数、RGBA、補色、反転色変換ツール
公開先リンク
サンプル
備忘録
備忘録 備忘録 インプット要素のアウトラインを変更するcss、sass
アウトラインスタイルの値
none
アウトラインは表示されず、太さも0になります。これが初期値です。
solid
1本線で表示されます。
double
2本線で表示されます。
groove
立体的に窪んだ線で表示されます...
備忘録 nuxtでenvファイルを使用する
結論
dotenvをインストールする
方法
以下のコマンドを実行
$npm install @nuxtjs/dotenv
.gitignoreファイルに.envファイルを追加
.envファイルをプロジェクト直下に作成して記述
...
備忘録 nuxtでcanvasタグを使って、新1万円を降らせてみた。
参考
こちらのコードをnuxtに置き換えました
サンプルキャンバスページ
使用したフリー素材の背景
備忘録 Nuxtでカスタムディレクティブに動的引数を渡す。
下記の質問「Nuxtでカスタムディレクティブの引数にオブジェクトのvalueを渡したいがプロパティ名が渡ってしまう。」件について回答をいただきました。
wtokunoさんありがとうございます。
結論 vueのversion2.6.0以降...
備忘録 カスタムスクロールディレクティブの作成
スクロールイベントと連動して要素が出現する
ローカルディレクティブに登録して、ローカルに使用する場合
pluginsディレクトリに登録し、グローバルに使用する場合
参考
カスタムスクロールディレクティブの作成
サンプルページ...
備忘録 ボタンを押すと出現するサイドバー
CSSトランジションを使う
参考
Enter/Leave とトランジション一覧
サンプルページ
備忘録 $route.pathで現在ページのURLを取得する
this.$route.pathで現在のURLのパスを取得することができる。
例えば、以下ではURLのパスごとにヘッダーのテキストを切り替えている
上記コードのサンプルページ
備忘録 1行に入らない文字列を三点リーダで省略表示する
備忘録 nuxtでパラメータ1つのアニメーション付き円グラフ描いてみた
結論
SVGの「stroke-dasharray」属性を利用する。
setIntervalでstroke-dasharrayの値を変化させる
「stroke-dasharray」は円周長なので、直径x円周率xパーセンテージ/100...