游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO游ゴシックは素晴らしい。まず前提としてこれは間違いのないことです。 ただ、面倒くさい問題があるんですよね。 そう、かねてより議論されている、「WindowsのChromeで見にくいんすけど」問題。 この問題についてちょっと調べればわかるのですが、@font-face で解決している人がかなり多いです。僕も以前までそうしていました。
FirefoxがネイティブLazyloadをサポート、画像の遅延読み込みを簡単に実装可能に
[レベル: 上級] 正式版の Firefox 75 が画像のネイティブ Lazy load をサポートしました。 画像タグ (<img>) に loading="lazy" HTML 属性を追加するだけで、画像の遅延読み込みが Firefox で可能になります。 遅延読み込みさせることによりページの表示速度の向上が見込まれます。 ウェブ標準になった loading 属性を最初にサポートしたブラウザ Lazy load（レイジー ロード）は、必要になったときにリソースの読み込みを開始する技術です。 たとえば、画像がスクリーンの外にあるときには読み込みません。 ユーザーにはまだ見えていないからです。 スクロールしてその画像がスクリーン領域に入りそうになったときに初めて読み込みを開始します。 不要なリソースの読み込みを遅らせることで、ページの表示速度を上げることができます。 一般的には、Inte
ChromeのLazy-Loadを使う方法
小規模案件でChromeのLazyloadを使う機会があり、ネイティブLazyLoadを実装してみました。 ChormeのネイティブLazyLoadの実装方法をご説明します。 今までJavaScriptで実装していた「Lazy Load」がChromeでは機能として実装されました。 ネイティブLazy Loadは、JavaScriptの使用に制限があるAMPに対応しているウェブサイトにも最適な方法ですね。 ChromeのLazy Lordの実装方法 実装方法は簡単です。 画像ファイルの場合は、imgタグに「loading="lazy"」を記述するだけです。 この時に画像サイズも記述することが推奨されています。 img
Google Chromeでもfont-sizeを10px以下で表示させるCSS - 株式会社アップシェア ブログ
【2021年7月更新】 Webサイト制作で極小フォントサイズを使用したいときに厄介なのが Google Chrome。 Chromeは可読性を維持するため、10px以下のフォントサイズを指定したテキストも10pxで表示される仕様になっています。 ブラウザごとの表示の違い まずは Firefox、Chrome、IE、Safari での表示の違いをご覧ください。 Firefox Google Chrome Internet Explorer Safari 頑なにフォントサイズ10px以下で表示させようとしないGoogle Chrome。 font-size が効かないとなると、諦めて10pxにするか画像を作るか…といった妥協策が思い付きますが、CSSだけで思い通りのフォントサイズに表示させる方法がありました。 transformプロパティでブロックごと縮小する [html] <span cla
PerfectPixelを使えばデザインカンプを完全再現したコーディングができる！ | HPcode
PerfectPixelを使えばデザインカンプを完全再現したコーディングができる！ 2018 10/31 コーダーとしての質の高さの指標の1つに、デザインカンプからの再現度の高さが挙げられると思っています。 PCサイトだけ作っていればいい時代に生まれた言葉で「ピクセルパーフェクト」があります。ピクセルパーフェクトとはデザインカンプから1mmもズラさずに再現するというものです。 今の時代にそこまで厳密に求めてくる会社はないと思いますが、それでもデザインカンプの再現を理由もなく怠るのはコーダーとしてありえないと思います。 「PerfectPixel」という（名前そのままの）ブラウザ拡張ツールを使えば、デザインカンプの再現を高いレベルで担保することができます。コーディングを担当している方は、ぜひ使ってみてほしいツールです！ 📝コーディング時にデザインカンプを100%再現するためのツール「Per
Chrome Developer Toolsでパフォーマンス計測・改善 - Qiita
Chrome Developer Toolsを使ったWebページのパフォーマンス計測・改善についての説明です Networkパネル、Timelineパネル、Profilesパネルの使い方を説明してから パフォーマンスの計測・改善について説明していきます Networkパネル Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します 記録方法 左上のRecordボタンを押すと記録が始まる もう一度押すと記録が停止する 必要に応じて、Disable cacheやCapture screenshotsを設定する 表示項目の変更 赤枠で囲んだ部分を右クリックすると こんな感じでメニューが出てくるので表示したい項目をクリックする 項目の一例 Name：リソースの名前 Method：HTTPメソッドの種類 Status：レスポンスのステータスコードとテキスト Type：リソースの
Trelloを使う時にデフォルトで入れるべきChrome拡張機能 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2018/05/15 追記：思考停止で入れるべき最強プラグイン 今年でTrelloを使い始めて、３年ほど経ちました。 おかげさまでこの記事も多くの方に好評いただいたのですが、 多くの人に紹介し続けた結果、こんなに大量のプラグインは必要ないんだろうなと思いました。 そこで、追記分としまして、思考停止でぶっこんでおいたら幸せになれるプラグインをまとめました。 今までも下記のリスト中にあったものですが、どんなプロジェクトでもノールックでインスコ出来るぐらい、 良い感じにしてくれるので３分でセットアップしないといけない時に便利です。 自分もなに
ChromeでPCからスマホサイトを表示 - Qiita
ChromeでPCからスマホサイトを表示する方法です。 環境 Windows 10 Chrome 61.0.3163.91 手順 Chromeでサイトを表示（今回はYahooで試してみました） https://www.yahoo.co.jp/ F12キーを押してデベロッパーツールを起動 ツールバー左上のこのボタンを押します サイトがスマホで表示されたように小さくなりますが、まだスマホのサイトは表示されません。 左上からデバイスを選択します。（今回はiPhone6を選択） F5キーを押してページを更新するとスマホのサイトが表示されます。 以上です。 選択したHTML要素が画面上のどこか確認することができたりします。
2017年2月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン これでもう悩まない！2017年のデザイントレンド完全ガイド – PhotoshopVIP シネマグラフは少し古い気がしますが、セミフラット・デザインは今年も使われそうですね。 Icons8 Lunacy – Sketch viewer for Windows | Icons8 Windows用のSketchファイルビューアだそうです。 コーディングを10倍早くするSketch Pluginを紹介するよ – ゆめいろデザイン :: フリーランス UX/UIデザイナー 画像の書き出しを爆速にするプラグインなど。 iOS 10 GUI (iPhone) | Facebook Design Face
絶対速くなる？！メモリの少ないPCでChromeを高速化する方法 - スネップ仙人が毒吐くよ
いまだ調子が上がらず半夢遊病状態ですよ。 snep1000.hatenablog.com で、前回書いているように右手の腱鞘炎が再発。となると、性能の低いノートPCの出番だったりして…… snep1000.hatenablog.com 操作は多少楽になるとはいえ、性能が低いので主にブラウザを使ったルーチンワークの能率はダダ下がりである。 ブラウザはGoogle Chromeを使用している訳だが、こいつがとにかく重い。 以前は比較的軽いFirefoxを主に使用していたが、Androidのスマホを使っていたり、各種Googleのクラウドサービスとの連携を考えると今日ではChromeを使わざるを得ない。 以前は違うブラウザを使っていたのに今ではChromeを使っている人、自分以外にも多いと思う。 てなわけで、いやいやながらもChromeを使うしかないのだが、本当に糞重い。皆言ってるけどメモリ消費
Chromeでも読みやすい游ゴシックを指定する方法 - Qiita
Windows8.1から搭載された「游ゴシック」ですが、ChromeとOperaで薄く掠れて見難くなってしまいます。 一般的にはbodyにfont-weight: 500;を与えて回避している方が多いですが、フレームワークなどを使用した場合、font-weight100～400を指定しているコンポーネントの数だけfont-weight: 500;と指定しなければならなく、あまり現実的ではありません。 「游ゴシックについて」と「ベストなfont-family」がごちゃ混ぜになって記事が見難くなってしまいました。より詳細に書き込んだため記事を分割しました。 ストックされているかたや、ブックマークされている方にはご迷惑おかけします。 この記事はタイトルの通り游ゴシックのみを扱います。 当記事を踏まえたゴシック体のfont-familyの指定は「2020年まで使えるはずだったfont-family
Chromeのショートカットをデスクトップに作成する方法: Chromeのこれが知りたい
Google Chromeの基本的な使い方やトラブル対処法・便利な拡張機能を紹介。Windows10や無料ソフトGoogle関連や無料ブログなどパソコン全般も。 タスクバーにあるChromeのショートカット デスクトップにも表示させて使いたい人もいると思います。 作成する方法を紹介します。 デスクトップにChromeのショートカットをつくる タスクバーからドラック＆ドロップしても デスクトップにはショートカットがつくれません。 URL形式でショートカットを作成するには Chromeを起動させてトップページを表示させます。 ↓ アドレスバーのURLを全部選択させます（青色に反転させる） クリックすれば選択されますが もしならない場合URLをクリックして ショートカットキーctrl+Aで選択できます。 ↓ URLをデスクトップにドラック＆ドロップします ↓ アイコンをクリックすると クロームが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「グーグル求人検索」、人手不足の日本にも導入間近か！？ 続々目撃証言【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum
ChromeでWEBページ全体をフルスクリーンショット！見ているページの全画面キャプチャー画像をダウンロードする方法
