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

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

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





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



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





セットアップする

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

xboxoneコントローラーを分解する方法

ノート ：使用をお勧めします VisualStudioコード とともに ライブサーバー拡張機能 HTMLとCSSを更新するときに変更をリアルタイムで表示します。



  1. プロジェクトのファイル用のフォルダーを作成します。
  2. を作成します index.html HTMLを格納するファイル。ボイラープレートコードを使用するか、いくつかを設定することができます 、 、 と タグ。
  3. を作成します styles.css CSSのファイル。
  4. 配置してCSSファイルをHTMLにリンクします の中に タグ。

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

関連している： ボイラープレートWebサイトを作成する方法



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

背景色を変更する最も簡単な方法は、 体 鬼ごっこ。次に、 背景色 財産。 Google Color Pickerブラウザ拡張機能を検索して使用すると、カラーコードを見つけることができます。

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

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



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

  • 名前 ： lightskyblue; （概算）
  • 16進コード ： ＃bfd6ff;
  • rgb ： rgb（191、214、255）;
  • rgba ： rgba（191、214、255、1）; どこ に アルファ（不透明度）です
  • HSL ： hsl（218°、100％、87％）;
  • HSLA ： hsla（218°、100％、87％、1）; どこ に アルファ（不透明度）です

速記を使用する バックグラウンド の代わりにプロパティ 背景色 余分なコードをカットします。このメソッドを使用して、HTML要素の背景色を変更できます。

を作成します 要素とそれにクラスを与えます—この場合、クラスは パネル 。そのを設定します 身長 と 幅 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プロパティは、グラデーションも受け入れます。

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

CSSで背景画像を変更する方法

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

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

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

おっと！画像がズームインしすぎているようです。これは、 背景サイズ 財産。

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

速記を使用するには バックグラウンド と組み合わせたプロパティ 背景サイズ 財産 カバー 、も指定する必要があります 背景位置 プロパティと値を円記号で区切ります （次のようなデフォルトの位置値であっても 左上 。）

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

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

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

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

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

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

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

共有 共有 つぶやき Eメール CSSボックスシャドウの使用方法：13の秘訣と例

当たり障りのない箱は退屈に見えます。 CSSボックスシャドウ効果でそれらを整えてください！

次を読む 関連トピック
  • プログラミング
  • ウェブ開発
  • ウェブデザイン
  • CSS
著者について マーカスミアーズIII（26件の記事が公開されました）

マーカスは、MUOの生涯にわたるテクノロジー愛好家でありライターエディターです。彼は2020年にフリーランスの執筆活動に着手し、トレンドのテクノロジー、ガジェット、アプリ、ソフトウェアをカバーしました。彼は大学でコンピューターサイエンスを学び、フロントエンドのWeb開発に重点を置いていました。

マーカスミアーズIIIのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください