競合サイトのCSSとJavaScriptを丸裸にする方法 - ASCII.jp
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第3回は、「Elements」パネル、「Sources」パネルでサイトを検証する方法を解説します。 他人のコードを効率よく調べたい！ ディレクターやデザイナーから、「このサイトみたいなデザインにしたいんだよね」と言われることってよくありますよね。また、海外のかっこいいサイトを見ていると、使われているインタラクションを真似したいと思うこともあります。 そこで、Chromeデベロッパーツールを使って、他のサイトのCSSやJavaScriptを効率的に調査する方法を解説します。 1.背景画像を100%表示しているCSSの実装方法を調べる 背景画像の比率を変えずに高さと幅をフィットさせるデザインのページを例に、Chromeデベロッパーツールの「Elements」パネルで実装を調べていきます。Elementsパネルは
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
CSSの修正が捗る「リアルタイムコーディング」とは
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。 細かい修正の手戻りにもさくさく対応したい！ コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白をもう少し小さくして」と、クライアントやディレクターから細かい修正を求められることはよくありますよね。さらに、修正後、「やっぱり元に戻してくれる？」「もっと小さくしてできる？」と手戻りが発生し、作業時間がどんどん伸びてしまうこともあります。 どんなに確認のステップを踏んでも、この手の手戻りは完全にゼロにはできないもの。そこで、Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。 Elementsパネルの起動方法 Goo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
