「Microsoft Edge」は画像編集ツールである説 ～オンラインもローカルもいきなり編集／編集した画像はクリップボードにコピー可能、ネット上のミーム画像編集に便利【やじうまの杜】
知っておくと仕事が捗る便利ツール17選 - Qiita
はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s
エンジニアのための十徳ナイフ「DevToys」がバージョン２になってクロスプラットフォームやCLI対応しさらに便利すぎる - Qiita
はじめに 以前紹介させていただき、2022年Qiitaのいいねランキング18位、ストックランキング20位を記録したこちらの記事の続編です！ DevToysはリリース後しばらく定期的なバージョンアップが続けられていましたが、去年の7月からぱったりとアップデートが止まっている状態でした。 リポジトリや作者のXを見るとバージョン２の開発を行っているようで、今か今かと待ち続けていましたが数日前リリース予告のポストを見つけて、今日ついにプレリリースされました！ ということで早速紹介していきます！ DevToysとは DevToysは「開発者のためのスイスアーミーナイフ」の紹介文の通り、開発時によく使うツールを十徳ナイフのようにまとめたアプリとなっています。 JSONの整形とかエンコードデコードetc... プログラミングや保守運用の調査でやりがちな作業をいちいち変換サイトを探したり、エディター拡張機
急に仕事で英語を使うことになった社会人に贈るまとめ(便利ツール/コンテンツ) - Qiita
急に仕事で英語を使うことになった社会人に贈るまとめ(便利ツール/コンテンツ/勉強本) 新規案件参画初日。 Goやk8sを使えることなってワクワクしていたあの日、 参画してすぐにチーム内のエンジニアで日本人が自分以外に一人であること、 それ以外のチームメンバー全員が外国籍のメンバーになることを知らされた そこのあなた！ 数年前の私です（笑） さらに2ヶ月後には、開発チームで唯一の日本人になって死にそうになりました。 その時は突然にやってきます。 当時、私の英語の経験というと大学受験の対策のみと言っていいほどで、 そこから10年以上経過していたため、高校英語すらも怪しい状態でした。 英語学習を開始して 半年ほど経過した時のレベルがTOIEC450程度だったので、学習開始当初はおそらく400点を切っていたレベルであると思います。 そこから英語学習を開始し、2年ほど経過した今では、便利ツールを活用
便利で差がつく、ずるいWeb制作ツール・素材90選【2023年ベスト】
2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。
ChatGPTと比較！Bing ChatとGoogle Bardの使い方と便利な機能を1分で解説 | ライフハッカー・ジャパン
仕事や生活を助けてくれるツールとして定着しつつあるチャット型の文章生成AI。 現在の主要サービスであるChatGPTとBing Chat（新しいBing）、Google Bardについて、はじめ方やできること、料金、履歴の確認方法やスマホからの利用方法についてまとめました。 ChatGPT：有料プランで精度が爆上がりする元祖チャット型文章生成AIはじめ方はじめて利用するときは、「Sign up」からアカウントの作成を行ないます。メールアドレスや電話番号を登録するか、Googleアカウント、マイクロソフトアカウント、Appleアカウントのいずれかを利用してログインします。 できること日本語で利用でき、テキストで質問を入力して回答を得たり、翻訳をしたり、詩や物語を作り出したりと、工夫次第でさまざまな使い方が可能です。回答はテーブル（表）形式で出力することも可能。また、プログラミングコードの生成
Web制作に役立つ超便利ツールが登場！ HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3
HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無料アプリで、今までオンラインであちこちの各ツールを利用していた人とかにかなり便利なツールだと思います。 He3: Modern Developer Toolbox He3の特徴 He3のダウンロードとインストール He3の使い方 He3の特徴 He3は、200種類以上のWeb制作に役立つ便利ツールが詰め込まれたデベロッパー向けのツールボックスです。 200種類以上あるツールは、カテゴリ別にまとめられており、スマート検索機能ですぐに
最近のWeb制作に役立つ、CSSの便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
10年弱エンジニアをやってきてわかった、あなたの開発効率を倍にしてくれるツール37選｜苦しんでプログラミングを学んだ柴犬（くるしば）
※こちらの記事がはてブの総合人気エントリ、noteの「先週もっとも多くよまれた記事」「先週もっともスキされた記事」に入りました！ こんにちは。 苦しんでプログラミングを学んだ柴犬こと、くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 今年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに6000人以上の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — 苦しんでプログラミングを学んだ柴犬（くるしば） (@shiba_program) September 13, 2022
Cerebro - ｋ本的に無料ソフト・フリーソフト
Google 検索 / Twitter 検索 / Everything 検索 / 定型文入力 等々を実行可能なコマンドランチャー。 Google 検索 / Google 翻訳 / Twitter 検索 / Everything を利用したファイル検索 / クリップボードの履歴保存＆再利用 / 定型文の登録＆コピー / Windows コマンドの実行 / IP アドレス確認 / ローカルパスや URL を開く / ユニバーサルアプリ（ストアアプリ）実行 / Steam のゲーム実行 / Windows の各種機能（ミュート / 明るさ調整 / スリープ 等々）を実行可能なコマンドラインランチャーです。 「Cerebro」は、多機能なコマンドランチャーです。 専用のボックスに入力されたコマンドを実行することができるコマンドラインランチャーで、ローカルファイルの検索からウェブ検索まで幅広い機能に
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design
WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン
これは便利すぎる！ Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist
ターゲットブラウザを決める時に役立つ便利なツールを紹介します。 条件は細かく設定でき、下記は日本のユーザーを対象、シェアが0.2%以上あり、現在サポートされていないブラウザを除いたものです。iOSのSafariが多く、Chrome for Android, Chrome for desktopと続いています。 Browserslist Browserslist -GitHub Browserslistの特徴 Browserslistの使い方 さまざまな条件でターゲットブラウザを調べる Browserslistの特徴 Browserslistはフロントエンドでよく使用されるツール（Autoprefixer, Babel, ESLint, PostCSSなど）でブラウザのターゲットや互換性を共有するツールです。 0.5%以上シェアがあるブラウザ、最新2バージョンのブラウザ、サポートが終了してい
便利な無料ツールが登場！ Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer
1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。 Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し
これは便利！ありそうでなかった最新Web、オンラインツール36選
この記事では、「それ、何使ってるの？」と思わず聞きたくなるような、最新のWeb、オンラインツールをまとめてご紹介します。 めずらしいだけでなく、面倒で手間のかかる作業がほんの数クリックで完成の時短アイテムや、今までなかったけどあると便利なツールや素材を中心にセレクト。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. アイコンツール 4. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Make Way Grid Effect 一枚の画像を選択すると、他の画像が場所をゆずって、道を空けてくれるアニメーションエフェクト。 CSS Shadow Gradients 2色の配色によるグラデーションをつかった影、シャドウグ
コピペ一発！便利なCSSレイアウト生成ツールおすすめ12選（Grid ＆ Flexbox編）
あなたが、いま実装しようとしているレイアウトは、おそらくCSSで実現できるでしょう。 ただし日常の業務をこなしながら、日々進化するCSSの最新テクニックを習得するとなれば、話はまったく別です。 仕事で使えるCSSの技術を、時間をかけて学ぶよりも、ボタンやドラッグ＆ドロップ操作で、思い通りのレイアウトを自動で生成できる「ジェネレーター（英: Generator）」を活用してみましょう。 新しいプロジェクトにコピー＆ペーストで利用でき、瞬時に思い通りのレイアウトを作成、はじめてのひとにもオススメの時短ツールを厳選しています。 コピペ一発！便利なCSSレイアウトジェネレーターおすすめ12選（Grid ＆ Flexbox編） ここでは、CSS Grid と Flexbox で表現できるレイアウト用ジェネレーターと便利なリソースを一緒にまとめてご紹介します。 Layoutit! grid-templ
JSON を行単位にわかりやすく展開してくれるコマンド gron がピンポイントでとても便利
JSON を行単位にわかりやすく展開してくれるコマンド gron がピンポイントでとても便利 2022-06-13-1 [Programming] コマンドラインでの JSON の操作には jq (軽量JSONパーサ)[2017-10-24-1] を使っています。万能で便利なんですが、奥まったところにある値だけを取りたいときとかちょっと面倒なんですよね。ちらっと値を見たいだけなのにおおげさになっちゃいがち。 ということで、 gron というのを使ってみました。 GitHub - tomnomnom/gron: Make JSON greppable!JSONをgrepしやすくするコマンドラインツールgronの紹介 - Qiitagronでjsonの扱いが楽になった話 – Tower of Engineers あ、これでいいや。 いわゆる「顧客（＝私）が本当に必要だったもの」だわ。 例えば、
便利なツールが登場！ 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images
次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, GIF）の最適化と圧縮、画像の新しいフォーマット（WebPやAVIF）への変換と最適化が簡単にできるオンラインツールです。 WebPとAVIFは高い圧縮率を備えたフォーマットです。 WebPは簡単に言うとPNG, JPG, GIFの良いとこ取りのフォーマットで、24ビットのフルカラーをサポートしています。高画質の透過PNGのサイズが大きくなってしまうことやGIFアニメーションで色数が少ない悩みも解決します。IE以外の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Wi-Fiトラブルの解決に便利！ Windowsの隠れ便利機能「Wlan Report」を活用しよう【イニシャルB】
