HTML & CSで背景色を設定する3つの方法

ページ名：HTML _ CSで背景色を設定する3つの方法

HTMLを使ってそのページの背景色を変えたいと思いましたか？残念ながら、HTML 5では、これはもはやHTMLコーディングだけでは不可能です。その代わり、HTMLと背景色の両方を使う必要があります。このWikiHowでは、HTMLとCSSを編集してWebページの背景色を変更する方法を説明します。

知っておくべきこと

  • 背景色を管理するHTMLの属性はなくなりましたが、HTMLとCSSを使って背景色を簡単に変更することはできます。
  • 特定の色が必要な場合は、色の数値コードが必要です。特定の色が必要ない場合は、"オレンジ "や "水色 "といった言葉を使うことができます。
  • HTMLとCSSを使ってウェブページを編集する場合、無地の背景、グラデーション、または変化する背景を作成することができます。
方法1

ベタ塗りの背景色を設定する

  1. 文書の「html」ヘッダーを探します。文書の一番上にあるはずです。
  2. body」要素に「background-color」プロパティを追加する。body括弧の間にbackground-color: と入力する。これで、次のような「body」要素ができるはずです：
      body { background-color： }
    • ここでは、"color "は使えません。
  3. background-color "プロパティに希望の背景色を追加します。background-color: "要素の隣に、選択した色の数値コードとセミコロンを入力します。例えば、ページの背景をピンクにするには、次のようにします：
      body { background-color：background-color: #d24dff; }とします。
  4. style」情報を見直すこの時点で、あなたのHTML文書のヘッダーは以下のようになっているはずです：
      <!DOCTYPE html> <html> <head> <style> body { background-color：#d24dff } </style> </head> </html>
  5. background-color」は、他の要素に背景色を適用するときに使います。body要素で設定したのと同じように、ヘッダーや段落など、他の要素の背景も「background-color」で定義することができます。例えば、メインヘッダー（<h1>）や段落（<p>）に背景色を適用するには、以下のようなコードになります：
      <!DOCTYPE html> <html> <head> <style> body { background-color：#} h1 { background-color：#} p { background-color：#} </style> </head> <body> <h1>緑背景のヘッダー</h1> <p>白背景の段落</p> </body> </html>
方法2

グラデーション背景の作成

  1. 文書の "html "ヘッダーを見つけてください。文書の一番上にあるはずです。
  2. このプロセスの基本的な構文を理解してください。グラデーションを作成する際に必要な情報は2つあります：開始点／角度、そしてグラデーションが遷移する色です。グラデーションがすべての色の間を移動するように複数の色を選択したり、グラデーションの方向や角度を設定することができます。
    background: linear-gradient(direction/angle, color1, color2, color3など)；
    }}
  3. 垂直方向にグラデーションをかけます。方向を指定しないと、グラデーションは上から下へ進みます。グラデーションを作るには、<style></style>タグの間に以下のコードを追加します：
      html { min-height: 100%; } body { background: -webkit-linear-gradient(#93B874, #C9DCB9); background: -o-linear-gradient(#93B874, #C9DCB9); background: -moz-linear-gradient(#93B874, #C9DCB9); background: linear-gradient(#93B874, #C9DCB9); background-color：#93B874; }
    • ブラウザによってグラデーション関数の実装が異なるため、いくつかのバージョンのコードを含める必要があります。
  4. 方向性のあるグラデーションを作る厳密に垂直でないグラデーションを作りたい場合は、グラデーションに方向を追加して、色の移り変わりの見え方を変えることができます。そのためには、<style></style>タグの間に次のように入力します：
      html { min-height: 100%;} body { background: -webkit-linear-gradient(left, #93B874, #C9DCB9); background: -o-linear-gradient(right, #93B874, #C9DCB9); background: -moz-linear-gradient(right, #93B874, #C9DCB9); background: linear-gradient(to right, #93B874, #C9DCB9); background-color：#93B874; }
    • left "タグと "right "タグを使って、グラデーションの方向を変えてみることができます。
  5. グラデーションを調整するには、他のプロパティを使用します。グラデーションでできることは他にもたくさんあります。
    • 例えば、2色以上の色を追加できるだけでなく、それぞれの色の後にパーセンテージを付けることもできます。これによって、各色のセグメントにどれくらいの間隔を持たせるかを設定できます。この原理を使ったグラデーションのサンプルを以下に示します：
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%)；
  6. 色に透明度を加えます。これで色が薄くなります。同じ色を使って、色から何もない状態までフェードさせます。rgba()関数を使用して色を定義する必要があります。エンディングの値が透明度を決定します。
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1))；
  7. 完成したコードを確認してください。あなたのウェブサイトの背景としてカラーグラデーションを作成するコードは次のようになります：
      <!DOCTYPE html> <html> <head> <style> html { min-height: 100%; } body { background: -webkit-linear-gradient(left, #93B874, #C9DCB9); background：background: -o-linear-gradient(right, #93B874, #C9DCB9); background: -moz-linear-gradient(right, #93B874, #C9DCB9); background: linear-gradient(to right, #93B874, #C9DCB9); background-color：背景色: #93B874; } </style> </head> <body> </body> </html>
方法3

変化する背景の作成

  1. 文書の "html "ヘッダーを見つける。文書の一番上にあるはずです。
  2. body "要素にanimationプロパティを追加します。body {」括弧の下、閉じ括弧の上のスペースに次のように入力する：
      -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite；
    • 上の行はChromiumベースのブラウザ用で、下の行はその他のブラウザ用です。
  3. アニメーションに色を追加します。次に、@keyframesルールを使って、循環させる背景色と、それぞれの色がページに表示される時間を設定します。ここでも、ブラウザごとに別々のエントリーが必要です。body "括弧の下に以下のコードを入力してください：
      webkit-keyframes colorchange { 0% {background：0% {background: #33FFF3;} 25% {background：#50% {background：#75% {background：#100% {background：#9B59B6;} } @keyframes colorchange { 0% {background：0 % {background: #9B59B6;} @keyframes colorchange { 0% {background: #33FFF3;} 25 % {background：50% {background: #78281F;} 50% {background：#75% {background：#100% {background：} {background: #9B59B6;} } 100
    • 2つの罫線（@-webkit-keyframesと@keyframesは同じ背景色とパーセンテージを持っていることに注意してください。どのブラウザでも同じエクスペリエンスになるように、これらは統一しておきたいものです。
    • パーセンテージ（0％、25％など）は、アニメーション全体の長さ（60秒）に対するものです。ページが読み込まれると、背景は0%に設定された色（#33FFF3）になります。アニメーションが60秒の25%再生されると、背景は#7821Fに変わり、以下同様です。
    • 希望する結果に合うように、時間と色を変更することができます。
  4. コードを見直す背景色を変更するコード全体は、次のようになっているはずです：
      <!DOCTYPE html> <html> <head> <style> body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; } @-webkit-keyframes colorchange { 0% {background：0 % {background: #33FFF3;} 25 % {background：#50% {background：#75% {background：#100% {background：#9B59B6;} } @keyframes colorchange { 0% {background：0 % {background: #9B59B6;} @keyframes colorchange { 0% {background: #33FFF3;} 25 % {background：50% {background: #78281F;} 50% {background：#75% {background：#100% {background：} {background: #9B59B6;} } 100 </style> </head> <body> </body> </html>
この記事は、CC BY-NC-SAで公開されている「 3 Methods to Set a Background Color with HTML & CSS 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧