Chrome開発者向けツールを使ってみる(入門編)

みなさんお久しぶりですM1(大学院1年)のFuyaです．

今年もあと早いもので，残り1ヶ月となりました．
12月恒例のアドベントカレンダーをはじめます！

3,4年生あわせて30人近くいる中で，M1の私が書いていいのか...恐縮です．
入門としてGoogle Chromeの開発者向けツール(DevTools)の簡単な使い方を紹介します．
DevToolsからCSSの調整をしたり，JavaScriptのデバッグを行うことができます．

起動しよう

「Control 」+「Shift」+「 I」(Windowsの場合) 「Command」＋「Shift」＋「I」(OSXの場合)で起動します． もしくは，ブラウザ画面で右クリックをして「要素の検証」を選択してください．

こんな画面が出て来ましたか？出てきたら早速使ってみましょう

値を編集してみよう

このツールを使って簡単にウェブサイトのHTMLを見ることができます！
左下にある虫眼鏡のアイコンをクリックしてみてください． その後，表示画面にマウスを持って行くとHTMLの要素をみることができます
これで，どんなサイトのHTML構造も分かりますね
値をクリックすれば編集することもできます．

CSSの値を編集してみよう

要素を選択した際，右側にスタイルシートがあるのに気づきましたか？
この値をいじることでリアルタイムにCSSの調整を行うことができます．

色の選択にはカラーピッカーを使うこともできますよ

これでCSSの細かいプロパティの調整ができますね！

短いですが，今回はこのへんで！また次回お会いしましょう
(アドベントカレンダー2回書くことなんてないよね??...)