Firefoxの開発ツールで色覚シミュレーターを有効にする方法
さまざまな色覚タイプの見え方をシミュレートする機能がFirefoxに搭載されていたのご存知でしたか？僕は知らなかったんですが、実はこの機能、デフォルトでは有効になっていないので設定の方法をメモっておきます。メモっておかないと忘れそうなんでw 以下、Mac版Firefox 76.0.1で確認をしました。 1. シミュレーション機能を有効にする アドレスバーに「about:config」と入力して「gfx.webrender.all」を検索します。設定値が「false」になっているので切り替えのアイコンをクリックして「true」にします。 ちなみに、「NVIDIA製GPUを搭載する一部のWindows環境で、『WebRender（Quantum Render）』がデフォルトで有効化された 」とのことで、gfx.webrender.allをtrueにしなくてもシミュレーション機能が使える場合があ
レスポンシブWebデザイン対応のWebサイト開発に特化したオープンソースのWebブラウザ・「Responsively」 - かちびと.net
ResponsivelyはRWDの開発に特化したWebブラウザです。オープンソースとしてソースコードも公開されています 各スマホのデバイスやタブレット、PCなど異なるデバイスでどのように表示されるかを一括確認できる、というもの Electronベースとなっています。試しに使ってみました こんな感じで設定した各デバイスで指定したWebページが表示されます。スクロールやページの移動は全ウィンドウで連動しています。 ↑ インスペクタもついており、その場で編集、表示確認等を行う事が出来ます ↑ また、全デバイスのフルスクリーンショットもワンクリックで可能となっています。もちろん各デバイス単位でも撮影可能。撮影されたSSはドメイン、日付、撮影した時間を名前としたファイル名やフォルダ名で保存されますので上書きする心配もありません 尚、デバイスはかなりの量が用意されているのでお好みに合わせてウィンドウを
びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
CodePenっぽいコードプレビュー・管理のできるChrome拡張【Web Maker】
2017年10月24日 便利ツール 先日行ったCSS Nite in HIROSHIMA Vol.10では初めてのライブコーディングを行いながらの登壇でした。今回はそこでコーディングデモを見せるために利用したツール「Web Maker」を紹介します。 ↑私が10年以上利用している会計ソフト！ Web Makerって何？ Web MakerはHTMLやCSS、JavaScriptのコードを書けば、リアルタイムでプレビュー表示できるChrome拡張です。こういったコードのプレビュー・保存はずっとCodePenを使っていましたが、Web Makerのいいところはオフラインで使えるところ！CSS Nite in HIROSHIMAの会場ではWifiが利用できなかったのと、仮にインターネット環境があったとしても遅延があると嫌だなぁということで今回はWeb Makerを試してみました。 ちなみにCod
Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの
コマンドラインツール ターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。 まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。 気になったのでこもりさん（@chiper）が販売しているDevelopment Environments for Web Designersというのを買ってみました。今あまりWebデザイナーではないけどw Brackets メインで使っているエディターです。もともとはエディターの移行を考えていてSublime Textがあまりなじまなかったときに、プラグインが入れられリアルタイムリロードが簡単にできるエディターとして触ってみました。以降ずっと使っています。Advent Ca
【Macアプリ】Webデザイナー向けの便利なおすすめMacアプリ28個
「なんかもっとこう、サクサクとパソコンをいじれないかなあ・・・・」 Macをお使いのあなたはこんな悩みを抱えたことはありませんか？ 確かに、ショートカットキーを使いながら仕事を効率化したり、ツールを利用して今までよりも何倍もの速さでパソコンで仕事ができたら理想的ですよね。 事実、できる人はすでに便利なMacアプリをダウンロードし、利用しています。 仕事を効率化させるアプリを使うのとそうでないのではスピードに大きな差が生まれてしまいます。 そこで今回は、日々Macを使って止まないあなたに、仕事が今より3倍はかどるオススメのMacアプリを28コ紹介します。 この記事を読むことで仕事を効率化できるアプリを知ることができ、今よりもサクサクにパソコンをいじることができます。 ぜひ参考にしてみてください。 デザイナーさんが仕事が圧倒的にはかどるMacのオススメアプリ10選 Alfred まず紹介したい
CSSDesk - Online CSS Sandbox
body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 100px; font-size: 13px; } div { background: #fff; margin: 0 auto; width: 200px; padding: 100px; text-align: center; /* border-radius */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* box-shadow */ -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2
RWDの定番チェックツールとして期待できる「Responsive Inspector」が便利かも
レスポンシブWebデザインで作ったサイトをチェックするための定番ツールになりそうな「Responsive Inspector」というChrome拡張機能が先日リリースされていたので、ちょっとご紹介。なんとこの拡張機能、1つのツールで以下の3つができてしまいます。 ページに設置されたメディアクエリの確認 ブラウザのウィンドウ幅の変更 ページ全体のスクリーンショット 過去にいろいろなツールを使ってきましたが、この3つの機能をまとめてできるのはかなり嬉しいツールですね。まだβ版で、スクリーンショットはJPGしか保存ができませんが、開発者サイトのコメント欄には、次のリリースではPNGでも保存できるようにしたいと書いてありました。今後の機能改善にも期待できそうです。使い方も以下のように簡単です。 メディア・クエリの確認 インスペクターを開くと、以下のように閲覧しているページに設定されているメディアク
Fireworksユーザーに朗報？海外で話題の新しいWeb制作ツールSketch.app | Goodpatch Blog
Web制作ツールといえばAdobeのPhotoshopやFireworksですが、AdobeはFireworksの開発停止を発表してしまいましたね。そんな最中、海外のWeb/ UIデザイナーたちが使い始めている新しいWeb制作ツールを見つけました。それがSketchです。BOHEMIAN CODINGという会社がリリースしているアプリで、他にも有名なフォント管理アプリFontcaseもリリースしています。 （Sketchを使い始めている海外のデザイナーたち→「Sketch App vs Photoshop」、Dribbbleにsketchで描いた作品をアップしている人も→[.Sketch] Wireframe UI kit） アイコンやWebサイトのデザインもきれいで、Goodpatch社内でも最も話題になっているアプリ。Sketchも使ってみようと盛り上がっています。ただSketchにつ
ウェブデザイナーのための便利すぎるツール＆リソース20選【最新版】 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ ウェブデザイナーに便利なデザインリソースやツールをまとめた最新版の記事をThe Next Webから。きっとあなたの知らない、日本ではまだメジャーじゃない注目リソースやツールがあるはず？ — SEO Japan Webデザインにおいて、使用するツールはあなたの結果に重要な役割を果たす。もちろん、紙に鉛筆で描くことのような、基本を忘れないことが大事だが、時には新しいアプリやリソースを見つけることが、あなたのクリエイティブなジュースをもっと流れるようにするのに役立つかもしれない。 今回は、デザイナーとデベロッパーのための20個の便利なツールをリソースリストとしてまとめた記事を紹介する。あなたのお気に
あなたのウェブサイトを高速化させるためのTipsを教えてくれる拡張機能「PageSpeed Insights」 | ライフハッカー・ジャパン
「PageSpeed Insights」はあなたのウェブサイトのパフォーマンスを上げるためのTipsを教えてくれる拡張機能です。Google Chromeに入れることで、Chromeに内蔵されているデベロッパーツールを拡張できます。ウェブページの高速化を図るための提案をしてくれますよ。 以下に使ってみた様子を載せておきます。まずGoogle ChromeでPageSpeed Insightsへアクセスしましょう。Chromeへインストールします。そして、Chromeのデベロッパーツールを起動しましょう。Windowsの方は「F12」キーを押せば起動します。 パフォーマンス向上を図りたいウェブサイトを開いて、PageSpeed Insightで分析をしましょう。ページ再ロード後に結果が表示されます。 このように優先度ごとに対処方法を教えてくれます。こうすればもっとあなたのサイトを高速化できま
WebサイトのIE10対応をサポートする「IE10 Compat Inspector」 - builder by ZDNet Japan
今年中にも登場予定のWindows 8とIE10 Windows 7の後継となるPCおよびタブレット端末向けOS「Windows 8」は、2012年中のリリースが予定されており、1月24日現在は開発者向けのプレビュー版である「Windows 8 Developer Preview」が公開されている段階だ。 そのWindows 8に搭載される標準Webブラウザは「Internet Explorer 10（IE10）」。Internet Explorerの次期バージョンであり、HTML5やCSS3、ECMAScript 5、WebSocketなど、IE9では対応していなかった様々な最新の技術をサポートする。 WebサイトおよびWebアプリケーションの開発者やデザイナーにとって、Windowsに標準搭載されたIEは決して無視できない存在だ。しかしながらIEは、次世代Web技術への対応という点では
iUI - Mobile web framework for high-end devices
Create mobile websites & webapps with a native look-alike in no time. You don't need to have any HTML5, CSS3 or Javascript skills. iUI supports iOS, Android, Rim OS6, MeeGo, Bada, WebOS, ... smartphones and tablets. Most recent desktop browsers are ok too! Create multi-column navigation menus for your tablet users. Works on iPad, and also most Android tablets.
あらゆるデバイスでの画面表示確認が簡単に行えるサイト「Screenfly」 | ライフハッカー・ジャパン
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Maker
デバイス別にレイアウトを作れるレスポンシブWebデザイン用CSS作成ツール・「Responsive Web Css」
Flat roofing London
HTML、CSS、JSでiPhoneアプリのプロトタイプが作れる「Ratchet」:phpspot開発日誌
AddClips ソーシャルブックマーク＆RSSボタン統合サービス
インタラクティブなグラフを作ってブログに張り付けられる『Tableau Public』 | 100SHIKI
