• About
  • Advertise
  • Careers
  • Contact
月曜日, 3月 27, 2023
  • Login
No Result
View All Result
NEWSLETTER
cuusoolab.
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
  • World
  • Politics
  • Business
  • Science
  • Tech
    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    Trending Tags

    • Sillicon Valley
    • Climate Change
    • Election Results
    • Flat Earth
    • Golden Globes
    • MotoGP 2017
    • Mr. Robot
  • Entertainment
  • Lifestyle
    • All
    • food
    スターバックス・カナダが代替肉を使ったメニューを展開

    スターバックス・カナダが代替肉を使ったメニューを展開

    Trending Tags

    • Golden Globes
    • Mr. Robot
    • MotoGP 2017
    • Climate Change
    • Flat Earth
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
  • World
  • Politics
  • Business
  • Science
  • Tech
    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    Trending Tags

    • Sillicon Valley
    • Climate Change
    • Election Results
    • Flat Earth
    • Golden Globes
    • MotoGP 2017
    • Mr. Robot
  • Entertainment
  • Lifestyle
    • All
    • food
    スターバックス・カナダが代替肉を使ったメニューを展開

    スターバックス・カナダが代替肉を使ったメニューを展開

    Trending Tags

    • Golden Globes
    • Mr. Robot
    • MotoGP 2017
    • Climate Change
    • Flat Earth
No Result
View All Result
cuusoolab.
No Result
View All Result
Home tool

Chromeの検証(デベロッパツール)の使い方

by cslorime
15/02/2020
in tool
0
Chromeの検証(デベロッパツール)の使い方
0
SHARES
488
VIEWS
Share on FacebookShare on Twitter

デベロッパツールとは?

ウェブサイトのコードをチェック

自分のサイトや他のサイトのコードを見ることができます。
CSSの対応なども閲覧できます。

デザイン変更

Chrome上で直接変更したものを見ることができるので、ちょってしたテストに使えます。

デバイスごとの表示チェック

様々なサイズのデバイスでどのように表示できるかを確認できます。

デベロッパーツール

Chromeでデベロッパーツールを起動させます。
右クリックで「検証」を選択します。

ショートカットキーはMacは Shift + ⌘ + C、Windowsは Ctrl + Shift + C です。

デベロッパーツールの画面

「Elements」タブではHTMLが、「Styles」タブではCSSが表示されます。

「Elements」タブ上でマウスを動かすと要素選択ができます。

選択された要素のCSSファイルと行数の場所が表示されています。

また線で消されているものは、適応されていないCSSです。多くの場合は、その要素に同じプロパティーの指定が複数あり、優先順位が低いため適応されていません。

三角アイコンはエラー表示で、適応されていないので修正する箇所もわかりやすいですね。

「Styles」タブ上で表示されるチェックを外すと、外したCSSが適応されなくなり、要素ごとのテストにも使えます。表示がうまくいかないときに、ここでチェックしていくのもいいです。

デベロッパーツール上でCSSを編集する

「Styles」タブを表示させた後、値が書かれている部分をクリックすると入力できるようになります。

数値の微調整に主に使いますが、自分のサイト以外でも使えるのでカラー数値の入れ替えなどいろいろ試すことができます。
配色変更してみて印象を変えてみるのも面白いです。

別のデバイスサイズで検証する

デベロッパーツールではいろいろなサイズのデバイスでどう見えるのかも検証できます。

Chromeのキャッシュを削除してCSSを反映

1,デベロッパーツールを開く

Windowsの場合

F12キーを押す。

Macの場合

Shift + ⌘ + Cもしくは検証

2,リロードボタンを右クリック

ChromeのURLバーの横に表示されているリロードボタンを右クリック

3,[キャッシュの消去とハード再読み込み]をクリック

ページのキャッシュが削除され、最新データが読み込まれます。

cslorime

cslorime

Next Post
WordPressインストール後の初期設定必須項目

WordPressを始めたらインストールするプラグイン

Recommended

webデザイナーを目指す人が準備しておくテキストエディタ

webデザイナーを目指す人が準備しておくテキストエディタ

4年 ago
【2019年版】おすすめのWi-Fiルーターは?選び方は?分かりやすく比較

【2019年版】おすすめのWi-Fiルーターは?選び方は?分かりやすく比較

4年 ago

Popular News

    Connect with us

    Newsletter

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
    SUBSCRIBE

    Category

    • basic_wordpress
    • food
    • info
    • Tech
    • tool
    • WordPress
    • Trending
    • Comments
    • Latest
    Wherbyの使い方-招待された場合

    Wherbyの使い方-招待された場合

    23/04/2020
    テキストエディタのAtomのインストールからオススメの初期設定とプラグイン

    テキストエディタのAtomのインストールからオススメの初期設定とプラグイン

    10/04/2019
    WordPress構築に便利だったツール

    WordPress編集ができるようになるためのチートシートコレクション

    15/02/2020
    ダッシュボード(管理画面)を使う

    ダッシュボード(管理画面)を使う

    13/04/2019
    Wherbyの使い方-招待された場合

    Wherbyの使い方-招待された場合

    0
    webデザイナーを目指す人が準備しておくテキストエディタ

    webデザイナーを目指す人が準備しておくテキストエディタ

    0
    WordPressへのログイン

    WordPressへのログイン

    0
    ダッシュボード(管理画面)を使う

    ダッシュボード(管理画面)を使う

    0
    Wherbyの使い方-招待された場合

    Wherbyの使い方-招待された場合

    23/04/2020
    スターバックス・カナダが代替肉を使ったメニューを展開

    スターバックス・カナダが代替肉を使ったメニューを展開

    01/03/2020
    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    01/03/2020
    スマホでWordPressを簡単に更新する方法

    スマホでWordPressを簡単に更新する方法

    15/02/2020

    About Us

    We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

    • About
    • Advertise
    • Careers
    • Contact

    © 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

    No Result
    View All Result
    • Home
    • Politics
    • World
    • Business
    • Science
    • National
    • Entertainment
    • Gaming
    • Movie
    • Music
    • Sports
    • Fashion
    • Lifestyle
    • Travel
    • Tech
    • Health
    • Food

    © 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

    Welcome Back!

    Login to your account below

    Forgotten Password?

    Retrieve your password

    Please enter your username or email address to reset your password.

    Log In
    Close

    Buy me a cup of coffee

    A ridiculous amount of coffee was consumed in the process of building this project. Add some fuel if you'd like to keep me going!