スクリーンショットを撮るのはChromeがいちばん?! | DevelopersIO
新しい職場、新しいパソコン。まず始めに入れるツールの一つがスクリーンショットではないでしょうか。 でも、Chromeのver.59からは、標準機能として装備されたようなのです。 やりかた ChromeのDevelopers Toolを立ち上げる。 Macだと、Chromeを開き「alt + command + i」を同時に押す。 レスポンシブ表示にする 続いて、command + shift + m を押します。または、下記のボタンを押してください。 画面上部に、解像度やデバイスを変更するセレクトボックスが表示されます。 デバイスの選択肢を増やす 必要最低限はありますが、PCのスクリーンショットも取れるようにしたいので、Editを押します。 デベロッパーツールの表示が切り替わるので、「Laptop with HiDPI Screen」と「Laptop with MDPI Screen」をチ
競合サイトのCSSとJavaScriptを丸裸にする方法 - ASCII.jp
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第3回は、「Elements」パネル、「Sources」パネルでサイトを検証する方法を解説します。 他人のコードを効率よく調べたい！ ディレクターやデザイナーから、「このサイトみたいなデザインにしたいんだよね」と言われることってよくありますよね。また、海外のかっこいいサイトを見ていると、使われているインタラクションを真似したいと思うこともあります。 そこで、Chromeデベロッパーツールを使って、他のサイトのCSSやJavaScriptを効率的に調査する方法を解説します。 1.背景画像を100%表示しているCSSの実装方法を調べる 背景画像の比率を変えずに高さと幅をフィットさせるデザインのページを例に、Chromeデベロッパーツールの「Elements」パネルで実装を調べていきます。Elementsパネルは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
