CSSで背景色を変更する方法

新進のフロントエンド開発者のキャリアの中で最もエキサイティングな瞬間の1つは、Webページの背景色を変更する方法を学ぶことです。

HTMLでの作業は素晴らしいことですが、CSSを数行使用するだけで、ページとプログラミングの旅を生き生きとさせることができます。

このガイドでは、CSSを使用して背景色を変更する方法について知っておく必要のあるすべてをカバーしています。

セットアップする

少し準備作業をノックアウトしましょう。

:HTMLとCSSを更新するときに、変更をリアルタイムで表示するには、 LiveServer拡張機能を備えたVisualStudioCodeを使用することをお勧めします。

  1. プロジェクトのファイル用のフォルダーを作成します。
  2. HTMLを格納するindex.htmlファイルを作成します。ボイラープレートコードを使用することも、 <html><head> 、および<body>タグを設定することもできます。
  3. CSS用のstyles.cssファイルを作成します
  4. <head>タグ内に< linkrel = "stylesheet" href = "styles.css">を配置して、CSSファイルをHTMLにリンクします。

これで、CSSの編集を開始する準備が整いました。

関連:ボイラープレートWebサイトを作成する方法

CSSで背景色を変更する方法

背景色を変更する最も簡単な方法は、 bodyタグをターゲットにすることです。次に、 background-colorプロパティを編集します。 Google Color Pickerブラウザ拡張機能を検索して使用すると、カラーコードを見つけることができます。

 body {
background-color: rgb(191, 214, 255);
}

このコードは、背景を素敵な水色に変更します。

background-colorプロパティは、6つの異なる形式の色を受け入れます。

  • 名前lightskyblue; (概算)
  • 16進コード#bfd6ff;
  • rgbrgb(191、214、255);
  • rgbargba(191、214、255、1);ここで、aはアルファ(不透明度)です。
  • HSLhsl(218°、100%、87%);
  • HSLAhsla(218°、100%、87%、1);ここで、aはアルファ(不透明度)です。

余分なコードをカットするには、 background-colorの代わりに省略形のbackgroundプロパティを使用します。このメソッドを使用して、HTML要素の背景色を変更できます。

<div>要素を作成し、それにクラスを指定します。この場合、クラスはpanelです。 CSSで高さ幅のプロパティを設定します。 CSSで要素を選択し、色を塗りつぶします。

 body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

ここでは、身体のbackgroundプロパティが独立し.panel backgroundプロパティのスタイル設定され見ることができます。

backgroundプロパティは、グラデーションも受け入れます。

 body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

パネルとcssグラデーションの背景 CSSで背景画像を変更する方法

背景を単色やグラデーションではなく画像にしたい場合はどうすればよいですか?略記の背景プロパティはおなじみの友達です。

画像がHTMLおよびCSSファイルと同じフォルダにあることを確認してください。それ以外の場合は、名前だけでなく、括弧内のファイルパスを使用する必要があります。

 body {
background: url(leaves-and-trees.jpg)
}

おっと!画像が拡大されすぎているようです。background-sizeプロパティで修正できます。

 body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

省略形のbackgroundプロパティをbackground-sizeプロパティcoverと組み合わせて使用​​するには、 background-positionプロパティも指定し、値を円記号で区切る必要があります。 左上などのデフォルトの位置値であっても。)

 body {
background: url(leaves-and-trees.jpg) top left / cover;
}

どうぞ! CSSの1行に適切なサイズの背景画像。

続きを読む: CSSで背景画像を設定する方法

:多くのストレージスペースを占める大きな背景画像を含めることには注意してください。これらは、ユーザーにページにとどまる理由を与えるために2秒すべてがあるモバイルでロードするのが難しい場合があります。

CSSボックスシャドウでCSSゲームをアップ

あなたのような開発者にとって、background-colorプロパティとbackground-imageプロパティは古いニュースです。幸いなことに、学ぶべき新しいことが常にあります。

CSSボックスシャドウでボックスを後押ししてみてください。あなたのHTML要素はかつてないほど良く見えました!