HTMLでWebページの背景色を設定する方法

HTMLでWebページの背景色を設定する方法

HTML で Web ページの背景色を設定するには、 <style></style>タグ内の「body」要素にいくつかの簡単な変更を加えるだけです。望む効果に応じて、手順は若干異なります。このwikiHowでは、単色の背景、画像の背景、グラデーションの背景、または動的に変化する背景を設定する方法を説明します。

方法1方法1/4:

単色の背景を設定する

  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/2609629-1-1.jpg\/v4-460px-2609629-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/2609629-1-1.jpg\/v4-728px-2609629-1-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1お好みのテキスト エディターで HTML ファイルを開きます。 <bgcolor> 属性は HTML5 以降ではサポートされなくなりました。ウェブページの背景色やその他の側面のスタイルを設定する場合は、CSS を使用します。 [1]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f4\/2609629-2-1.jpg\/v4-460px-2609629-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f4\/2609629-2-1.jpg\/v4-728px-2609629-2-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2ファイルに<style></style>タグを追加します。背景色を含む、Web ページのすべてのスタイル情報は、これらの 2 つのタグに記述する必要があります。ファイルにすでに<style>タグがある場合は、関連するセクションまでスクロールするだけです。 

    <! DOCTYPE html >
<html>​​
<ヘッド>

<スタイル>

</スタイル>

</ヘッド>
</html>​​
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/57\/2609629-3-1.jpg\/v4-460px-2609629-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/57\/2609629-3-1.jpg\/v4-728px-2609629-3-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 <style></style>タグに「body」要素を入力します。ここで書き込むすべての情報は、Web ページ全体に影響します。 

    <! DOCTYPE html >
<html>​​
<ヘッド>

<スタイル>
体{ 

}

</スタイル>
</ヘッド>
<本文>
</本文>

</html>​​
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/05\/2609629-4-1.jpg\/v4-460px-2609629-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/05\/2609629-4-1.jpg\/v4-728px-2609629-4-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 「body」要素に「background-color」属性を追加します。この場合、有効な属性は「color」のみなので、「colour」は入力しないでください。 

    <! DOCTYPE html >
<html>​​
<ヘッド>
<スタイル>
体{
    背景色: 
}
</スタイル>
</ヘッド>
<本文>
</本文>
</html>​​
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c9\/2609629-5-1.jpg\/v4-460px-2609629-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c9\/2609629-5-1.jpg\/v4-728px-2609629-5-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":828,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 「background-color」属性に必要な背景色を入力します。緑、青、赤などの色名を入力することも、 #000000は黒、 #ff0000は赤などの 16 進数カラーコードを使用することもできます。 RGB カラー値を入力することもできます。たとえば、 rgb(255,255,0)は黄色です。次の例では、16 進コードを使用して、wikiHow Web サイトのバナーに一致する背景色を作成します。 

    <! DOCTYPE html >
<html>​​
<ヘッド>
<スタイル>
体{
    背景色: #93B874 ;
}
</スタイル>
</ヘッド>
<本文>
</本文>
</html>​​

    • 白: #FFFFFF
    • ライトピンク: #FFCCE6
    • 赤褐色: #993300
    • インディゴ: #4B0082
    • バイオレット: #EE82EE
    • w3school ウェブサイトの HTML 色名リストには、さまざまな色の 16 進コードがリストされています。ご希望の色をこちらで参照できます。
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/43\/2609629-6-1.jpg\/v4-460px-2609629-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/43\/2609629-6-1.jpg\/v4-728px-2609629-6-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6 「background-color」を使用して、他の要素の背景色を設定します。 body 要素で「background-color」を使用して Web ページの背景色を設定すると、他の要素の背景色も定義できます。これらの要素を<style></style>タグの background-color 属性に追加するだけです。 [2] 

    <! DOCTYPE html >
<html>​​
<ヘッド>
<スタイル>
体{
    背景色: #93B874 ;
}
h1 {
    背景色:オレンジ;
}
ｐ {
    背景色: rgb ( 255,0,0 ) ;​
}
</スタイル>
</ヘッド>
<本文>
< h1 >ページタイトル領域の背景はオレンジ色になります</ h1 >
< p >この段落の背景色は赤になります</ p >
</本文>
</html>​​

    広告する
方法2方法2/4:

写真を背景として使用する

  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f6\/2609629-7-1.jpg\/v4-460px-2609629-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f6\/2609629-7-1.jpg\/v4-728px-2609629-7-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1テキスト エディターで HTML ファイルを開きます。多くの人は、ウェブサイトの背景に写真を使用することを好みます。任意の画像、写真、パターン、テクスチャを使用できます。 HTML5 以降では、すべての種類の背景は CSS (カスケーディング スタイル シート) <style></style>タグを使用して設定する必要があります。
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/2609629-8-1.jpg\/v4-460px-2609629-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/2609629-8-1.jpg\/v4-728px-2609629-8-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2ファイルに<style></style>タグを追加します。背景色を含む、Web ページのすべてのスタイル情報は、これらの 2 つのタグに記述する必要があります。ファイルにすでに<style>タグがある場合は、関連するセクションまでスクロールするだけです。 

    <! DOCTYPE html >
<html>​​
<ヘッド>

<スタイル>

</スタイル>

</ヘッド>
</html>​​
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c7\/2609629-9-1.jpg\/v4-460px-2609629-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/2609629-9-1.jpg\/v4-728px-2609629-9-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 <style></style>タグに「body」要素を入力します。ここで書き込むすべての情報は、Web ページ全体に影響します。 

    <! DOCTYPE html >
<html>​​
<ヘッド>

<スタイル>
体{ 

}

</スタイル>
</ヘッド>
<本文>
</本文>

</html>​​
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bb\/2609629-10-1.jpg\/v4-460px-2609629-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bb\/2609629-10-1.jpg\/v4-728px-2609629-10-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 「body」要素に「background-image」属性を追加します。画像ファイル名を入力する必要があります。画像ファイルは HTML ファイルと同じフォルダーに配置する必要があります。または、画像の完全な URL を入力することもできます。 [3] 

    <! DOCTYPE html >
<html>​​
<ヘッド>
<スタイル>
体{
    背景画像: URL ( "画像名.png" ) 、
    背景色: #93B874 ;
}
</スタイル>
</ヘッド>
<本文>
</本文>
</html>​​

    • 背景画像の読み込みに失敗した場合、Web ページの背景が空白にならないように、 background-color属性を追加することをお勧めします。
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7f\/2609629-11-1.jpg\/v4-460px-2609629-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7f\/2609629-11-1.jpg\/v4-728px-2609629-11-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":828,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5複数の画像を使用して、多層背景効果を実現します。複数の画像を重ねて表示することができます。重ね合わせると互いに補完し合う透明な背景の画像がある場合は、この方法が適しています。 

    <! DOCTYPE html >
<html>​​
<ヘッド>
<スタイル>
体{
    背景画像: URL( "image1.png" ) 、 URL( "image2.gif" ) ;
    背景色: #93B874 ;
}
</スタイル>
</ヘッド>
<本文>
</本文>
</html>​​

    • 最初の画像が上に表示され、2 番目の画像が最初の画像の後ろに表示されます。
    広告する
方法3方法3/4:

グラデーション背景を設定する

  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ec\/2609629-12.jpg\/v4-460px-2609629-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ec\/2609629-12.jpg\/v4-728px-2609629-12.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 CSS を使用してグラデーションの背景を設定します。単色の背景は地味すぎるので、もっとユニークにしたいけれど、自動的に変化する色の背景の派手な効果は望んでいない、と思っていませんか?グラデーション背景を試してみませんか?グラデーションとは、ある色から別の色への緩やかな変化です。 CSS を使用して、必要なグラデーション効果を作成およびカスタマイズできます。その前に、CSS の基本的な概念を理解する必要があります。
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9c\/2609629-13.jpg\/v4-460px-2609629-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9c\/2609629-13.jpg\/v4-728px-2609629-13.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2基本的な構文を理解します。グラデーション効果を作成するときは、開始点または角度と、グラデーションの遷移先の色の 2 つのパラメータを設定する必要があります。グラデーションに複数の色を選択し、グラデーションの方向や角度を設定できます。 [4] 

    背景:線形グラデーション(方向または角度、色1 、色2 、色3など)。

  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e3\/2609629-14.jpg\/v4-460px-2609629-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e3\/2609629-14.jpg\/v4-728px-2609629-14.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3垂直グラデーションを実装します。方向を指定しない場合は、上から下に向かって色がフェードします。ブラウザによってグラデーションの実装が若干異なるため、複数のバージョンのコードをカバーする必要があります。 

    <! DOCTYPE html >
<html>​​
<ヘッド>
<スタイル>
html {
    最小高さ: 100 % ; 
    /*グラデーション効果がページ全体を埋め尽くし、途切れないようにするには、このパラメータを設定する必要があります*/
}

体{
    /* Chrome 10 以上、Safari 5.1 以上 */
    背景: -webkit-線形グラデーション( #93B874 , #C9DCB9 ); 
    /* Opera 11.1+ */
    背景: -o-線形グラデーション( #93B874 , #C9DCB9 ); 
    /* Firefox 3.6以降 */
    背景: -moz-線形グラデーション( #93B874 , #C9DCB9 ); 
    /* 標準構文 (最後に置く必要があります) */
    背景:線形グラデーション( #93B874 , #C9DCB9 ); 
    /*グラデーション効果の読み込みに失敗しても背景が空白にならないように、背景色を設定するのが最善です*/
    背景色: #93B874 ; 
}
</スタイル>
</ヘッド>
<本文>
</本文>
</html>​​

  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/01\/2609629-15.jpg\/v4-460px-2609629-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/2609629-15.jpg\/v4-728px-2609629-15.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4方向グラデーションを実装します。グラデーションの方向を追加することで、色のフェード方法を変更できます。ブラウザによって方向の解釈が異なることに注意してください。次の例では、異なるブラウザで同じグラデーション効果が生成されます。 [5] 

    <! DOCTYPE html >
<html>​​
<ヘッド>
<スタイル>
html {
    最小高さ: 100 % ;
}

体{
    /* 左から右へ */
    背景: -webkit- linear-gradient (左、 #93B874 、 #C9DCB9 );
     /* 右端で終了 */
    背景: -o-線形グラデーション(右、 #93B874 、 #C9DCB9 );
     /* 右端で終了 */
    背景: -moz- linear-gradient (右、 #93B874 、 #C9DCB9 );
     /* 右 */
    背景:線形グラデーション(右へ、 #93B874 、 #C9DCB9 );
     /* グラデーション効果の読み込みに失敗しても背景が空白にならないように、背景色を設定するのが最適です*/
    背景色: #93B874 ;
}
</スタイル>
</ヘッド>
<本文>
</本文>
</html>​​

  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/2609629-16.jpg\/v4-460px-2609629-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/2609629-16.jpg\/v4-728px-2609629-16.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5他のプロパティを使用してグラデーション効果を調整します。より複雑なグラデーション効果を作成することもできます。
    • たとえば、2 色以上を追加するだけでなく、各色の後にパーセンテージを追加して、各色間の間隔を設定することもできます。背景:線形グラデーション( # 93B874 10 %、 # C9DCB9 70 %、 # 000000 90 %);

    • 色に透明度を追加します。これにより、色が徐々に薄くなります。同じ色を単色から完全に透明にします。 rgba()関数を使用して色を定義する必要があります。最後の値は透明度を表し、 0は完全に不透明、 1 は完全に透明です。背景: linear-gradient (右へ、 rgba ( 147 、 184 、 116 、 0 )、 rgba ( 147 、 184 、 116 、 1 ) )

    広告する
方法 4方法4/4:

背景色を自動的に変更するように設定する

  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/2609629-17.jpg\/v4-460px-2609629-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/2609629-17.jpg\/v4-728px-2609629-17.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 HTML でエンコードされた<style>セクションを見つけます。単色の背景が気に入らない場合は、この自動変更カラー背景をお試しください。 HTML5 以降では、背景色は CSS (Cascading Style Sheets) を使用して定義する必要があります。 CSS を使用して背景色を設定したことがない場合は、この方法を試す前に「単色の背景」を参照してください。
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/2609629-18.jpg\/v4-460px-2609629-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/2609629-18.jpg\/v4-728px-2609629-18.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 「body」要素にアニメーション属性を追加します。ブラウザによって使用するエンコーディングが異なるため、2 つの異なる属性を追加する必要があります。 [6] 

    <! DOCTYPE html >
<html>​​
<ヘッド>
<スタイル>
体{
    -webkit-アニメーション:カラー変更60秒無限; 
    アニメーション：カラーチェンジ60秒無限;
    }
</スタイル>
</ヘッド>
<本文>
</本文>
</html>​​

    • -webkit-animationプロパティは、Chrome、Opera、Safari などの Chromium ベースのブラウザで使用されます。アニメーションプロパティは、他のブラウザの標準構文です。
    • colorchange はこの例のアニメーション効果です。
    • 60s はアニメーション効果またはトランジションの継続時間で、60 秒です。 Webkit と標準構文の両方で期間を設定する必要があります。
    • 無限とは、アニメーション効果が永久に繰り返されることを意味します。色を一度循環させて最後の色で停止させるだけの場合は、このセクションをスキップしてください。
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/24\/2609629-19.jpg\/v4-460px-2609629-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/24\/2609629-19.jpg\/v4-728px-2609629-19.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3アニメーション属性に色を追加します。ここで、@keyframes ルールを使用して、背景色の循環と各色が表示される時間を設定します。ブラウザによって使用するエンコーディングが異なるため、2 セットのエンコーディングを入力する必要があります。 [7] 

    <! DOCTYPE html >
<html>​​
<ヘッド>
<スタイル>

体{
    -webkit-アニメーション:カラー変更60秒無限; 
    アニメーション：カラーチェンジ60秒無限;
}


@ -webkit-keyframes色の変更{

     0 % {背景: #33FFF3 ;}
    25 % {背景: #78281F ;}
    50 % {背景: #117A65 ;}
    75 % {背景: #DC7633 ;}
    100 % {背景: #9B59B6 ;}
}


@keyframes色の変更{
     0 % {背景: #33FFF3 ;}
    25 % {背景: #78281F ;}
    50 % {背景: #117A65 ;}
    75 % {背景: #DC7633 ;}
    100 % {背景: #9B59B6 ;}
}   

</スタイル>
</ヘッド>
<本文>
</本文>
</html>​​

    • @-webkit-keyframes ルールと@keyframesルールの両方で背景色とパーセンテージが同じであることに注意してください。どのブラウザを使用して Web ページを開いても同じブラウジング エクスペリエンスが得られるように、すべてのパラメータが一貫していることを確認する必要があります。
    • 0%や25%などのパーセンテージは、 60 秒のアニメーションの合計継続時間の割合を示します。ページが読み込まれると、背景色は0%に設定した#33FFF3になります。アニメーションが 60 秒の 25% を経過すると、背景が#78281Fに変わります。
    • 時間と色を変更して、希望する効果を得ることができます。
    広告する

<<:  彼女が他の人を好きかどうか見分ける方法

>>:  靴の臭いを防ぐ方法

推薦する

ヒップのサイズを大きくする方法

今日のほとんどの文化では痩せることや体重を減らすことが称賛されているので、体重を増やしたい人にとって...

関係を始める方法

長続きする関係は人生で最も満足できる側面の 1 つであり、私たちに成長する機会と、他の人と私たちの旅...

クレジットカードでドアを開ける方法

映画ではいつもこのシーンを目にします。賢い主人公が悪者の家を捜索したいので、カードを取り出し、ドアの...

フェイクファーのお手入れ方法

フェイクファーはフェイクファーとも呼ばれ、さまざまな種類の衣類、室内装飾品、その他の家庭用品に使用さ...

独自のコンピュータゲームを作る方法

コンピュータ ゲームの設計は簡単な作業ではありませんが、実行しないわけにはいかないほど素晴らしいアイ...

鶏の群れを管理する方法

放し飼いの鶏を飼育したことがある人なら、これらの動物が短期間で庭にどれほどの被害を与えることができる...

高校生活を乗り切る方法

高校の初日には、3年間（英国では5年間）勉強するどころか、生きていくこともできないと感じるかもしれま...

Excel グラフに別の Y 軸を追加する方法

Excel テーブルのグラフに別のデータ ラインを追加できれば便利です。しかし、データ単位が異なる場...

衣服についた赤ワインのシミを落とす方法

赤ワインはパーティーやディナーには欠かせない飲み物であり、特別な機会や家でくつろぐときによく飲まれま...

Excel でマクロを使用する方法

場合によっては、スプレッドシートで何らかのルールやパターンに基づいて繰り返しバッチ処理を実行する必要...

壁が耐荷重性があるかどうかを判断する方法

家を建てるときには、耐力壁と非耐力壁の両方を建設する必要があります。おそらく、2 種類の壁の違いは想...

アボカドの栽培方法

アボカドは滑らかな食感で栄養が豊富で、ワカモレの主材料です。果肉を食べた後の残りの種はアボカドの木に...

顔文字の入力方法

絵文字は、感情を表現したり、テキストにさまざまなトーンを追加したりするのに楽しく簡単に使用できます。...

コンピューターからAndroidデバイスにアクセスする方法

このwikiHowでは、WindowsコンピューターからAndroidデバイス上のファイルにアクセス...

キノコの調理方法

食用キノコにはさまざまな形や大きさがあり、さまざまな方法で調理できます。キノコは、そのままでもおいし...