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

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

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

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

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

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

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

no image

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

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

no image

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

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

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

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

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

no image

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

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

no image

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

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

no image

ファビコンの作り方「自作したい人向け」

どうも、チャーさんです。   あなたはあなたのサイト用に、 ファビコンを作りたい。 そう思ってませんか?   この記事ではファビコンの作り方を、 紹介してます。(自作方法を) &n …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

htmlのテーブルを結合させたい場合は読んでください。

  どうも、チャーさんです。 あなたは、htmlで作るテーブルのセルを、 結合させたい、くっつけたいと思っていませんか?   この記事では、htmlのテーブルのセルを、 結合させる …

最新記事

チャーさん

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

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

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