Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

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

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

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

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

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

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

htmlでリンクを画像につける方法「速攻でできます」

どうも、チャーさんです。   あなたは、htmlでリンクを画像につける方法を、 探していますか?   この記事では、画像にリンクをつける方法を 話しています。   &nb …

no image

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

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

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

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

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

最新記事

チャーさん

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

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

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