CSS BasicsとJavaScript Robot - Dummies

このプロジェクトでは、Douglasという名前のHTMLロボットにスタイルを変更して追加します。ダグラスは今朝、ロボット工場から配達されました。彼のJavaScriptスキルは優れています。彼はあまりメンテナンスを必要としません。彼は良いジョークを教えてくれる！

唯一の問題は、彼の外見はちょっと退屈だということです！確かに、彼は素晴らしい青い目を持っていて、彼の "I <3> <！ - 1 - >

開始するには、Webブラウザを開いて公開ダッシュボードにログインします。次に、以下の手順に従います。

1. 第6章：ロボットのスタイル - 開始をクリックし、タイトルをクリックして開きます。

   ロボットアプリに直接行くこともできます。

   HTMLパネルのHTMLとCSSパネルのCSSが表示されます。

2. トップメニューの[フォーク]をクリックして、自分のJSFiddleアカウントにフィーリングのコピーを作成します。

   <！ - 2 - >

ダグラスにスタイルを与える準備ができました。

JavaScriptロボットCSSパネルの最初の3行を見てみましょう。

body {font-family：Arial;}

これらの3行は CSSルール を形成します。 CSSルールは、2つの主要コンポーネントで構成されます。

• セレクタ： セレクタは、CSSルールが適用される要素を示します。この例では、セレクタは本体です。

  <！宣言ブロック：宣言ブロックには、選択された要素のスタイルを設定する方法を示す1つ以上のCSS宣言が含まれています。この例では、font-family：Arialという宣言が1つしかありません。 。

• CSSセレクタ セレクタはCSSルールのうち{}の前にある部分です。 CSSセレクタは、スタイルを適用するHTML要素をWebブラウザに指示します。

スタイルを適用する要素を選択すると、選択した要素内のすべての要素に同じスタイルが適用されます。

CSSセレクタには要素を選択するさまざまな方法があります。

要素セレクタ：

JavaScriptロボットCSSパネルの最初の2つのルールを見てください。

• body {font-family：Arial;} p {font-size：1em;} これはどちらも要素セレクタの例です。エレメントセレクターは、エレメントの名前を使用してHTMLエレメントを選択します。要素セレクタを使用するには、選択する要素の名前を入力します。このような場合、body要素（useタグとタグ）とp要素（

  タグと
  

  タグを使用）を選択しています。

  クラスセレクタ：

  JavaScriptロボットCSSパネルの

• の3番目のCSSルールを見てみましょう。目{背景色：青;幅：20％;高さ：20％; border-radius：50％;} クラスセレクタはピリオド（。）、続いてclassという名前のHTML属性の値が続きます。この場合、class = "eye"の要素をすべて選択しています。 HTMLペインを見ると、class = "eye"という2つの要素があることがわかります。これらはダグラスの2つの目を作るために使われます。

  クラスセレクタは、複数の要素に同じスタイルを適用する必要がある場合に最適です。この場合、ロボットには2つの目があり、2つの目には共通のものがいくつかあります（たとえば、青色で同じサイズです）。
  

  IDセレクタ：IDセレクタは、ハッシュ記号（#）で始まり、要素のID属性の値に基づいて要素を選択する。たとえば、ダグラスの左目と右目には、次のID属性があります。

  #righteye {position：absolute;左：20％;トップ20％;} #lefteye {ポジション：絶対;左：60％;トップ：20％;}

• IDセレクタは、HTMLドキュメント内の単一の要素を選択する必要がある場合に便利です。 すべてのID属性は、ドキュメント内で一意でなければなりません。

  HTMLペインを見ると、ダグラスの左目と右目にクラス属性を持つことに加えて、一意のID属性もあることがわかります。これらの属性は、ダグラスの顔に目を個別に置くことができるように追加されました。
  

  CSS宣言

  CSS宣言は、CSSセレクタに続く宣言ブロック内に入ります。宣言は2つの部分で構成されています：

  Property：

宣言のプロパティ部分は、何を変更すべきかを指示します。たとえば、要素の色、幅、または位置を変更できます。このプロパティの後にコロン（:)を続けなければなりません。

値：

• 値はプロパティの変更方法を示します。 各宣言は、セミコロン（;）で終わらなければなりません。宣言ブロック内には、ジョブを完了させるために必要な数の宣言を含めることができます。

• 例えば、eyeクラスを持つ要素の宣言ブロックには、 という4つの宣言が含まれています。目{背景色：青;幅：20％;高さ：20％;ボーダー半径：50％;}