「Cookieを許可してください」を自動的に非表示にできる拡張機能「I don’t care about cookies」を使ってみた
ウェブサイトを閲覧していると「クッキーの保存許可」を求めるメッセージが表示されることがあります。このメッセージが表示されるたびにポチポチクリックしてCookieの設定を行うのを面倒に感じている人も多いはず。無料で公開されているブラウザ拡張機能「I don't care about cookies」を使えばCookieの許可設定を自分の代わりに自動操作してくれます。 I don't care about cookies 3.3.8 https://www.i-dont-care-about-cookies.eu/ 「I don't care about cookies」はChrome版・Firefox版・Edge版・Opera版・Pale Moon版・広告ブロッカーのフィルター版が配布されていますが、今回はChrome版を使ってみます。まずは「I don't care about cooki
CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper
WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い方 shaperの特徴 shaperはWebページの各UI要素に適用したスタイルの調整を表示を見ながらできるオンラインツールです。 例えば、スペースの量を変えるだけでデザインの印象はかなり変わりますね。 スペースの量を変えてみた フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸などの値を調整できます。 ライトモードとダークモードにも対応しており、上部のパネルで変更
ロゴのデザインに独創性があるか、パクリじゃないか、Webサイトやスマホでどう見えるか検証できるオンラインツール -TWM Logotester
せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノクロでも大丈夫か、色数は多すぎないかなどを検証できる無料オンラインツールを紹介します。
CSSじゃなくて実際にレンダリングで使われるフォントの調べ方（ひとり DevTools Advent Calendar 2020 – 11日目） | Ginpen.com
11 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 CSS の font-family はフォント名を複数指定して、このフォントがなかったら次、みたいにすることができます。また serif のような、環境に依存する緩い指定である総称フォントファミリー (generic font family) もあります。 CSS で何のフォントが指定されているかは Elements パネルのスタイル欄に出ていますが、最終的にどのフォントが利用されているのかというのも、実はパネル内で見つけることができます。 たくさん並んでるけど結局今見えてるのどれ？ 指定したやつちゃんと利いてる？ フォールバックになってない？ みたいなときに。 利用されているフォント名を探す Elements パネル → Computed を開く 一番下 Rendered Fon
)
FontCDN - GoogleのWeb Fontをまとめてプレビュー
GoogleではWebフォントを無料で公開しています。サイズが大きくなりがちなWebフォントをGoogleが高速なCDNで配信し、さらに多数のWebサイトで共有することでキャッシュも有効になります。 日本語フォントはあまり多くありませんが、多少のフォントは対応しているようです。そんなWebフォントでの表示をまとめて確認できるのがFontCDNです。 FontCDNの使い方 トップページです。多数のフォントでのプレビューが表示されています。 日本語で表示を指定した場合。 表示をタイルからリストにした場合。 使い方も分かります。 FontCDNはGoogleのWebフォントでの表示をまとめて確認することで、細かな違いも一目で分かります。フォントをカテゴリや名前でフィルタリングできるので、使いたいフォントに合わせて確認するのが容易です。 FontCDNはJavaScript製のオープンソース・ソ
台風の様子をほぼリアルタイムで更新される衛星画像でチェックできる「Zoom Earth」
ハリケーンや台風の様子を衛星画像でほぼリアルタイムにチェックできるウェブサイトが「Zoom Earth」です。Zoom EarthはGOESやひまわり8号、Meteosatといった気象衛星からのライブ衛星画像、NASAのGIBSやEOSDISから画像データ、MicrosoftのBing Maps PlatformやEsriから地図データ、National Hurricane Center・Joint Typhoon Warning Center・IBTrACSといったサービスから台風情報を得て作成されています。 Zoom Earth – ライブ衛星画像を見る https://zoom.earth/ Zoom Earthはこんな感じで、ほぼリアルタイムの衛星画像をチェックできるウェブサイトです。 画面左上には表示している衛星画像が撮影された日時および、特定の場所を検索するためのサーチバー。
フォント管理に大活躍！好きな文字でフォントを一覧表示できる、Win, Mac, Linux対応の国産無料アプリ -fontvuer
インストール済みのフォントを好きな文字で一覧表示できる、Windows, macOS, Linux対応の国産アプリを紹介します。 国産なので日本語フォントはもちろん、英語フォントもサポートされています。 いろいろなフォントで比べてみたい人、特にフォントがたくさんの人に便利です！ fontvuer fontvuer -GitHub fontvuerの特徴 fontvuerのダウンロード・インストール fontvuerの使い方 fontvuerの特徴 既視感を抱いた人は大正解！ fontvuerは先日リリースされたばかりの国産アプリで、以前当ブログで紹介した「Fontviewer（紹介記事）」の後継の新作です。 基本的な機能はほぼ同じですが、使い勝手が大幅に強化されています！
レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。 ブラウザベースのオンラインツールなので、OSを問わず利用できます。 Chrome, Safari, Edgeは問題なし、IE11はダメでした。
レスポンシブWebデザイン表示一括確認Chromeエクステンション・「ResponsiveViewer」
ResponsiveViewerはレスポンシブWebデザインの表示をさまざまなサイズで一括確認出来るChrome拡張です 各デバイスはモニタサイズとUAが設定されており、任意のモニタサイズおよびUAを追加する事も可能です 同様のツールは数多に存在しますので若干今更感あるネタですが試しに使ってみたら割と便利だったのでご紹介。 主な機能 デフォルトで用意されているデバイスはiPhone XRやXS、8+や8、Pixel3、Galaxyなどに加えて1024や1280pxサイズのモニターです。任意のサイズ、任意のUAでデバイスを追加する事が可能で、各デバイスは並べ替えたり非表示にしたりが自由に設定可能です 全体の拡大/縮小や別URLを再読み込みする事も出来ます。勿論ローカル環境のWebサイトの表示テストも可能です。尚、開発者の方も仰ってましたがiOS Safari等だと表示が異なったりするので最終
Translate side by side - 翻訳前後の文章を横並びで表示するGoogle Chrome機能拡張 MOONGIFT
Google翻訳を使って英語ページを日本語にしている人は多いかと思います。そんな時、変な訳にぶつかって原文を確認したいと思うこともあるでしょう。Google翻訳ではページ全体の翻訳または原文表示の2パターンしかサポートされていません。これは不便です。 そこで使ってみたいのがTranslate side by sideです。原文と翻訳文を左右に並べて表示するGoogle Chrome機能拡張です。 Translate side by sideの使い方 実行したところです。認証が必要なサイトでは、翻訳後のサイトは認証前として表示されます。 スクロール追従してくれます。 Translate side by sideを使えば翻訳前後の文章を横並べにしながら確認できます。アクティブになっているウィンドウをスクロールすれば、もう片方のウィンドウも追従してくれます。日本語でコンテンツを確認しつつ、時々原
フォント選びに迷ったら見返したい、おすすめ定番フォント31選まとめ (欧文編)｜原田 佳樹 Harada Yoshiki
こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー
iPhone SE／5s／5にもう悩まない！Viewport Extraで手軽に縮小表示 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 ここ数年、スマートフォンの画面サイズがどんどん大きくなっていますよね。何年か前までは幅320px表示の端末がほとんどでしたが、今の日本では幅375px表示の端末がもっとも使われているようです（2019年2月現在）。幅375px表示が、他国で圧倒的1位の幅360px表示を大きく上回っているのは、日本人のiPhone好きが表れた結果でしょうか。 これに合わせ、LIGでもスマートフォン表示のデザインは幅375px表示に最適化することがほとんど。でも、その場合に問題となるのが、幅320px表示の端末です。見出しの改行が必要になったり、横並びの要素が収まりきらなくなったり、表示くずれが多々発生します。ブレイクポイントを増やして、スマートフォン表示だけで2種類もスタイルを用意するのは、なかなか大変です。かといって、いまでも見捨てるにはまだ早いシェア
ストレージの使用状況をグラフ化してどのファイル・フォルダが容量を無駄に使っているか一発で発見できる「Folder Size」
PCのHDDやSSDに保存されている不要なファイルを削除しようにも、どこに保存されているどんなファイルが容量を無駄に使っているか分からず苦労したことがある人も多いはず。「Folder Size」は1クリックで任意のフォルダ内の合計ファイルサイズを計測して、サイズが大きい順に並べたり見やすいグラフにしたりしてくれるWindows向けのフリーソフトです。計測結果からファイルを開いたり削除したりできるので、爆速でストレージ内の整理整頓ができます。 Folder Size - Freeware file size analysis. Check the directory sizes, folder sizes and file sizes on your computer with this freeware tree size analysis tool. https://www.mindge
プログラミング効率アップ！50＋個のコーディング用フォント試し打ち＆無料ダウンロードできる Programming Fonts
プログラミングやコーディングを行っているひとは、エディタ画面といつもにらめっこ状態というひとも少なくないでしょう。そんなときはフォント設定を見直し、開発効率を改善してみませんか。 用意された50種類を超えるコーディング向けフォントから、お好みのフォントスタイルをリアルタイムで確認でき、無料ダウンロードできるサイト Programming Fonts が公開されていたので、今回はご紹介します。 可読性の良いフォントを利用すれば、コーディング時の入力ミスを防げたり、等倍フォントなら字幅がずれる心配もありません。開発環境にあった、あなただけのプログラミング用フォントを見つけてみましょう。 数字が美しい書体選びの秘訣とは？すぐに使える Google フォント20個まとめ付 Programming Fonts の使い方 Programming Fonts は、コーディング作業に適したフリーフォントを
percentage - Windows10のシステムトレイにバッテリー残量を数字表示 MOONGIFT
Windows10のシステムトレイではバッテリーの残量をビジュアルで確認できます。マウスを当てるとパーセンテージが表示されて、正確な数字が分かるのですが、バッテリーがなくなってきた頃に細かく知りたいと思うと毎回マウスを当てるのが面倒です。 そこで使ってみたいのがpercentageです。システムトレイにバッテリー残量のパーセンテージを常時表示してくれます。 percentageの使い方 デフォルトの場合。マウスを当てないと正確な数字が分かりません。 起動後。93という数字が確認できます。 percentageはごくごく小さなプログラムで、バッテリー残量を数字で表示する以外の機能はありません。Windows10標準の機能として数字を表示してくれれば良いのですが、それがない以上はユーティリティに頼る他ないでしょう。 percentageはC#製のオープンソース・ソフトウェア（MIT Licen
Fontviewer - ローカルフォントの書体をまとめてチェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました フォントの世界は奥深いです。フォントを変えるだけで、デザイン全体の印象が変わってきます。フォントが統一されることで全体の統一感が生まれ、雰囲気が整います。適当に気分で選んでいると、世界観もまたばらばらになってしまうでしょう。 そこで使ってみたいのがFontviewerです。ローカルにインストールされているフォントの書体をまとめてチェックできるソフトウェアです。 Fontviewerの使い方 立ち上げたところです。すべてのフォントで文字が書かれています。 表記する文字は自由に変更できます。 検索で絞り込めます。 同じOsaka RegularでもMonoと通常とで若干の違いがあるのが分かります。 Fontviewerは自分で表示するテキストが変更でき、まとめて表示できるのが便利です。
フォントの管理に！インストール済みのフォントを一覧表示できる、Win, Mac, Linux対応の無料アプリ -Fontviewer | コリス
当ブログで無料フォントや格安フォントを紹介する度に、「フォントの管理が、、、」という声がちらほら聞こえます。そんなフォントをたくさん所有されている方にぴったりのWin, Mac, Linux対応の無料アプリを紹介します。 先日リリースされたばかりの国産アプリで、もちろん日本語フォントに対応しています。 Fontviewer -GitHub Fontviewerのダウンロード Fontviewerの使い方 Fontviewerのダウンロード Fontviewerはソフトウェア開発をしているSotaro氏が開発した無料のソフトウェアで、インストール済みのフォントを好きな文字で一覧表示することができるフォントのビューアです。 MITライセンスで、個人でも商用でも無料で利用できます。
Google Fonts + 日本語を使用して、Webサイトやブログがどのように表示されるか試すことができるツール -Fonty | コリス
2018年9月にGoogle Fontsは日本語が正式にサポートされ、既に利用されている人、検討されている人も多いと思います。当ブログでも早期アクセスから使用しています。 日本語の正式サポートに伴い、Google Fontsを使用したさまざまなツールも日本語が利用できるようになりました。 自分のWebサイトやブログに、Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールを紹介します。 参考: Google Fonts + 日本語 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語の使い方 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールはこちら、Fontyです。 登録
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像を扱うプロジェクトに役立つ！CSSフィルタのさまざまなエフェクトをコピペで利用できる無料ツール -FilterSS
)
CSS Spider - CSS設定を素早く確認、編集 MOONGIFT