はじめに ネットにテキストの読み上げ方法が載っていたのでReac+TypeScriptベースに書きなおしてみました。 元記事: Web Speech API の音声読み上げ機能の実装方法 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. おわりに 音声読み上げの部…

はじめに 標的とか目玉とかで同心円を書きたい時にgradientをどう使うかの実験です。 2通りやってみた。 実行例 See the Pen bullseye by kalz2q (@kalz2q) on CodePen. 説明 左は background: linear-gradient で右は background: radial-gradient です。 …

はじめに 葉っぱをCSSで描く例がネットに上がっています。 あの鋭角をどうやって出すのかなぁ、と疑問に思ってチャレンジしました。 実行例 See the Pen react-css-leaf-eye by kalz2q (@kalz2q) on CodePen. 解説 意外にも三角形を描くときのようなborderを…

はじめに TEDのhttps://www.youtube.com/watch?v=mNKz3devFAw と言う動画でCSSでヒゲを描いていた。 border-bottom: 0 0 0 100% とかで、ひげの先、鋭角を作ることが出来る のが参考になりました。 再利用が出来るように box の中に配置してみました。 実行…

はじめに CSSで正三角形を描くのにborderを使う技がありますが、CSSのコマンドにpolygonがある。 clip-path: polygon(0% 87%, 50% 0%, 100% 87%); 紙と鉛筆で中心を割り出したりしなければいけないけれど、ボーダーで描くより頭は楽かもしれない。 実行例 Se…

はじめに ちょっと前に作った色とその名前をランダムに表示するプログラムを応用して人名を表示するページを作りました。 実行例 See the Pen react-random-name-picker by kalz2q (@kalz2q) on CodePen. 解説 背景色を変えるのを残したのはその方が画面が変…

はじめに Canvasに少し慣れて来た。 今回はuseEffectで出来ました。 再読込すると迷路が書き換わります。 棒倒し法と言うアルゴリズムだそうです。 実行例 See the Pen react-maze by kalz2q (@kalz2q) on CodePen. 解説 Reactのhookの使い方ですが、リアル…