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

2 件のコメント:

  1. Thanks for sharing, nice post! Post really provice useful information!

    Giaonhan247 chia sẻ các bạn các trang web bán đồng hồ uy tín mỹ với dịch vụ mua hộ hàng mỹ uy tín và giải đáp mua quà gì gửi đi mỹ cũng như chia sẻ những kinh nghiệm mua đồng hồ trên ebay uy tín, giá rẻ.

    返信削除
  2. คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> Goldenslot
    สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
    มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

    返信削除