検証ツールの使い方などを学ぶ 5.28

今日は、検証ツールの使い方を学びました。

普段使ってるサイトも検証ツールを使えば、自分の思い通りに変更ができるというのが面白いと思いました。

コーディングする上で何度も出てくるツールだと思うので、どんどん使って操作に慣れていきたいです。

1.検証ツール

  • データ本体を変更しないでシミュレーションができる
  • 呼び方は人それぞれ(検証ツール=開発ツール=デベロッパーツール=コンソール)

(使用例)

  • ローカルで作成→検証ツールで間違いを探すor見た目を揃える
  • 画像タブ右クリック>Open new tab 画像のみ開くことができる

(参考)慣れないうちは、細かく検証ツールを使おう

適宜確認することで慣れる

2.書式

■HTML

引用:https://www.google.com/url?sa=i&url=http%3A%2F%2Fphotodesigndesign.blog.fc2.com%2Fblog-entry-11.html&psig=AOvVaw1AwhE3kuvUU494fDkT6Gfw&ust=1748488687731000&source=images&cd=vfe&opi=89978449&ved=0CBgQ3YkBahcKEwjY25yNmsWNAxUAAAAAHQAAAAAQBA

属性=タグ(要素)に加えてどのように動くかを指定する

<a href="https://html-coding.co.jp/" target="_blank">別画面を開いてサンプルサイトへ飛びます。</a>

href属性:リンク先のURL

target属性:新規タブで開く(blank)などの指示を与える

■CSS

引用:https://skillhub.jp/courses/237/lessons/1876

(参考)分からないことはChatGPTに聞いてみよう

例えば…上手くいかないコードの確認、タグやプロパティの意味

3.CSSセレクタの優先順位の計算について

基本的には上<下のものが優先される

セレクタによって割り振られている点数によって優先順位が変わる