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
Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介
2018年3月15日 Webデザイン, XD デザインやプロトタイプを作成できるAdobe XD。みなさん使っていますか？先日アップデートもされ、Photoshopとの連携がより簡単になったり、Sketchファイルも扱えるようになるなど、進化が進んでいますね。これまではWebサイトのデザインにはPhotoshopが多く使われてきましたが、これからはXDが主力となっていきそうな予感。ということでAdobe XDを使ったWebデザインの手順を紹介します！ ↑私が10年以上利用している会計ソフト！ 今回作成するもの このように簡単なホームページと問い合わせフォーム用のモーダルウィンドウの画面を作ります。プロトタイプ機能で画面推移のアニメーションも加えてみましょう！ 1. 画面の作成準備 Adobe XDを立ち上げ、Web用の画面を1280×800のサイズで新規作成します。「portfolio」と
どんどん便利になってるChromeの機能拡張！Web制作に便利な機能がまとめられた -CanvasFlip
DOMの構造を調査する、要素のサイズを測る、要素のみのキャプチャを撮る、画像ファイルを抽出する、カラーやテキストを編集するなど、これらWeb制作に便利な機能がまとめて、しかも高性能で快適に利用できるChromeの機能拡張を紹介します。 それぞれ単体の機能拡張を使用している人は、一つにまとめられて簡単だと思います。 CanvasFlip CanvasFlipの機能 CanvasFlipのインストール CanvasFlipの使い方 CanvasFlipの機能 CanvasFlipは先日リリースされたばかりの新しい機能拡張で、私も先週から使用していますが、かなり便利です。パネルのUIも操作しやすく、ページに表示されるハイライトやメジャーも見やすいと思います。 ページの基本情報。 指定した要素のプロパティを表示するインスペクタ。 インスペクタでスタイルを変更すると、すぐにページに反映されます。 メ
IllustratorからWeb用素材を一気に書き出す！アセットの収集と一括書き出し - Adobe Blog
IllustratorからWeb用素材を一気に書き出す！アセットの収集と一括書き出し IllustratorでWebデザインデータを作ると書き出すのが面倒？ ちょっと前までは、IllustratorからWeb用の素材を書き出そうと思うと、アートボード単位で書き出すか、またはひとつひとつ「スライス」を作成して書き出すかのどちらかでした。 「Web用に保存」は便利な機能ですが、高解像度画面用の素材の書き出しには対応しておらず、複数サイズの素材が必要な場合は手間がかかります。 スライスとWeb用に保存の詳しい使い方: Illustrator入門 | Webデザイン編 第6回 デザインから画像を書き出そう 最新のIllustrator CCでは、複数の素材書き出しが必要な場合でもまとめて書き出せる新しい機能が利用できます。また、アイコンのように頻繁に変更されるアセットの書き出しも楽になります。この
[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート
背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。 例えばパネルをクリアにして、背景をブラーにするなど、反転させてみるのも美しい見た目になります。 .blur-container.blur-8 { --bg: url(background.jpg); overflow: hidden; background-image: var(--bg); } .blur-container.blur-8::after { background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.8; -webkit-filter: blur(6px); filter: blur(6px);
![[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd057f6b3e7535c99e31d0c606db378bb2b2e215/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017021304-08.jpg)
Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた
2018年3月15日 XD, スマートフォン, 便利ツール 先日発表された、Adobeのプロトタイピングツール、Adobe Experience Design（Adobe XD）。Sketchライクなシンプルなグラフィックツールです。なにやら面白そうだったので、早速つついてみました。デモとして、簡単にチャットアプリのプロトタイプを作ってみたので、使用感とともに紹介します。 ↑私が10年以上利用している会計ソフト！ Adobe Experience Design（Adobe XD）って何？ Adobe XDはアプリやWebサイト等のデザインに使えるグラフィックツール。ただグラフィックが作成できるだけではなく、クリックやタップで次の画面に移動し、実際に動作しているようなプロトタイプも作成できます。それだけの機能がついて、なんと無料です！ 残念ながら今のところMac専用ツールですが、今年中にWi
Adobe Illustrator CC 2015.3の新機能まとめ
Adobe Illustrator CC は、毎年6月に CC 2014 → CC 2015 のようにメジャーアップデートされますが、2016年6月は CC 2016 ではなく「CC 2015.3」というマイナーアップデートでした。 しかし、Web制作者にとっては嬉しい機能も追加されたため紹介します。 アセットの書き出し Photoshop には随分前から付いていましたが、ようやく Illustrator にも付きました。 アセットの書き出し方法はいくつかあり、 書き出したいオブジェクトやグループを「アセットの書き出し」パネルにドラッグする 書き出したいオブジェクトやグループを選択してアートボード上で右クリックし、［収拾 (書き出し用)］メニューを選択する 書き出したいオブジェクトやグループを選択してアートボード上で右クリックし、［選択範囲を書き出し…］メニューを選択する 書き出したいオブ
Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA
JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
Web制作者にオススメの定規・ルーラーの無料ツール、半透明のパネルで単位にpx, emが使える優れもの！ -Linear
シンプルなデザインで使いやすいOS X用の定規・ルーラーの無料アプリを紹介します。 Web制作に役立つよう設計されており、単位はpxだけでなくemでも利用できます。 イメージとしては、ノギスのように測る感じです。 Linear App Linear -GitHub Linear Appの特徴 Linear Appの使い方 Linear Appのダウンロードとインストール方法 Linear Appの特徴 Linear Appは、Web制作者のための定規アプリで、完全無料のオープンソースで開発されています。 ブラウザの機能拡張ではなく、OS X用のアプリです。 Chromeのデベロッパーツールや他のアプリ上でもオーバーレイで動作します。 複数の定規を作成できます。 作成した定規をそのまま複製することができます。 カラーはダークとライトの2種類。 定規の単位は、pxとemに対応。 ショートカット
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインで使う数値をすぐに算出！マージンやフォントサイズのバリエーションを導き出すオンラインツール
http://buchineko.website/chrome-devtools-cording/