css HTML コーダー

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

投稿日:

Pocket

うも、チャーさんです。

 

あなたはデベロッパーツールって、

どう使ったらいいのか?と思っていませんか。

 

そもそもどんな使い道があるん?

と疑問に思っていませんか。

 

 

この記事では、デベロッパーツールの、

使い方やその使い道を書いています。

 

なので、あなたがこの記事を読めば、

デベロッパーツールの使い方も、

その使い道もわかるでしょう。

 

ちなみにデベロッパーツールは、

とても便利です。

 

スポンサードサーチ

デベロッパーツールの使い方はこれ!

 

で早速結論から話します。

 

デベロッパーツールの使い方ですが、

コーディングの時にhtmlとcssのテストとして、

使います。

 

 

というのもデベロッパツールを使うと、

実際にブラウザ画面をみながら、

直接htmlやcssを編集できます。

 

そしてhtmlやcssを編集すると、

その場でブラウザに表示される画面内容を、

好きにいじることができるのです。

 

 

で、web制作でのサイトやホームページ作成などでは、

このデベロッパーツールを使い、

htmlとcssを編集して、これでokってなったものを

ファイルにコピーして、アップロードという使い方をするわけです。

 

とまぁ、これがデベロッパーツールの使い方なのですが、

せっかくなので、例をみてみましょう。

 

 

こちらはグーグルのトップ画面です。

そして右に出てるのが、デベロッパーツールの画面です。

 

 

でここでこのデベロッパーツールを使い、

htmlやcssを書き換えると、

このように背景色を変えたグーグルができました。

 

 

(わかりやすいようにがっつり色変えました。)

 

 

こんな風に、デベロッパーツールを使うと、

ブラウザに表示される画面を、あなた自身で、

すぐに変更することができます。

 

で、話が重複しますが、

web制作ではこうしてサイトなどを作るとき、

気にいる画面を制作します。

 

 

でこれでokってなったら、その都度、

実際にhtml・cssファイルに記述してくって形です。

 

これであなたもweb制作ができます。

 

 

スポンサードサーチ

デベロッパーツールの出し方(表示のさせかた)

 

で、ここからはweb制作などでは必須な、

こんな便利なデベロッパーツールの出し方を説明します。

(筆者はMacユーザーなのでmacの場合です。)

 

こちらは簡単で、グーグルクロームのブラウザ上で、

どこでもいいので、右クリックをして、

検証という項目をクリックしましょう。

 

 

すると、デベロッパーツールの画面が開きます。

 

するとこのようにタグがズラーっと並んでいるので、

 

 

あなたが編集したい箇所でクリックをしましょう。

 

(デベロッパーツールのタグの部分にマウスを持ってくると、

ブラウザの画面が青く光ります。光ってるとこが、

そのタグが表示してる部分ということです)

 

 

で、デベロッパーツールの画面下半分を、

みてください。

一番上にelement.styleと薄い文字で書いてますね。

 

このelement.styleというとこに、

あなたがcssを記述すると、好きなようにデザインを、

編集することができます。

 

例えば、background-color:

を指定すると、色がかえれます。

 

 

で、デベロッパーツールには他にも色々機能がありますが、

まずはこの辺りができると、

デベロッパーツールの使い方として最初は十分です。

 

なので、こちらをマスターしましょう。

 

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

デベロッパーツールの使い方ですが、

web制作などのコーディングの際に、

htmlとcssを編集してテストする、です。

 

さてそれでは、あなたも

デベロッパーツールの使い方がわかったと思いますので、

まずはグーグルの検索画面の背景色でも変えてみましょう。

 

 

ちなみに背景色を変えるには、背景をつけたいタグの場所で、

background-color:ここに好きな色をかく(例 blue,redなど);

を書けばokです。

 

するとあなた自身でデベロッパーツールの使い方が、

よくわかるようになるので、ぜひ試してみてください。

 

 

ちなみにデベロッパーツールを使って、

cssやhtmlを変えても、再読み込みすれば、

全部元どおりになります。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

 

-css, HTML, コーダー


スポンサードサーチ

関連記事

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

htmlのspanとは?使い道を紹介します。「意外に便利」

  どうも、チャーさんです。   あなたはspanタグとは何だ? spanタグって何に使えばいいの? と思っていませんか。   この記事では、spanタグとは、 そしてs …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。