Tekrog

プログラミングの備忘録と情報発信

2021年11月の投稿

【Sass】HWBカラーモデルとは?hwb関数について解説【CSS】

【Sass】HWBカラーモデルとは?hwb関数について解説【CSS】

直感的に色を扱えるHWBカラーモデルについて解説します。このモデルを利用したhwbという色関数がSassに実装されています。CSSにも存在しますが、執筆時点で対応しているブラウザはSafariのみです。HWBについて説明した後、RGBやHSLとの関係についても紹介します。

CSS
Sass
【Sass】@useで使える色の関数まとめ

【Sass】@useで使える色の関数まとめ

Sassに@useといった新しいモジュールシステムが導入されるため、従来通りの書き方が出来なくなります。この変更による影響は関数の書き方にも及びます。そこで今回は新しいモジュールシステムに対応した色の関数を全てまとめ、その使い方を解説していきます。

CSS
Sass
【Thunderbird】メッセージ送信ダイアログが消えない時の解決法

【Thunderbird】メッセージ送信ダイアログが消えない時の解決法

無料のメーラー「Thunderbird」でメッセージを送信した際、「メッセージを送信しています」「Sentフォルダーへメッセージをコピーして言います…」とういうダイアログが消えなかったので、消し方の備忘録です。

アプリ
PHP・JavaScript・Pythonの配列操作の違いまとめ【比較】

PHP・JavaScript・Pythonの配列操作の違いまとめ【比較】

PHPとJavaScriptの書き方の違いについて、前回は仕様の違いについてまとめました。今回は配列操作編です。

JavaScript
PHP
Python
PHP・JavaScript・Pythonの紛らわしい仕様の違いまとめ【比較】

PHP・JavaScript・Pythonの紛らわしい仕様の違いまとめ【比較】

PHPをJavaScriptを並行して書くことが多くなってきたので、両者の書き方の違いについて立ち止まりがちな部分に絞ってまとめました。今回は両者の「仕様の違い」についてです。

JavaScript
PHP
Python
PHP7からPHP8へのバージョンアップが上手くいかない場合の対処法

PHP7からPHP8へのバージョンアップが上手くいかない場合の対処法

この記事は、php -vでPHP8のインストールが確認できたにもかかわらず、PHP8が使えない場合の対処法になります。

PHP
【Vue3+TypeScript】v-onイベントハンドラの引数のキャスト

【Vue3+TypeScript】v-onイベントハンドラの引数のキャスト

v-onディレクティブで紐づけた「イベントハンドラ」や「トランジションフック」の引数から要素ノードのプロパティを参照、アクセスしようとするとTypeScriptではエラーが出てしまいます。そこで引数のダウンキャストが必要なのですが、「イベントハンドラ」と「トランジションフック」でそれぞれキャストの方法が違うので順番に説明します。

Vue.js
【Vue+Router】CompositionAPIのナビゲーションガードの書き方

【Vue+Router】CompositionAPIのナビゲーションガードの書き方

ue Router4.x系のナビゲーションガードではVue3のComposition API用に新しいものが提供されています。だけどbeforeRouteEnterに該当するガードが無い…と少し戸惑ったので備忘録を残します。この記事ではComposition API用の関数の紹介、beforeRouteEnterに該当するガードが無い理由とその対処方法について説明しています。

TypeScript
Vue.js
safariでCSSアニメーションがカクついた時の対処法

safariでCSSアニメーションがカクついた時の対処法

クロスブラウザテストをした際、SafariだけCSSアニメーションがカクついてうまく表示されない場合があります。今回はその実例を示した後に原因を解説し、解決策を2つに分けて説明します。

CSS
アプリ
【Vue.js3】カスタムコンポーネントでv-modelを使う方法

【Vue.js3】カスタムコンポーネントでv-modelを使う方法

Vue3におけるv-modelの使用方法について解説します。また、Vue2ユーザのためにVue3での仕様変更についても併せて説明しています。

TypeScript
Vue.js
スクロールスナップ+Barba.jsで遷移前のページの元の位置に戻る方法

スクロールスナップ+Barba.jsで遷移前のページの元の位置に戻る方法

Braba.jsで「別のページに非同期遷移した後、遷移前のページの遷移前のスクロール位置に戻る」コードを紹介します。

CSS
JavaScript
JavaScriptで円グラフ(ドーナツチャート)を作る簡単な方法

JavaScriptで円グラフ(ドーナツチャート)を作る簡単な方法

サムネイルのような円グラフの作り方を紹介します。

JavaScript
CSSでグラデーションのかかったプログレスバーを作る方法と注意点

CSSでグラデーションのかかったプログレスバーを作る方法と注意点

グラデーションのかかったプログレスバーの作り方を紹介します。ただしCSSのlinear-gradientの仕様を理解していないと綺麗なプログレスバーになりません。そこでlinear-gradientの仕様を説明した上で、失敗しない作り方について説明します。

CSS
JavaScript
スクロールスナップ時にスクロール量を取得する方法

スクロールスナップ時にスクロール量を取得する方法

スクールスナップ時にスクロール量を取得する方法を紹介します。

CSS
JavaScript
HTML要素の位置を取得する方法とズレた場合の対処法

HTML要素の位置を取得する方法とズレた場合の対処法

この記事では、ページの一番上からHTML要素までの大きさ、要素の位置の取得方法を説明します。ただし、JavaScriptのコードの記述場所に注意しないと取得した値がずれてしまいます。そこでコードの記述位置に関して陥りがちなミスも伏せて説明します。

JavaScript
Vue3でTypeScriptを使う方法【CompositionAPI】

Vue3でTypeScriptを使う方法【CompositionAPI】

Vue.jsでTypeScriptを使う方法、使う際に最低限知っておきたいことをまとめました。データや関数、算出プロパティなど代表的な各機能におけるTypeScriptの記述方法について解説しています。ただしVueの対象バージョンは3以降になります。

TypeScript
Vue.js
インクのようなマウスストーカーの作り方

インクのようなマウスストーカーの作り方

インクのようなマウスストーカーの作り方と紹介します。

JavaScript