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に変わります。
    • 時間と色を変更して、希望する効果を得ることができます。
    広告する

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

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

推薦する

犬の寄生虫の種類を識別する方法

犬はさまざまな寄生虫、特に回虫、条虫、フィラリア、鉤虫、鞭虫に感染する可能性があります。寄生虫によっ...

deviantArt でアダルトコンテンツを表示する方法

deviantArt でアダルト コンテンツを表示するには、18 歳以上のアカウントにログインし、ア...

彼女の電話番号を聞く方法

好きな女の子に出会ったら、自然と彼女ともっと時間を過ごしたいと思い始めます。次回彼女に会えるかどうか...

Excel で非表示の列を表示する方法

ユーザーは、ワークシートの表示を簡潔にするため、または特定のデータが変更または削除されるのを防ぐため...

ボツリヌス中毒を予防する方法

ボツリヌス中毒は、ボツリヌス菌の毒素に汚染された食品を摂取したときに最もよく起こる深刻な病気です。食...

コーンブレッドの作り方

熱いコーンブレッドをかじるより美味しいものはありません。バターの香りと口の中でとろける食感のコーンブ...

要約の書き方

要約とは、記事の内容を最初から最後まで説明する、作品の長く詳細な要約です。小説、ノンフィクション、雑...

スウィングダンスのやり方

スウィングダンスは多くのダンスの総称であり、そのほとんどはシンプルな音楽に合わせて踊られます。このダ...

スエードの油汚れを落とす方法

スエードは、柔らかくて快適な質感と細かい木目が特徴です。この生地は一度汚れるとお手入れが難しいですが...

自分を清潔にする方法

自分がだらしがないと感じますか？エッジをきちんと整えていないとよく言われますか?それとも臭いと言うの...

Minecraftでマップを作成する方法

Minecraft のマルチプレイヤー ゲームやサバイバル モードでは、地図を手元に置いておくと、ゲ...

ブックマークを削除する方法

訪問した Web サイトをブックマークすると、将来アクセスして閲覧しやすくなり、再度訪問したいページ...

牛の描き方

それでは、棒人間の描き方を使って牛を描く方法を見てみましょう。 ステップ方法1方法1/4:漫画の牛を...

二日酔いを治す方法

夜にお酒を飲んだ後、翌朝ひどい頭痛と胃の痛みを感じて目が覚めることがよくあります。このとき、二度と飲...

ウェブページを保存する方法

Web ページを保存すると、オフラインでアクセスする場合や、後で変更または削除されることを心配せずに...