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

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

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

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

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

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

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

htmlで改行をする方法(3秒で習得できます)

  どうも、チャーさんです。   あなたはhtmlを勉強していて、どうすれば 改行できるのか?と悩んでいませんか。   また色々タグを覚えて、プログラミングを上達させたい …

no image

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

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

no image

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

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

no image

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

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

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

最新記事

チャーさん

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

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

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