CSSの色と背景

05/12/2019, by Ivan

こんにちは。前のレッスンでは、htmlファイルとcssファイルの2つのファイルを作成しました。これがそのコードです：

index.html：

<html>
 <head>
  <title>CSSチュートリアル</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <p>drupalbook.orgと一緒にCSSを学びましょう</p>
  <p>2番目の行drupalbook.orgと一緒にCSSを学びましょう</p>
 </body>
</html>

style.css：

body{
  background: #eeeeee; /* ページの背景 */
  font-size: 14px;     /* フォントサイズ */
}
p{
  color: #ff0000; /* テキストの色 */
}

このレッスンでは、CSSの学習を続けて、テンプレートに色と塗料を与えます。背景プロパティから始めましょう。これはbodyに既に設定されています：

body{
  background: #eeeeee; /* ページの背景 */
  font-size: 14px;     /* フォントサイズ */
}

ご覧のように、ページのグレーの背景が表示されました：

CSS

まず、ファイル内のcss構文を理解しましょう。すべてのcssプロパティは、これらのプロパティを適用するものへの指標で始まります。例えばbody、p、.class、#idのような指標。指標の前に、ポイントまたはシャープ記号を指定できることに注意してください。ポイントはクラス名を持つタグに追加されます（1つ以上）。シャープは特定のidを持つタグ（1つのタグ）です。例でこれを説明します：

<html>
 <head>
  <title>CSSチュートリアル</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <div class="green">
    <p>drupalbook.orgと一緒にCSSを学びましょう</p>
  </div>
  <div id="blue">
    <p>2番目の行drupalbook.orgと一緒にCSSを学びましょう</p>
  </div>
 </body>
</html>

greenクラスのブルーidの2つのブロックを追加しました。それらのcssを書きましょう：

body{
  background: #eeeeee; /* ページの背景 */
  font-size: 14px;     /* フォントサイズ */
}
 
.green{
  color: #00ff00 /* テキストの色 */
} 
 
#blue{
  color: #0000ff /* テキストの色 */
}

CSS green color

ご覧のように、bodyタグのポイントまたはシャープなしでcssを書きました。また、p、span、ul、liおよび他のタグなどの他のタグのcssもシンボルなしで書きます。クラスを持つタグのためにポイント付きでcssを書きます。シャープで書いたidを持つcssを書きます。私は思います、あなたはそれを記録して、将来混乱しないようにする必要があります：

ポイント－クラス向け

シャープ－idの場合

ポイントとシャープなし－クラスとidなしのタグ

タグ、クラス、またはidを指定した後、中括弧{}にcssを記述します：

body{ /* タグ */
   
}
 
.green{ /* クラス */
 
} 
 
#blue{ /* id */
 
}

ご存知のように、HTMLの短いコース内のclassおよびidは汎用HTML属性です。つまり、これらの属性はすべてのタグに設定できます。このようにして、多くのタグp、span、liから、異なるcssを個別のタグに割り当てることができます。

これで、中括弧内でCSSプロパティを記述できます。colorという単純なものから始めましょう。Colorはテキストの色を定義します。まずプロパティの名前を記述してから、コロンの後にプロパティ値を記述します。colorプロパティの場合、数値形式と単語形式の両方で記述できます：

.green{
  color: #00ff00; /* テキストの色 */
} 
 
#blue{
  color: #0000ff; /* テキストの色 */
}
 
/* 同様に */
 
.green{
  color: green; /* テキストの色 */
} 
 
#blue{
  color: blue; /* テキストの色 */ 
}

6つの16進数で数値形式で書く場合、数値の前にシャープを付けます。最初の2つの数値はcolorredの量を表示します。3番目と4番目の数値はgreenの量を表示します。5番目と6番目の数値は色にblueの量を表示します。つまり、スキームはRGB（R ed赤、Green緑、Blue青）を使用しています。16進数は0から9ではなく0から文字Fに変わります。9の後、10ではなく文字Aが続きます。16進システムで色を選択するのに役立つPhotoshop（photoshop）があります。色の選択をクリックして、パレットで必要な色を選択してください：

colorpicker

これでcolorプロパティの色を選択する方法を知っているので、backgroundプロパティの色を選択できます。背景色を変更して、テキストをより読みやすくしましょう：

body{
  background: #fafafa; /* ページの背景 */
  color: #333; /* ページ上のすべてのテキストの色 */
}
 
.green{
   /* テキストの色 */
} 
 
#blue{
   /* テキストの色 */
}

複数のCSSプロパティを書く場合は、プロパティの終了を示すセミコロンを使用する必要があります。これで、ページがより読みやすくなりました：

HTML CSS

いくつかの場所にもっと緑と青の色を置きましょう：

index.html：

<html>
 <head>
  <title>CSSチュートリアル</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.css" />
 </head>
 <body>
  <p><span id="blue">CSSを学ぶ</span> <span class="green">drupalbook.org</span></p>
  <p>2番目の行CSSを学ぶ <span class="green">drupalbook.org</span></p>
 </body>
</html>

およびstyle.css：

body{
  background: #fafafa; /* ページの背景 */
  color: #333;
}
 
.green{
  color: #26e921; /* テキストの色 */
} 
 
#blue{
  color: #0f15f3; /* テキストの色 */
}

HTML CSS

パレット - カラフルに🎨

Let’s talk