超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":
Web制作にすぐに役立つ、Chrome デベロッパーツールの便利な機能・使い方のまとめ
Web制作者にとって、Chrome デベロッパーツールは欠かせません。Web制作にすぐに役立つ、便利な機能・使い方を紹介します。 Cool Chrome DevTools tips and tricks you wish you knew already 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 要素をElementsパネル内でドラッグ&ドロップ 02. コンソールで現在の要素を参照 03. コンソールで最後に実行された値を参照 04. セレクタを加えて、要素のスタイルを追加 05. 変更したCSSをファイルに保存 06. 指定した要素のみをスクリーンショット 07. CSSセレクタを使用している要素を検索 08. コンソールで複数の行にまたがるコマンドを記述 09. Sourcesパネルの便利な機能 10. Wa
CSSで円グラフや集中線が描けるconic-gradient入門 - ICS MEDIA
CSSのグラデーションconic-gradient()関数は、conic（円錐）の名のとおり、円錐状にグラデーションを描画するものです。conic-gradient()関数を使用すると、円錐状のグラデーションはもちろん、集中線や市松模様といった表現が手軽に実装できます。 ▼ conic-gradient()関数で実装したグラデーション例 ▼ conic-gradient()関数で実装した演出例 サンプルを別ウインドウで開く 本記事ではconic-gradient()関数の基本的な使い方を解説しつつ、応用的な表現やクロスブラウザ対応の方法を紹介します。 conic-gradient()関数の基礎 linear-gradient()関数・radial-gradient()関数との比較 CSSでグラデーションを実現する手段は次の3種類があります。 linear-gradient()関数： 直線状
様々なスマホの画面サイズを1度に開いて動作確認できるChrome拡張「mobile browser emulator」
mobile browser emulatorとは mobile browser emulatorは、簡単なクリック操作で、「複数サイズのモバイル端末画面」と「パソコン画面」を同時に開いて動作確認できるモバイルエミュレーター拡張です。 例えば、スマホ画面を動作確認するのであれば、ダブルクリック一発で以下のような状態を作ることができます。 動作確認可能なスマホサイズ スマホであれば、以下のような画面サイズの動作確認画面を手軽に呼び出すことができます。 320×480（スタンダードなモバイル解像度） 320×533（多くのSamsung、HTC、LG） 320×568（iPhone5） 360×640(Galaxy：S3,S4,S5、Nexus、Xperia：P,S,Z） 375×667（iPhone6） 動作確認可能なタブレットサイズ タブレットは、今のところ以下の2種類です。 768×10
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
ARChon : エミュレーター不要でAndroidアプリをChromeブラウザを搭載したWindows / Mac / Linuxで実行できるソフトウェア | juggly.cn
エミュレーター不要で Android アプリを Chrome ブラウザを搭載した Windows / Mac OS X / Linux上で実行できるオープンソースソフト「ARChon」が GitHub で公開されました。 ARChon は、先日紹介した Android アプリを Chrome OS 用に変換する「Chromeos-apk」で処理されたアプリを Chrome アプリとして実行するためのランタイムです。Windows PC 上で Android アプリを実行する方法はエミュレーターが主流と言えますが、ARChon では Chrome さえあれば実行できます。 ARChon の動作環境は Chrome 37 以降です。Chrome の設定メニューで「拡張機能」→「デベロッパーモード」を有効にし、「パッケージ化されていない拡張機能を読み込む」ボタンから下記のリンク先で配布されている
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
キーボード ショートカット - Google Chrome まとめWiki
2018-02-22 起動オプション2017-07-29 テーマ/作り方2016-12-15 雑記2016-10-24 キーボード ショートカット2016-09-18 FrontPage/コメントログ2015-06-29 起動オプション/コメントログ2015-04-20 テーマ2014-11-11 コメントページ2014-10-19 FAQ2014-10-05 エクステンション
「はてブ」アプリ開発裏話も。はてなスタッフのオススメ Chrome ウェブアプリ 15選 - はてなニュース
5月16日、Chrome ウェブストアの日本版がスタートしました。ウェブストアには、Googleが開発したWebブラウザ「Google Chrome」に“インストール”する形式のウェブアプリが大量にそろっています。新しいもの好きのはてなスタッフ3人は早速、仕事に使えそうなアプリから暇つぶし用のゲームアプリまで、いろいろなアプリを試してみたようです。3人でオススメアプリを持ち寄り、座談会を開催しました。 （※この記事は、グーグル提供によるPR記事です） Chrome ウェブストア - アプリケーション、拡張機能、テーマ Chrome ウェブストア日本版スタート！ はてブディレクターがGoogleに聞いてみた - はてなブックマークニュース ——司会の深山です。皆さん、本日はお時間ありがとうございます。まずは軽く自己紹介をお願いします。 id:chris0043（くりす）とid:chira_r
Chromeの小技＆裏ワザまとめ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Chromeを最大限活用する10のTips
新参ながら、GoogleのChromeは他のブラウザを評価するスタンダードになってきていますよね。今回はこのChromeを最大限活用する10のコツをご紹介しましょう！ HOMEページを追加してみようパワーユーザーはHOME1個じゃ物足りないよね？ Chromeはブラウザ立ち上げると複数のサイトが開くように設定できるんです。右上にある工具みたいなレンチアイコン押してTools ＞ Basicsと進んで好きなサイトを追加しちゃいましょう。ただしあんまり追加し過ぎると起動が遅くなるので...ホドホドにね！ 検索窓を計算機に活用ChromeのGoogle Suggests機能をうまく使いこなせば｢数にめちゃ強いヤツ｣と同僚にも尊敬してもらますよ。URL入れる検索枠（Chrome発表時に｢超能力バー｣と呼んでたけど、｢Omnibar｣が正式名称）に数式を書き込むだけで、Enterキー押さなくっても検
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://buchineko.website/chrome-devtools-cording/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
TechCrunch | Startup and Technology News
ウェブブラウジングを快適にするChromeショートカット15選 | ライフハッカー・ジャパン
グーグルで｢Chromeクソブラウザ｣｢Operaカスブラウザ｣と検索すると...