• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / デベロッパーツール入門 / 8.その他のデベロッパーツールの紹介

8.その他のデベロッパーツールの紹介

池田祐太郎 | 2014年3月4日 公開

デベロッパーツール入門

目次

  • 1 目次
  • 2 各ブラウザ毎のデベロッパーツール
    • 2.1 firefox
    • 2.2 safari
    • 2.3 Internet Explorer
      • 2.3.1 IEのバージョンごとの挙動の違いや不具合を発見するのに最適
  • 3 スマートフォン用のsafariのデベロッパーツール
    • 3.1 設定方法

目次

  1. デベロッパーツールとは何か
  2. デベロッパーツールのメリットとデメリット
  3. デベロッパーツールを使ってみよう
  4. デベロッパーツールでCSSを操作する
  5. 確認から制作まで即使えるCSSの機能(1/2)
  6. 確認から制作まで即使えるCSSの機能(2/2)
  7. デベロッパーツール応用編
  8. その他のデベロッパーツールの紹介(現在のページ)
サンプルサイトを用意しました:
デベロッパーツール用sample site

dev5_1-2

各ブラウザ毎のデベロッパーツール

今回はGoogleが提供するブラウザ、Chromeのデベロッパーツールを紹介しました。
他にも各ブラウザにデベロッパーツールがあり、基本的な使い方は似ていますがインターフェイスの違いや使い方が若干違います。

firefox

dev8_1-2

言わずと知れた「Firebug」。
感覚的には元祖デベロッパーツールという感じがします。最初はFirebugを使っていましたが、なんとなくChromeのデベロッパーツールの方が使いやすく感じ、いまは確認用です。
基本的な画面設計はChromeデベロッパーツールと変わらないです。こちらの方がタブが日本語表記に対応していたりして馴染みやすいのかもしれません。
dev8_2_030214_040108_PM

safari

dev8_3-2

Safariが提供するデベロッパーツール、「Webインスペクタ」。
インターフェイスがChromeやFirebugに比べてちょっと変わっています。これはなれればラクなのかもしれません。
個人的にはCSSの入力時にサジェスト用語の表示が若干遅かったり、値のあとのセミコロン「;」を自動入力してくれない、タブで移動するとちょっとやりづらいという点がありあまり使っていません。。。(とはいえ、つかわないといけない状況のときはしょうがないのでできるだけ慣れるようにしています)

Internet Explorer

Internet Explorerのデベロッパーツール、「F12開発者ツール」。
dev8_4_030214_040203_PM

IE11になってから全体的なデザインやインターフェイスが大きく変わりました。Windows8っぽい感じですね。

IEのバージョンごとの挙動の違いや不具合を発見するのに最適

今でこそあまり聞かなくなりましたが、ちょっと前までIE6,IE7対応というのはまだ多く、それにより工数がかさみどうしても再現できないレイアウトなど戸惑ったご経験は少なくないでしょう。
そんなときにIEの開発者ツールを使えばバージョン毎の確認が用意にできます。

IE11になってバージョン切り替えの設定場所が変更されました。
dev8_5_030214_035730_PM

スマートフォン用のsafariのデベロッパーツール

スマホ用のデバッグはMac用に限定されますが、SafariのWebインスペクタが使いやすいです。
USBでMacとつないだiPhoneで表示しているサイトをデベロッパーツールで操作することができます。リアルタイムに変更されるので崩れや修正の確認は非常に効率良くできます。

設定方法

1.iPhoneの設定→Safari→詳細→Webインスペクタを「オン」
IMG_7650

2.iPhoneとMacをUSBで接続し、Safariを起動。

3.Safariのツールバーの「開発」に自分のiPhoneが表示されるので、選択
dev8_6

4.通常のWebインスペクタと同じような画面が表示され、スマホ側で表示されているページのhtmlやcssを操作できる
dev8_7-2

このようにPC/スマホどちらも扱えるとちょっとした崩れはすぐに確認できるようになります。
Chromeのデベロッパーツールに慣れはじめたら、他のツールも使ってみることをオススメします。

  1. デベロッパーツールとは何か
  2. デベロッパーツールのメリットとデメリット
  3. デベロッパーツールを使ってみよう
  4. デベロッパーツールでCSSを操作する
  5. 確認から制作まで即使えるCSSの機能(1/2)
  6. 確認から制作まで即使えるCSSの機能(2/2)
  7. デベロッパーツール応用編
  8. その他のデベロッパーツールの紹介(現在のページ)
メールコンサルティング
WordPress保守管理サービス

Filed Under: デベロッパーツール入門 関連タグ:css, HTML

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

7.デベロッパーツール応用編
2014年3月4日
タグ: css, HTML, jQuery
カテゴリー: デベロッパーツール入門
6.確認から制作まで即使えるCSSの機能(2/2)
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門
5.確認から制作まで即使えるCSSの機能(1/2)
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.