ウェブサイトに背景を追加する方法

ページ名：ウェブサイトに背景を追加する方法

背景はウェブサイトの最も重要な要素のひとつです。良い背景はウェブサイトのトーンを作り出し、コンテンツを引き立てます。背景を追加するにはさまざまな方法があり、それぞれ目的が異なります。ウェブサイト内のすべてのページに背景を適用できる方法もあれば、特定のページだけに背景を制限する方法もあります。この記事では、HTMLやCSSを使ってウェブサイトに背景を追加する方法を説明します。

方法1

HTMLの方法

無地の背景
  1. 無地の背景は、ウェブサイトに置くことができる背景の最も基本的なタイプです。実際、どのウェブサイトもデフォルトの白い背景から始まります。しかし、調和の取れた配色で使用する場合は、白の背景は非常にスマートでクリーンな外観になりますが、異なるテーマでは異なる色の背景が好まれる場合があります。
  2. ウェブ・コード（ソース）を開いてください。
  3. bodyタグにbgcolorという属性を追加します。これで、bodyタグは次のようになります。
    <body bgcolor="COLORNAME">ここで、COLORNAMEは色の名前です。COLORNAMEには様々な色の代表を入れることができる。
    • <body bgcolor="red">(色の名前)
    • <body bgcolor="#FF0000">(16進数値)
    • <body bgcolor="rgb(255,8,9)">(RGB値)
  4. RGBと#を使って実験すると、いろいろな色合いが出てくるが、簡単な最初の方法を取ることができる。ただし、"Ultramarine Bluish Green "のように珍しい色を入力すると白になることを覚えておいてください。
背景画像の追加
  • 背景画像を追加するのは、無地の背景よりも少し複雑です。
  1. bodyタグにbackgroundプロパティを追加します。
    <body background="SRC">
    ここで、SRCは画像のソースです。SRCは同じフォルダ内でも、別のフォルダやウェブページ内でもかまいません。
    • <body background="red.gif">(同じフォルダ内)
    • <body background="red.gif">(別フォルダ内)
    • <body background="imagepage1/red.gif">(別のウェブページ内)
  2. .gif/.jpeg/.bmpの拡張子を忘れずに入力してください。
方法2

CSSの方法

無地の背景
  1. CSSで無地の背景を追加するには、style属性を追加します。IDやクラスを指定し、外部スタイルシートと内部スタイルシートの両方を使用することもできます。
  2. bodyタグは次のようにします。
    • <body style="background-color: COLORNAME;"> のようにします。
      ここで、COLORNAMEは色の名前、16進数、またはRGBです（また、HTMLのベタ塗り背景の最後の手順を覚えておいてください。
画像の追加
  1. 画像を追加するには、bodyタグにstyle属性を追加します。IDやクラスを指定し、外部スタイルシートと内部スタイルシートの両方を使用することもできます。
  2. bodyタグは次のようになります。
    • <body style="background-image:url('SRC');">のようになります。
  3. SRCがソースであることを覚えておいてください。同じフォルダ、別のフォルダ、別のウェブ・ページのものでもかまいません。
    • <body style="background-image:red.gif;">(同じフォルダ内)
    • <body style="background-image:red.gif">(別フォルダ内)
    • <body style="background-image:imagepage1/red.gif">（別のウェブページ内）。
  4. .extensionsも忘れずにつけましょう。
繰り返しパターンの背景
  1. 繰り返しパターンの背景を作るには、上記のステップで述べたように背景を追加します。bodyタグを次のように変更してください。
    <body style="background-image: url('SRC'); background-repeat:REPEAT-SETTINGS;"> REPEAT-SETTINGSは設定です。次のように、多くのリピート設定が可能です。
    • <body style="background-image: red.gif; background-repeat: repeat;">(背景は縦にも横にも繰り返します)
    • <body style="background-image: red.gif; background-repeat: repeat-x;">(背景が水平に繰り返されます)
    • <body style="background-image: red.gif; background-repeat: repeat-y;">(背景は縦に繰り返します)
固定画像背景
  1. 固定画像の背景はクールで、スクロールしても変化しません。そのためには、上のセクションのコードにいくつかの簡単な修正を加えるだけです。bodyタグを次のようにします。
    • <body style="background-image:url('SRC'); background-attachment:fixed; background-position:POSITION; background-repeat:REPEAT SETTINGS;"> ここで、SRCは記事のソースです。
      ここで、SRCは背景画像のソース、POSITIONは画像の位置（中央から右上まで可能）、background-attachmentはこの背景タイプの主な「触媒」です。background-attachmentはこの背景タイプの主な "触媒 "であり、背景の位置を伝えるために使用され、変更しないことが推奨される。
この記事は、CC BY-NC-SAで公開されている「ウェブサイトに 背景を追加する方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。

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

コメント

返信元（返信をやめる）

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

NG表示方式

NGID一覧