デベロッパーツールはどうやって使うの？
どこをみれば何がわかるのか、エンジニア初心者の私がよく見ている部分を
デベロッパーツールをのぞいてみよう！にてお話ししました。
デベロッパーツールでサイトを自分の思うようにちょこっと書き換えて、サイトへの表示を変えてみることは大きな勉強になります。
ということで今日のブログでは、デベロッパーツールを使って学習を深めていく方法をまとめておこうと思います。
デベロッパーツールにふれるのがはじめてで不安な人へ
私がデベロッパーツールを初めて教わった時に、「これって触って大丈夫？サイトのデータが書き換えられたりしない？」とエンジニア父ちゃんに聞いたことがありました。
ネットのシステムにはまだ詳しくないというエンジニア初心者にとっては、勝手にデータを消してしまう可能性があると思うと不安になりますよね。
ですが、このデベロッパーツールで動かしたものは、サイト本体には反映されません。
その証拠に、デベロッパーツール内でどんなに書き換えていてもリロードすると元通りになります。
なので、
デベロッパーツールの中は安心して書き換えたり検証してみて大丈夫です。
タグを書き換えてみる、その方法
自分で学習を深めていくために、コードを書き換える方法をおはなしします。
まずはデベロッパーツールを右クリック→”検証”で出しましょう。
（基本的な動作方法は、
デベロッパーツールをのぞいてみよう！にも書いてあります。）
Elememtsパネルのタグをダブルクリック
HTMLの要素が書かれている
Elememtsパネルから、タグをダブルクリックしてみましょう。
反映され打ち込めるようになると赤枠の中のように少しだけ色が変わります。
今回は、このdivタグの文字の色を赤に変えてみようと思います。
上記のように反映されている状態で、style="color: red;"と打ち込み、Enterキーを押します。
文字が赤くなりました！
Stylesパネルのelement.styleに書き込む
まずElementパネルで、タグをクリックします。
クリックしたタグのCSSがどうなっているのかを、
Stylesパネルを見て確認します。
element.styleのパネルをクリックして、background-color: red;と打ち込んでみましょう。
h1タグの背景色が赤くなりました！
あとがき
今日は、
このようにして、「ここの色変えたいな〜こうやってみよ」と書き込んで自分が思ったようになるか検証してみたり、
「ここの部分、こうやったらどうなるかな？」と考えながらサイトの数字を変えてどうなるか試してみたり。
こんなふうにしてデベロッパーツールで遊びながら学んでいくことができます。
いろんなサイトでやってみるとより色々なタグやコードの書き方を知れるのでいいですね。
次回は、このデベロッパーツールのコンソールに打ち込んで、JavaScriptを学んでいきます！
コメント
コメントを投稿