備忘録

備忘録

インプット要素のアウトラインを変更する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...
備忘録

nuxtでトグルボタン作ってみた

vue-js-toggle-buttonのコードを写経しただけです。 herokuにあげています herokuサンプルページ
タイトルとURLをコピーしました