ビデオ: JavaScript Air Episode 012: Lodash & Open Source 2025
CSSプロパティは要素の特性を変更するものです。ダグラスJavaScriptの美しい目の色、彼の体と腕の大きさ、彼の頭の角の丸み、彼のさまざまな部分の位置はすべてプロパティの値によって決定されます。
開始するには、Webブラウザを開いて公開ダッシュボードにログインします。次に、以下の手順に従います。
-
第6章：ロボットのスタイル - 開始をクリックし、タイトルをクリックして開きます。
<！ - 1 - >ロボットアプリに直接行くこともできます。
HTMLパネルのHTMLとCSSパネルのCSSが表示されます。
-
トップメニューの[フォーク]をクリックして、自分のJSFiddleアカウントでフィービンのコピーを作成します。
いくつかの異なるCSSプロパティの値を変更して、ダグラスの外観を変更します。
-
p要素のCSSルールを検索します。
現在、CSSペインの2番目のルールです。
<！ - 2 - > -
font-sizeプロパティの値を2に変更します。
完全なルールは次のようになります。
p {font-size：2 5em;}テキストサイズを指定する方法はいくつかあります。最も一般的に使用される方法は、ピクセル（px）、パーセント（％）、またはem（em）を使用する方法です。 percentまたはemsを使用すると、選択した要素のフォントサイズは、親要素のフォントサイズに基づいて設定されます。たとえば、5emは選択した要素の親のフォントサイズの2.5倍です。
<！ - 3 - > -
[実行]ボタンをクリックすると、結果ウィンドウに変更が表示されます。
ダグラスの大胆なメッセージ。
-
body要素のCSSルールを検索します。
-
"Comic Sans MS"、筆記体、sans-serif
完全なCSSルールは次のようになります：
引用符の使用に注意して本文要素の値を次のように変更します。
実行ボタンをクリックして結果を確認します。
-
ダグラスは今、彼のシャツに面白い手紙を持っています。
ダグラス、楽しい手紙で！
次に、あなたの目の色に合わせてダグラスの目の色を変えてください！
ダグラスの目の色を含むCSSルールを検索します。
-
現在の状況は
です。目{背景色：青;幅：20％;高さ：20％; border-radius：50％;}
background-colorプロパティの値を目の色に変更します。
-
たとえば、目が茶色の場合は、次のように変更します。
background-color：brown;
[実行]ボタンをクリックして結果を確認します。
-
ダグラスの目が茶色という言葉を使用するときに変わる色は非常に茶色に見えず、ダグラスの目を緑色にするときに使用される色も誰の目にも見えない色ではありません。より正確な色を得るには、別のCSSカラー名を使用するか、または16進表記を使用して独自のカスタムカラーを作成します。
