React TypeScript Playground | 便利ツール集 by mosya
React TypeScript Playground | 便利ツール集 by mosya
これは簡単で楽！ スクロールバーのデザインを変更するCSSを確認しながら生成できるツール -Scrollbar.app
スクロールバーは、長いコンテンツのWebサイトに不可欠な要素です。ブラウザにはスクロールバーのデフォルトのスタイルがありますが、サイトのデザインに最適とは限りません。スクロールバーのデザインを変更するのは、CSSで簡単にできます。 スクロールバーのデザインを変更するCSSを確認しながら生成できるオンラインツールを紹介します。 Scrollbar.app Scrollbar.app -GitHub スクロールバーのデザインを変更するCSS Scrollbar.appの特徴 Scrollbar.appのの使い方 スクロールバーのデザインを変更するCSS スクロールバーのデザインを変更するCSSは、下記の通りです。 ::-webkit-scrollbar: スクロールバー全体 ::-webkit-scrollbar-thumb: ドラッグ可能なスクロールのハンドル ::-webkit-scrol
Windows 11の導入可否を調べる「PC正常性チェック」が「導入できない理由」を教えてくれるように進化、実際に使ってみた
2021年10月5日(火)にリリースが予定されている「Windows 11」をインストールするには、1GHz以上で動作する複数コアを搭載した64ビットCPUや4GB以上のRAM(メモリ)、64GB以上のストレージなどのさまざまなシステム要件を満たす必要があります。Microsoftが公式配布している「PC正常性チェック」は、自分のPCがシステム要件を満たしているかをサクッと調べられる便利なツールですが、一時削除からの復活を機に「使っているPCがWindows 11を導入できない理由」を教えてくれるようになったとのことなので、実際に使ってみました。 新しい Windows 11 OS へのアップグレード | Microsoft https://www.microsoft.com/ja-jp/windows/windows-11 2021年6月25日、Windows 11の発表と同日に配布され
CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper
WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い方 shaperの特徴 shaperはWebページの各UI要素に適用したスタイルの調整を表示を見ながらできるオンラインツールです。 例えば、スペースの量を変えるだけでデザインの印象はかなり変わりますね。 スペースの量を変えてみた フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸などの値を調整できます。 ライトモードとダークモードにも対応しており、上部のパネルで変更
ロゴのデザインに独創性があるか、パクリじゃないか、Webサイトやスマホでどう見えるか検証できるオンラインツール -TWM Logotester
せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノクロでも大丈夫か、色数は多すぎないかなどを検証できる無料オンラインツールを紹介します。
Dev Fonts
Filter fonts0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
MultiReplace - 置換条件をまとめて指定してテキスト変換
文字を入れ替える置換処理を何度も繰り返し行うことがあります。正規表現を使えば複数のパターンをまとめることもできますが、それでもなお、何度も何度も行わないといけないこともあるでしょう。 そこで使ってみたいのがMultiReplaceです。TSV形式で置換条件をまとめて設定できます。 MultiReplaceの使い方 利用例です。上に置換条件、中央に対象文字列、下に結果が出ます。 MultiReplaceは修正した内容がリアルタイムに反映されます。置換条件を追加すれば、それもまた反映されます。必要な結果が得られるように条件を変更しながら試してみてください。 MultiReplaceはVue製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MultiReplace ueruku/MultiReplace: TSV形式(=Excelコピペ)で複数の文字列を一
Responsively App - レスポンシブWebデザインを効率化
レスポンシブなWebサイトを開発する際には、様々なデバイスでの表示を一気に確認できると便利です。デバイス毎に画面幅が数多くあるので、それらをまとめて表示確認して調整していくという作業が不可欠です。 今回紹介するResponsively Appはそうした表示をまとめて行えるアプリになります。スクロールやイベントの追従もできます。 Responsively Appの使い方 立ち上げました。iOS系とノートPCでの表示をテストしています。 Webサイトを変えると、全体に反映されます。 表示を横に並べる形にしました。 表示するデバイスを選択します。カスタムサイズも可能です。 表示するデバイスを絞り込めます。 横向きに変更しました。 デバイスを指定して開発者ツールを開けます。 Responsively Appはクリックイベントをすべての表示に対して適用したり、ホットリロードにも対応しています。サイト
ネットの速度や遅延をサクッと＆詳細に計測できるスピードテストサイトがCloudflareから登場
インターネットの速度を計測できるスピードテストには、Googleの「インターネット速度テスト」やNetflixの「fast.com」がありますが、どちらも簡単な測定結果しか表示することができません。Cloudflareが公開した「speed.cloudflare.com」を使うと、アクセスするだけで回線速度やリクエストの遅延を計測できるほか、測定結果の元データの数値まで確認することができます。 Speed https://speed.cloudflare.com/ About Speed https://speed.cloudflare.com/about/ 「speed.cloudflare.com」にアクセスすると、すぐに自分が利用しているインターネットの回線速度の計測が始まります。 しばらくするとグラフや地図も表示されます。記事作成時点では測定対象は下りの速度のみで、ダウンロードする
幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator
ヒーローヘッダに使用する幅いっぱいの画像に与えるさまざまなグラデーションのスタイルシートを1クリックで生成できるジェネレーターを紹介します。 グラデーションのカスタマイズや自分の画像をアップロードすることもできるので、出来映えを確認しながら生成できます。
レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。 ブラウザベースのオンラインツールなので、OSを問わず利用できます。 Chrome, Safari, Edgeは問題なし、IE11はダメでした。
正規表現が嫌いな人のための正規表現チートシート・「I Hate Regex」
I Hate Regexは正規表現が嫌いな人の為に作られた正規表現チートシートです 任意のキーワードで目的を探す事ができて、目的の項目を選ぶと図式で解説しつつコードや実装例も出してくれます 更に使われた式の使用例も書かれているので調べつつ学べるようになっています 例えば電話番号をマッチさせたい場合は上記のページで学べる、といった感じです 目的で探せて、調べると同時に学んだり理解できるようになっている、まさに嫌いな人の為のチートシートですね 本アプリはソースコードも公開されていますので特に学びやすいかなぁと思います。ライセンス明記は無いみたいなので商用利用する際は開発者に問い合わせください I Hate Regex
Canvas要素やWebGLでアニメーションが楽しめるコード製フォント「Leon Sans」
キム・ジョンミン氏がコードで作成した幾何学的なサンセリフ体のフォント「Leon Sans」は、HTML5のCanvas要素やWebGLを用いてカスタムアニメーションが楽しめるというものです。 Leon Sans https://leon-kim.com/ Leon Sansはコードで作成されたフォントで、各文字の描画ポイントの座標値を持っているため、フォントの線の太さを変更したり、アニメーションを作成したりすることもできるというフォントになっています。Leon Sansで表現可能なアニメーションは以下の通り。 線が引かれていく様子をアニメーションで表現する「Drawing animation」。 各文字の線の太さを変更する「Weight change」。 フォントの線を波のように揺らす「Wave」 「Drawing animation」＋「Weight change」のような「Metaba
これで分かった！CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ
この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作成できるツールもあります。覚えようと思ってなかなか手がつかなかったひとも、これならすぐにはじめることができますよ。 CSS Gridの使い方ガイド、チートシート、ゲームまとめ Grid Garden CSS Gridレイアウトプロパティを使うことで、人参に水を与えながら自分の農園を育てていく、ゲーム感覚でGridプロパティを学ぶことができます。ゲームの各レベルでは、ゲーム達成に利用できる他のプロパティについてもサンプル例と一緒に解説されています。 Bonus – CSS Dine
scrcpy - Androidをリモートから操作
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Androidアプリを開発していて、そのテストはどう行っているでしょうか。エミュレータを使っても良いですが、カメラやファイルアクセスなどで実機の方がテストしやすいことがあります。かといって毎回スマートフォンを持ち直すのは面倒です。 そこで使ってみたいのがscrcpyです。デスクトップからAndroid端末を操作できるソフトウェアです。 scrcpyの使い方 接続しました。 キーボードも使えます。 Webサイトにアクセスしたところ。 アプリ一覧も出せます。 音楽は実機から流れます。 scrcpyを使えば母艦からAndroidの実機が操作できます。エミュレータでは満足な速度が出ていなかったら、scrcpyを使って素早く操作できます。マルチタップのような操作は難しそうですが、大抵のAnd
Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」
FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければならない事も多く、正直言って面倒です。使うたびに検索してる、なんて方もいるかもしれませんね。 こちらはそんなFlexboxを、完成形を確認しながら選択肢を選ぶだけでコードを完成出来る、というもの。動作するチートシート、みたいな感じでした。 使ってみる 使い方はとても簡単です。まずは下にスクロールします。アイテムの数やflex-flowを聞かれます。次にwrapやjustify-contentなどを聞かれるので選択肢を選んでいく、という流れ。最終的にできたレイアウトを実装する為のCSSコードをコピーすればOKです。僕の下手な説明を読むより、使ってみた方が早いかも、という程度には
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
McAnswers
画像を扱うプロジェクトに役立つ！CSSフィルタのさまざまなエフェクトをコピペで利用できる無料ツール -FilterSS
CSS GridとFlexboxの便利なツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Layout Generator
SVGのパスデータを可視化するシンプルなWebアプリ・「SVG Path Visualizer」
