Inspect website styles in seconds. Effortlessly. Inspect design properties in seconds. Effortlessly. Improve your workflow with effortless CSS insights for designers and developers. No more digging in a code.
webページの画像を誰かに共有したり、仕事の資料などでスクリーンショットが必要になることはあるでしょう。今まではスクリーンショットを撮る場合、とくにwebページ全体の時はGoogle ChromeはもちろんFirefoxやSafariでも、拡張機能を使う方法をとっていたかと思います。 しかし、Google Chromeのバージョン59の正式版がリリースされ、拡張機能を入れなくてもGoogle Chromeでwebページ全体のスクリーンショットを撮ることができるようになりました。 Google Chromeのデベロッパーツールを使うやり方なのですが、これを使うことによってPCはもちろんタブレット、スマホなど、いろんなデバイスの表示でwebページ全体のスクリーンショットを撮ることができるのです。 これは素晴らしい。 ということで、Google Chromeでのwebページ全体のスクリーンショッ
Looks Terrific To Misawa textareaによく使う画像の自動補完(markdown形式)を追加します # 対応キーワード !l => LTGM画像(lgtmoon)をランダムに検索 !mほげほげ => misawa画像を検索 !iほげほげ => irasutoya画像を検索 !sほげほげ => 寿司ゆきから検索 !j ほげほげ => JS Girlsから検索 !d ほげほげ => Decomojiから検索 !n ほげほげ => エンジニアを褒めるネコから検索 # License 寿司ゆき (SUSHIYUKI) - http://awayuki.net/sushiyuki/ Copyright (c) 2014 awayuki. (CC BY-NC-ND 4.0) JS Girls - https://github.com/tomo-e/js-girls Attr
Images & HTML Elements Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser. Mockups Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring. Keyboard Shortcut For the best experience set a keyboard shortcut in the chrome setting at the end o
Google Chromeで見た時だけ、フォントサイズがおかしいんです! そんなトラブルに陥った日に思い出すためのまとめです。 フォントサイズに謎の異常発生 なんだかchromeで見た時だけフォントサイズが大きい? 弊社では、remを使った場合に時々遭遇しました。 ルートとして指定してる文字サイズ [fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_i
カッコイイなぁーと思ったWebサイトのスクリーンショットやURLをまとめるためにEvernoteのクリップを使用していたのですが、ちょっとEvernoteのダイエットをしようと思い立ち他のサービスを探していた私。 そんなおりに知った、スクリーンキャプチャ管理ができるChromeエクステンション、Clipularを使い始めてみたのでご紹介。 まずはChromeエクステンションをChromeストアよりダウンロードしましょう。 ツールバーにClipularのアイコンが追加されたらOKです。 エクステンションを使用するためにはまずログインから。 facebookかGoogle+アカウントでログインできます。しましょう。 使い方はいたって簡単。スクリーンショットを保存したいなと思ったサイトを開いたら、ツールバーにあるボタンをクリックしてカメラアイコン(全画面キャプチャ)かハサミのアイコン(範囲を指定
いいな、参考にしたいなと思うデザインがあったときにキレイにスクショ管理できたり、アイコンやシェアボタンなどよく使うPSD素材なんかの管理にはいままでLittleSnapperを使っていたのですが、この度LittleSnapperがEMBERとして新たにリリースされたようなので早速買ってみました。 LittleSnapperと内容はほとんど一緒だし、そもそもLittleSnapperも4000円くらいしたので「なんでアップデートじゃないんだよ!なんで買い直さないといけないんだよ!!」みたいな愚痴は死ぬほど出てくるのですが…実際便利だしいいんです…うん…。 EMBERのつかいかた スクショ管理につかう 参考にしたいデザインがあったらChromeのEMBERエクステンションでEMBERに全画面保存できます。スクロールしないと表示しない系のサイトはEMBER内のブラウザで見たままのスクショが撮るこ
Chormeをメインブラウザとして使っていますが、キャプチャを取るのにしっくりくる拡張機能が無く不便でした。 でも、ついに見つけました!キャプチャをとるのに便利なChoromeの拡張機能「FireShot」を! 今回は「Fireshot」を実際使ってみて便利だと思った点と簡単な使い方についてご紹介いたします。 「FireShot」の便利なところ 1.キャプチャの選択範囲を事前に選べる! Fireshotはキャプチャできる範囲を事前に選ぶことができます。 選べるのは以下の4通り。 ページ全体をキャプチャ 見える範囲をキャプチャ 選択された範囲をキャプチャ ブラウザウインドウをキャプチャ 事前に選べるのでキャプチャした後に画像を切り抜く手間が省けます。 また、「選択された範囲をキャプチャ」や「ブラウザウインドウをキャプチャ」(ブラウザの枠ごとキャプチャすること)は他の拡張機能でなかなか見かけな
CSSで指定したmargin(paddingも?)がIE(オレはver.6)では問題なく表示されるのにFFやChromeだときかなくなってる。 いろいろ調べてみる。 原因はfloat。 それはわかってました。 なので、いつも<br clear=”all” />や次のCSSでclear:both;を使ってfloatを解除(まぁ、これは常にやるのですが)を入れて対処していたのですが、今回それをやっているにも関わらずきかない。 理由は、overflowでした。 FFやChromeはCSSを書かれたまま忠実に再現するのでズレや重なりが平気で表示される。 overflowはデフォルトの値がvisibleのため、ボックスからはみ出すものははみ出して表示されるのである。 今回のも、marginがきいていないのではなく、きいてはいるのだがはみ出して表示されているのできいていないように表示されてしまっていた
はてなブックマークのChrome Extensionを外した 以前からGoogleで検索して、検索結果ページを表示→どれかのページへ遷移→戻るボタンクリックとしたときに、 なぜか検索結果一覧ページじゃなくて、さらにもうひとつ前のページに戻ってしまう現象があって、 なんでこんなことになるんだろうとおもってたんだけど、どうもはてブのExtensionのせいだったらしい。 ふと「chrome google 検索 戻れない」で検索したら、 このページ がひっかかって、あ、もしかして、どれかextensionが悪さしているかなとおもって、順番にはずしていったところ、はてブのextensionだった。 たぶん、検索結果全部のURLのはてブ数をだしてるあたりの処理が終わらない間に、リンクをクリックしちゃって次のページに遷移すると、戻れなくなるのではないかという気がしてる。 まあ、そんなこんなでexten
2013-06-30更新: 2013 年 6 月、Googe Chrome Frame の開発終了 が発表されたのを受け、新しい記事 を書きました。 IE で Google Chrome と同等のレンダリングを実現するプラグイン、Google Chrome Frame が 正式版になりました。ユーザはよりリッチで快適な Web 体験ができるし、サイト管理者としても事実上古い IE のシェアが減ることになって嬉しい、しかもインストールに管理者権限が不要という、ちょっといいプラグインなんですよね Chrome Frame。 とは言えユーザがインストールして使ってくれないことにははじまらないので、この Chrome Frame の利用を促進するためにサイト管理者にできることを紹介します。 ページを Chrome Frame でレンダリングさせる まず、すでに Chrome Frame がインスト
というわけで、Google Chromeをメインブラウザとして本格的に使い始めて一年半ほどになる管理人が、最近インストールした個人的におすすめなChrome拡張機能を紹介します。今回は5個だけということで少ないですが、どれもおすすめ度はかなり高い拡張機能です。 半年ほど前にも、Google Chromeに乗り換えて一年、私がWEB活動に欠かせない拡張機能11個まとめという記事を書いて管理人使用中のChrome拡張機能を晒したのですが、ここで紹介するのはそれ以降にインストールした常用中の拡張機能ということになります。 動画ゲッター ニコニコ動画をダウンロードできる拡張機能。FLVやMP4など複数のフォーマットの動画が用意されている場合は選択してダウンロードできるほか、動画共有サイトでなくても動画が埋め込んであるサイト(ブログ記事など)ならどのようなサイトからでもダウンロードできるのが便利。
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 4月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを16進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい! Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く