2013年12月1日日曜日

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回書くことなんてないよね??...)

0 件のコメント:

コメントを投稿