[CSS] ブラウザから開発する方法 (developer mode)

Study / Javascript, Jquery, Css 作成日付 : 2019/12/25 07:54:31 修正日付 : 2019/12/25 07:58:13

こんにちは。明月です。

今まで、CSSスタイルに関して説明しました。CSSスタイルはセレクトからデザインスタイル、トランジションなど様々な機能がありますね。

HTML編集ツールもあるし、他のプログラム言語はIDEや開発ツールがありますが、CSSの場合はないかと疑問になりますね。

CSSの開発は全てウェブアプリケーションで画面の領域です。CSSことでサーバサイドの開発はないですね。

画面なので、普通はブラウザにCSSの編集や開発ツールがありますね。

クロームの基準で「設定」の「その他」の「開発ツール」があります。上のイメージはクロームですが、全てのブラウザがその開発ツールの機能を持っているはずです。

ショットキーでは「ctrl+s方法hift+i」です。

開発ツールを起動すると下記のイメージみたいなタブが出ます。

上の「Elements」、「Console」、「Sources」などのサブタブがありますが、「Elements」以外はほとんどJavasciprtと関係があるものなので、ここでは省略します。

「Elements」タグでみるとウェブサイトのタグ構成が見えます。

「Elements」のタブの下を見るとスタイルというタブでCSSスタイルがありますね。

それで使用方法は下記通りです。

開発ツールの右上をクリックして確認した要素を選択します。

選択すると開発ツールの下の部分でCSSスタイルがでます。

様々のスタイルの設定を試すことができますね。今までCSSのスタイルや値について説明しましたが、実は開発ツールを利用すると別に全て覚えてスタイル作成する必要はないですね。

ただ、概念だけ知っていれば開発ができます。

でも、ブラウザで設定して画面でスタイルが反映することみても実際のソースには反映されないので、気をつけてください。

そのツールを見れば、「-webkit-」がつけているCSSスタイルがあります。

CSSを設定してファイアフォックスやオペラ、IE、クロームを同じページを見ればスタイルが微妙に違います。

その時に上の接頭辞でブラウザ別で設定できます。

接頭辞	説明
-webkit-	クローム、サパーリブラウザ
-moz-	ファイアフォックスブラウザ
-ms-	IEブラウザ
-o-	オペラブラウザ

<html>
  <head></head>
  <body>
    <style>
      .browser-test {
        background: -webkit-linear-gradient(left, red , blue);
        background: -moz-linear-gradient(right, red, blue);
      }
    </style>
    <div class="browser-test">hello world</div>
  </body>
</html>