プログラミング学習googleドライブでhtmlを表示/公開/プレビューできない!iOSやAndroidのローカル環境で開く! 今回、不特定多数に公開せず、ローカル環境でドキュメントを公開する方法を模索しました。 htmlの扱いがやや面倒だなあという話で、最終的にいきついた結果をまとめます。 静的ウェブサイトをローカルじゃなけいところで共有したいならレ...2022.11.01プログラミング学習
プログラミング学習svg fillの色変更/グラデーション/アニメーション/はみ出る対策 svgの覚書です。 svg fillの塗りつぶしで色を変えたい 基礎中の基礎として色を変えたいときはimgで呼び出してはダメです。 <img src="./logo.svg" alt=&quo...2022.10.10プログラミング学習
プログラミング学習JavaScriptでCSS読込(ロード/画面遷移時)に画面がちらつく原因と解決 ちらつきの検証はF5を連打するとすぐわかります。 JavaScriptでCSS読込(ロード/画面遷移時)に画面がちらつく原因と解決 JavaScriptのロードを見直すdocument.addEventListener('DO...2022.10.06プログラミング学習
プログラミング学習cssだけでタブの切り替えのデザイン(codepenサンプル) タブのデザインはいろいろな方法があり、部位によって実装が違うものも多く、どれがいいのか迷いましたね。最終的な実装を紹介してしていきます。 cssだけでタブの切り替えのデザイン このようなタブを作りたいです。 横幅いっぱい...2022.10.02プログラミング学習
プログラミング学習動かない!?anime.jsでsvgのテキストアニメーションの作り方【fillのサンプル】 anime jsの使い方覚書です。 前半はqiitaに寄稿しました。後半は主にsvgアニメーションの解説です。 anime jsはtimeline内loopできない!? タイムラインの最後でループさせようと思...2022.08.26プログラミング学習
プログラミング学習ScrollMagicのサンプル(anime.jsやGSAPと併用/ScrollTrigger) GSAPのScrollTriggerが有料だったためScrollMagicとanime.jsで実装したというお話ですが、主な内容は次のとおりです。 ScrollMagicでスクロールした際にnuxtでanime.jsを使ってアニメー...2022.08.08プログラミング学習
プログラミング学習vueでBody Scroll Lockの使い方(モーダルウィンドウ時に背景固定でスクロールさせない) モーダルウィンドウ時に背景固定でスクロールさせない方法を調べて実装しました。 モーダルウィンドウ時に背景固定でスクロールさせない よくモーダルウィンドウを開いた際に、背景固定でスクロールさせない方が良い場合があります。 ...2022.10.26プログラミング学習
プログラミング学習【区切り線】cssの曲線で背景分割(ジェネレーターもあり)/hrの色・余白調整 区切り線の覚書です。 cssの曲線(円弧)で背景分割/区切り(レスポンシブ対応) アーチ状の曲線を描くコードです。 <div class="white-bg"><div class=...2022.10.09プログラミング学習
プログラミング学習CSSで動画を画面いっぱい(埋め込みサイズ変更の方法/レスポンシブ対応) 全画面で動画が流れるようvideoタグ埋め込み方法覚書です. cssで動画を画面いっぱい(埋め込みサイズ変更の方法/レスポンシブ対応) vueを使っていますが、cssの部分は他でも変わらないはずです。 vue.js(nu...2022.02.22プログラミング学習
プログラミング学習Nuxt(Vue)のマスタッシュ構文やdataで改行されない(white-space: pre-wrap;) vueの改行問題をまとめておきます。いろいろな解決方法があるようですが、CSSで解決する方法が簡単そうです。 Nuxt(Vue)のマスタッシュ構文で改行されない たとえば、複数のエラー文を表示する場合、\nはbrタグではなく、...2022.11.16プログラミング学習