Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。 Web制作の面倒におさらば、CSS時短ツール厳選リスト CSS pattern backgrounds ジグザグやサークル円などシンプルな幾何学模様をつかったCSSパターンをコピペで利用できるオンラインツール。 CSS Polka Dot Generator ポルカドット柄を作成、カスタマイズできるCSSツールで、影を設定するとよりレトロな印象に仕上がります。 CSS
UIデザインに最適！ トーンを合わせたカラーでカラーパレットを簡単に生成できる無料ツール -The good colors
WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。 デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポートしています。 The good colors The good colorsは、OKLCH色空間を使用してカラーパレットを作成できるオンラインツールです。OKLCH色空間とは、明度（Lightness）、彩度（Chrome）、色相（Hue）の値で構成されるカラーで、LCHに比べて色相と彩度の均一性が改善された色空間です。そのため、明度と彩度が一貫された知覚的変化が保証されます。 OKLCH色空間を使用したカラーパレット 使い方は、簡単です。 「Lightness」と「Chrom
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
AltTab - Windows alt-tab on macOS
Introduction AltTab brings the power of Windows’s “alt-tab” window switcher to macOS. Features Switch focus to any window Minimize, close, fullscreen any window Hide, quit any app Customize AltTab appearance (e.g. show app badges, Space numbers, increase icon, thumbnail, title size, etc) Custom trigger shortcuts with almost any key Blacklist apps you don’t want to list or trigger AltTab from Dark
キーワードツール考 - ブログ - 株式会社JADE
みなさんこんにちは、伊東考（こう）です。 「いつもなんとなくやっていることだけど、そういえば詳しくは知らなかったかも」 な事象にDeep Diveする「考」シリーズの爆誕です（バチバチ）。 記念すべき第1弾は、「キーワードツール考」。 今回は、特にサードパーティー製キーワードツールの謎に迫ります。 ここでいうサードパーティーとは、Google公式ツールに対するAhrefsやMozなどのことを指します。さて、みなさんはサードパーティー製キーワード調査ツールとGoogleキーワードプランナーをどのように使い分けていますか？ 「Ahrefsだと、各キーワードの検索ボリューム以外にも様々なオリジナル指標があって便利！」 という人もいれば、 「Googleが公式に出しているツールが一番正確に決まっているから不要」 という人もいると思います。 更には、そもそも「サードパーティーのキーワードツールは、デ
UI以外でも大活躍！Figmaで修正に強いデザインデータを作る方法
本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。初回で焦点を当てるのは「Figma & UI以外のデザインデータ」についてです。 こんにちは！SmartBankのデザイナーをしている春山（@yuki930）です。 私たちは、B/43というVisaプリペイドカードと家計簿アプリがひとつになった「家計簿プリカ」という新しいジャンルのサービスを運営しています。 初回となる今回は、「Figma & UI以外のデザインデータ」をテーマに、FigmaのAuto layout機能、Component機能、Component Properties機能を活用した、変更に強いデザインデータの作りかたを解説します。 UI以外をFigmaでデザインするメリット・デメリット 最初に、UI以外のディスプレ
これは便利すぎる！ 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バージョンのブラウザ、サポートが終了してい
レスポンシブデザインの確認に便利なツールが登場！複数のデバイスサイズで同時確認できる優れもの -Responsivize
Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！ iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。 Windows, macOS, Linux対応のアプリで、しかもオープンソースです！ Responsivize Responsivize -GitHub Responsivizeの特徴 Responsivizeのダウンロード Responsivizeの使い方 Responsivizeの特徴 Responsivizeは、レスポンシブ対応のWebページをさまざまなデバイスのサイズで確認できる便利ツールです！ 当方の日本語環境（M1 Mac, Windows10）で問題なく動作しました。 Responsivize レスポンシブWebサイトの確認が簡単にで
Macの初期化をJamfで"完全に"自動化した - rela1470のブログ
Macの初期化をJamfで "完全に"*1*2*3 自動化しました! 勝利! だれ 株式会社Kyash Information Security Team Corporate Engineering のわたなべです。 これはなに KyashのTech Team内で、夏のアドベントカレンダー的な感じでブログを集中的に書くぞキャンペーンをやっています! 今回はプロダクト側ではないチームから記事をお届けします! blog.kyash.co ということで 今回はJamf ProでMacの初期化を自動化した話を書きます。 会社ブログを1本書けと言われたので何を書こうかな— Jun Watanabe＠rela (@rela1470) 2021年7月21日 他のネタも、冬のアドベントカレンダーまでには...書きますね...きっと...may be... さてさて、Macの初期化に関しては色々とプロダクト
Web制作時にGoogleChrome拡張のAccessibility Insightsを使ってアクセシビリティの評価を行う | DevelopersIO
いわさです。 皆様、アクセシビリティに配慮したWebサイトの設計されてますでしょうか。 Webアクセシビリティを評価するためのツールがMicrosoftから提供されていますので紹介したいと思います。 Accessibility Insightsというツールです。 元々はMicrosoftにて内部開発されていたもので、2019年にオープンソース化されています。 本日はWebサイトのアクセシビリティの評価を行いたいと思いますが、AndroidやWindowsのアプリケーションにも対応しています。 Webアクセシビリティの場合はGoogle Chromeの拡張として提供されています。 Webアクセシビリティとは 全ての利用者や環境下において、使用できるようにWebサイトが設計・開発されていることを指します。 弊社の以下のエントリをご参照ください。 使ってみた テスト用のWebサイトはSeleni
ブラウザ拡張Selenium IDEでユーザー操作を記録・再現できる！UIテストの自動化に活用しよう - ICS MEDIA
ブラウザ拡張Selenium IDEで ユーザー操作を記録・再現できる！ UIテストの自動化に活用しよう Selenium IDE（セレニウム・アイディーイー）とは、ブラウザ操作を記録・再現できるChrome、Firefoxで利用可能な拡張機能（アドオン）です。 手軽に記録・再現ができるため、アイデア次第で色々な使い方ができます。筆者は、会社の打刻操作（社内サイトへアクセス → ログイン → 打刻ページへ遷移 → 打刻ボタンをクリック）を記録し、自動実行することでいち早く出社ができるようにしていました。 その他にも開発時に繰り返し行うようなデバッグ作業やルーティーン作業を記録することで、以下のような活用もできます。 入力フォームなどに文字を入力する操作を記録しておき、自動入力させる。 ゲームやSPAのデバッグ時に、スタート画面からデバッグしたい画面までの移動操作を記録しておき、任意の画面へ
ABテストの統計的な信頼性を簡単に計算するExcelツール - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ LPOを中心に様々なウェブサイトの改善テストを行っているデータアーティスト社の社内資料「営業向け ABテストの統計学 データアーティスト」のプレゼン資料を一般公開しましたのでここにご紹介。ダウンロードして使えるABテストの統計的な信頼性を簡単に計算するExcelファイルもあります！ — SEO Japan データアーティスト社では、ABテスト、多変量テストなどを駆使したウェブサイトのクリエイティブテストを行っていますが、スタッフ教育の一環で様々な教育用資料を作成しています。今回はそんな中から、基本的ながらも初心者には役に立つであろう、ABテストの信頼性に関する資料を紹介します。 ・ABテストを1
CSSファイルから未使用のスタイルを削除する4つの方法
CSSの未使用のスタイルを削除するツールPurgeCSS、PurifyCSS、UnCSSの使い方、また、Chrome デベロッパーツールで手動で削除する方法を紹介します。 BootstrapやTailwind CSSなど、CSSのフレームワークを使用する際、すべてのスタイルを使用することはほとんどありません。また、再利用可能なUIコンポーネントを使用する場合なども、不要なスタイルがあります。 4 Ways to Remove Unused CSS by Chidume Nnamdi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 再利用可能なUIコンポーネント内の未使用CSS 1. PurgeCSSで、CSSファイルから未使用のスタイルを削除する方法 2. PurifyCSSで、CSSファイルから未使用のスタイルを削除する方法
タブレットUIのアクセシビリティ改善とユニバーサルデザインへの目覚め｜3284
Ubie Advent Calendar 2019 15日目の記事です Ubieでデザイナーをしている3284です。 入社して一年が過ぎようとしています。 普段は医療機関向けのAI問診Ubieというプロダクトを作っています。 今回は、個人的にも挑戦だった患者向けタブレット問診のアクセシビリティ改善についてざっとまとめていけたらと思います。それに伴ってユニバーサルデザインへの目覚めについても少し。 タブレットUIのアクセシビリティ改善 Ubieのタブレット問診は、簡単に言うと病院での初診時に紙問診ではなく、タブレットで問診をするプロダクトです。 子供から高齢者までが対象で、ほとんどの方が普段触ることなく院内で初めて触るものとなります。 指標としては多くの方が、タブレットを一人で使いこなし問診を終えられるか。タスクの完了率が大事になってきます。 その為患者向けプロダクトで大事になってくる指針は
Windows 10を32bit版から64bit版に変更する方法
すこぶる評判の良かったWindows 7ですがサポート終了が間近に迫っています。 それを見越してか、2019年1月にはWindows 10がシェア1位となりました。 その間もデバイスは進化を続け、CPUも6コア8コアが一般に流通し、SSDやM.2といった高速のストレージが新PCの標準になりました。 我が家にはそんな世の中の流れを追従するように、Windows XPから7、10へとOSを乗り換えたPCがあります。OSを変遷するごとにパーツ交換し延命してきました。 マザーボードが対応するなかで最も早いCPUへ変更。HDDをSSDへ。大型モニタ用にGPUを追加。さらにメモリも大容量のものに変更し…。と購入時の構成で生き残っているのはケースとマザーボードだけという大手術ぶりです。 しかし、ここにきて順調だった延命策に問題が発生しました。32bit OS全盛のWindows XP時代からアップデート
ウェブ制作がすご楽に！便利な最新オンラインツール33個まとめ
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用することで、面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると「これなしじゃ考えられない。」、そんな便利ツールが揃います。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. 生産性アップツール ウェブ制作がすご楽！便利な最新オンラインツールまとめ デザインコレクション SVG Arista このツールはCSSコードを使って、アップロードしたSVGファイルのstrokeとfillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロ
Figmaを使って開発チームの生産性をあげるプロダクトマネジメント｜坪田 朋
開発現場に Figma を導入してチームの生産性が上がった話です。 デザインドリブンで、プロセスを可視化しながら進める僕の開発スタイルと相性が良いので、最近はクライアントワークでも啓蒙しています。 Figmaは平たく言うとデザインコラボレーションツールですが、こちらのリンクから動画をみると雰囲気が伝わると思います。 https://www.figma.com/ UIデザインツールのリッチ化ではなく、開発チームとコミュニケーションのしやすさが強みで、1人でUIを作るならSketchの方が使いやすいかもしれません。エンジニアやプロダクトマネージャーとガンガン議論して仕様を詰めていくスタイルを好む人はFigmaと相性良いです。 デザインプロセスが可視化されるためプロダクトマネージャー、エンジニア視点でも有用なツールだと思います。 Figmaを使ってよかった点まとめ・「デザインをみんなのモノに」を
📃 Webページをそのままの状態でローカルに保存するツールを作った話 - Qiita
はじめまして。yamaimo (@yarnaimodev) です。Qiita 初投稿...というかネット上にちゃんとした記事を上げるの自体初めてな気がします。 1998 年生まれで、プログラミングとか Web デザインは独学で 3 年ぐらいやってます。TypeScript / Firebase / Node.js / React あたりが特に好きです。 この前 coliss で紹介された Can't Unsee を試してみたら 1 回目が 7,630 点、2 回目が 7,930 点でした。1 小規模ですが Mastodon インスタンスを管理してます。あと Helix キーボード をこの前組み立てた2んですがキー配列を変えたのがなかなか覚えられなくて死んでます。 開発環境は基本的に WSL + Hyper + fish shell と VSCode です。 今回 Puppeteer を使っ
Notionの使い方まとめ。必要な情報をこれひとつで管理する5つの方法｜平野太一
【2020/12/24 更新】12月時点でのページ管理方法をまとめました 📋 【2020/12/04 更新】「インプットを行動に繋げるためのNotion活用術を聞いてきた！」で、自分のNotionの使い方を話しました 💬 【2019/10/01 更新】10月時点でのページ管理方法をまとめました 📋 【2019/03/03 更新】3月時点でのページ管理方法をまとめました 📋 「Notion」という、何でもござれの万能ツールがあります。 ざっくりというと、Googleドキュメント(Dropbox Paper)、Googleスプレッドシート、Trello、タスクアプリ、GitHub Wikiを合体させたようなサービスです。 ノートをとったり、情報を一箇所にまとめたり、タスクをつくったり、データを表で見たり。正直、何でもござれです。 ▲ 自由にページをつくって、メモしたりWebブックマーク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Windows PC買ったらまずインストール！定番から、知られざる名作アプリまで16選 | ライフハッカー・ジャパン
