ChromeとEdgeでSVG画像が表示されない場合の解決策 - クライマー株式会社 | 福岡・東京
SVGに画像が埋め込まれている場合や、Photoshopでスマートオブジェクトが含まれたものをSVGとして書き出した場合、 そのSVGはSafariやFirefoxでは表示されるのにChromeやEdgeでは表示されない場合があります。 解決策 SVGファイルをテキストエディタで開き、画像が埋め込まれた箇所を確認します。 xlink:href="data:img/png; 「data:img」となっているところが表示されない原因です。 これを「data:image」となるように書き換えます。 xlink:href="data:image/png; この書き換えを行うと、ChromeやEdgeでも表示されるようになります。 画像を埋め込んだSVG自体使用頻度としてあまりないとは思いますが、 SVGが表示されない場合の原因の一つとして覚えておくといいかもしれません。 参考： ChromeでSV
ブラウザごとの最小フォントサイズ一覧｜クリエイターブログ｜東京都新宿区のWeb制作会社 - ウェブラボ
こんにちは、ウェブラボクリエイターズメモです。 皆さんはブラウザによって､指定できる最小のフォントサイズがあるのをご存知でしょうか？ お恥ずかしながら今までどのブラウザも10pxだと思っていたのですが､ OSやブラウザごとで様々なんですね｡ たまにお客さんから、｢このエリアもっと小さくしてくれ～｣とお願いされることもあるのですが フォントが制約になってできない！なんてこともあります。 そんなことで今回は各ブラウザごとの最小フォントサイズについてまとめてみました｡ 検証方法・端末 検証方法 ブラウザ毎の最小フォントサイズは公表などされていません｡ 12px～1pxまでのテキストを用意し､目視で比較しました。 ブラウザシェア率の調査 検証するブラウザを選定する上で、どのブラウザがシェア率が高いのか下記サービスを利用し調査しました。 Market Share Reports｜NetMarketS
サーバー移転時の確認に必須のhosts書き換えが楽になる「HostAdmin Apps」の使い方
HostAdmin App のインストール ドメインは同じままで、サーバーを移転する場合、暫くの間は新旧サーバー両方でサイトが見えるようにしないといけませんよね。 でないと、DNS切替して移転浸透待ちと新サーバーへのコンテンツアップをしてる間、サイトが見れない期間が発生します。 DNS切替前の状態では、旧サーバー(つまり今のサーバー)はそのまま見れますので問題ないです。が、問題は新サーバー(移転先のサーバー)。 ドメインが同じなので、新サーバーにアップロードした内容は見れません。 普通はhostsを書き換えて作業することになると思いますが、これが結構面倒。hostsファイルはキャッシュが結構効いてるので、頻繁に切り替えながら作業しないといけない(WordPressの移転)時にはかなり大変です。 Chromeの拡張機能「HostAdmin App」を使うと、hosts書き換えがチェックのON
Chromeのブラウザサイズを超簡単に指定できる「Window Resizer」
WebサイトのPC表示やモバイル表示を確認するために、ブラウザの横幅を変えることってありますよね。 他にも、Webサイトのキャプチャ画像（スクリーンショット）を撮影するときに、ブラウザサイズを指定したいときがあります。 資料やブログ記事でキャプチャ画像を使うときに、それぞれの画像のサイズがバラバラだと、統一感がなくなって、ダサい感じになってしまいますよね。 そこで、今回はChrome（クローム）のブラウザ画面のサイズを簡単に変えることができる拡張機能を、ご紹介します。 Window Resizer Window Resizerは、ワンクリックでChromeのブラウザ画面サイズを変更することができる、便利ツールです。 今みているブラウザの画面を、モバイルサイズやタブレットサイズに瞬間的に切り替えることができます。 Window Resizer – Chrome ウェブストア Window R
【CSS】transformを画像に当てているとぼやけてしまう時の対処法 | PRAWN COCKTAIL(プロウンカクテル)
みなさん、こんにちは。 CSSのtransformを画像に当てた時に画像が少しぼやける現象に遭遇しました。 その解決方法をご紹介します。 画像がぼやけてしまったソースコードHTML <div class="wrap"> <div class="inner"> <figure class="pic"><img src="images/pic.png" alt=""></figure> </div> </div>CSS .inner { width: 1000px; height: 500px; margin: 0 auto; position: relative; } .pic { width: 50%; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }imgタグの
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
Surface Pro 2でChromeのタップ挙動が変＆解決方法｜モバイルしないモバイラー
2013年10月31日00:06 by qwerty_kb Surface Pro 2でChromeのタップ挙動が変＆解決方法 カテゴリSurface Pro 2 モバイルしないモバイラー、QWERTY_KBです。 Surface Pro 2を発売日に購入。しかし、普段使用しているGoogleChromeで、 なんか表示がぼやける＆タップした箇所がずれる問題が発生。 IE11を仕方なく使用していたのですが、解決策が判明したので備忘録として残しておきます。 Surface Pro 2は初期状態で表示が150％に設定されているので、まずそこを疑いました。 100％にしてみたところ、全ての表示が細かくなってしまいすぎて、許容できなかったため没。 で、プロパティやらを覗いていたところ、下記の方法で解決しました。 【解決手順】 タスクバー上のアイコンで右クリック(ロングタップ) ↓ メニューが出てく
『Surface Pro 2でGoogle Chromeを使う時の注意点！』
Surface Pro2 がやってきて2日経ちました。 Surface Pro2は10.6インチで1920×1080ドットのフルHDの解像度の液晶を持っています。 iPad Airは9.7インチで2048×1530ドットの液晶を持つので、これと比較すると若干見劣りはしてしまいますが、それでもSurface Pro2の液晶は美しいです。 OSがWindowsなので、iOSのような美しい描画やフォントではないのが少々残念ですが、それでも写真などを表示すると美しさはよくわかります。 IEを立ち上げてネットサーフィンをして、おおお、なかなかいいねーと思いながら、今度はChormeをインストールしてネットサーフィンを再開しようとしたところ異変に気づきました。 あれ？なんかぼやけてるぞ。 明らかに滲んでいます。 ん？おかしい。 どうやらこれはSurface等高解像度の液晶を持つタブレットにされている設
ニコニコ動画の動画をChromeで簡単にダウンロードする方法 - 生活記録ノート
【追記: 2014年7月19日(土)】動画のIDが「nm」で始まる動画では、この方法は使えません。 現在、ニコニコ動画にアップロードされている動画をダウンロードする方法としては、SmileDownloader や Freemake Video Downloader があります。 しかし、知人の家のパソコンで動画をダウンロードする必要があるときなど、勝手にソフトをインストールするのは憚られるときが多々あります。 そこで、シェア第2位の Google Chrome を使ってダウンロードする方法を紹介します。 1. 動画を開く ログインした状態で、動画を開きます。 2. 開発者ツールを開く キーボードの [ F12 ] を押して、開発者ツールを開きます。 初期状態では [ Elements ] が選択されているので、左から3番目の [ Network ] をクリックします。 3. 再読み込みする
【GoogleChromeを更新したら、右下にある「最近閉じたタブ」が消えていたので表示させる方法】｜今村だけがよくわかるブログ
2014/02/22追記バージョン33以降をご使用の方は「GoogleChromeの最近閉じたタブを表示させる方法がまたまた変わったので、確認しました」をご参考ください。 PC版Google Chromeの話なんですが、バージョン29以降では「最近閉じたタブ」が右下に表示されなくなっていました・・・ よく使う「最近閉じたタブ」が消えてる・・・＞＜ それで、この「最近閉じたタブ」を表示させる方法があることを知りましたので、ご紹介します～。 消えてしまった「最近閉じたタブ」を右下に表示させる方法以下の3つのステップで表示させることができます。 １．「chrome://flags/#enable-instant-extended-api」を開きますchrome://flags/#enable-instant-extended-apiをアドレスバーに入力します（そのままアドレスをコピーしてアドレス
jQueryで.loadのプレビュー時にドハマリした
jQueryで.loadを使おうと思ったら、 …あれ、全然動かねえ！！ …なんでやねん！！ となった時に、ぜひ確かめていただきたいネタです。 Chromeさんがしっかりしすぎていたせいで大分時間がムダになった 今日はちょっとグッタリなマツモトです。 単なるload関数を使いたかっただけですが、 ど～～しても動かず、 え、なんでだろう…と小一時間くらい悩んでおりました。 サンプルスクリプトは以下。 function hogehoge() { $("#insertID").load('./some.html','img:first',''); } なんてこたーない、本当にテストスクリプトです。loadしたhtmlから画像呼び出すだけ。 ただ。 これが、 ど～～～してもChromeで動かないのさ！（泣） なんで？ディレクトリ？引数？WHY？？ さんざん試して、分かったのは衝撃
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Chrome で背景色や背景画像を印刷する - Blog, The
Chrome は単体で PDF を印刷する機能を持ってて便利なんですが、CSS の background-color や background-image が反映されません。 「背景を印刷」みたいなオプションも見当たらなかったので、無理なんかなーって思ってたんですが、どうやら CSS で解決できるっぽいです。 @media print { body { -webkit-print-color-adjust: exact; } } 人様のページであっても、デベロッパーツールを使えばなんとかなります。 -webkit ってベンダープレフィックスが付いてますが、Safari 5 では動きませんでした。 未だに Snow Leopard を使ってるもんで、Safari 6 は確認できてません。 以下、参考にさせてもらいました。 TIP: Print CSS backgrounds in Googl
CSS3のW3Cドキュメント現状調べ〜第六部：Chromeのぼっち達〜 - 鳥さんの独り言
続いて、WebKitの独自仕様だ！ 多くなり過ぎて表示し切れなかったので、分割したよヽ( ´_｀)丿 名称 種別 簡易説明 > > Chrome/Safari ~ ~ ~ バージョン プロパティ名 値 -webkit-activelink 値 クリックされたリンクの色 1.0〜 - - -webkit-focus-ring-color 値 フォーカスされたフォームの周囲の色 1.0〜 - - -webkit-link 値 リンクのデフォルト色 1.0〜 - - -webkit-text 値 テキストのデフォルト色 1.0〜 - - -webkit-margin-x-collapse プロパティ 上下の各マージン壊し方法 3.0〜 -webkit-margin-x-collapse collapse｜discard｜separate -webkit-margin-collapse プロパティ
Chromeでスマフォ・ガラケー版サイトを見る方法 - ゆるくいろいろと
Chromeの拡張で意外にも今までなかったガラケーサイトを表示させるやつ。 先日Twitterでも発言した通り、ついに発見しました。 Web屋さんならもちろん、そうでない人にも超簡単にガラケーサイトやスマフォサイトを表示させられるようになるので、 是非とも1度お試しいただければと思います。 以前こんな記事を書きました。 ChromeでiPhoneみたいにWebページを閲覧する方法 この方法だとスマフォサイトは見れるようになるのですが、UserAgent（ってやつがあるのですが）を設定してもなぜかちゃんと動かなかった。 FirefoxにはUserAgentSwitcher（以下UASと略します）など、ガラケーサイトを表示させる便利なアドオンがいくつかあったのです。 でもわざわざFirefoxを立ち上げて、UAS立ち上げってって・・・ Firefoxって起動遅いし重いしストレスが半端じゃなかっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
指定URLをChrome起動時に全画面表示で起動する – オレンジの国
PDFの文字がコピーできない！Chrome拡張機能「PDF Viewer」でテキストコピー
http://blog.e-riverstyle.com/2013/09/chromefirefoxcsscss.html
Google ChromeでUser Agentを偽装する方法（１） | スマートフォンサイト作成 ノウハウ集