ウェブサイトに背景画像を追加する：ステップ・バイ・ステップ

ページ名：ウェブサイトに背景画像を追加する_ステップ_バイ_ステップ

ウェブサイトに背景画像を追加する最良の方法を知りたいですか？ページの背景に画像を追加する方法は、ウェブサイトの他の領域に画像を挿入する方法とは少し異なります。プレーンなHTMLコードを使う代わりに、CSS（カスケーディング・スタイル・シート）を使う必要があります。幸いなことに、ウェブサイトに背景画像を設定するのは簡単です。このWikiHowでは、HTMLとCSSを使ってウェブページの背景を設定する方法を、簡単な例を使って説明します。また、背景画像のサイズ変更や位置合わせなど、より高度なヒントもご紹介します。

知っておくべきこと

  • 背景画像を設定するには、CSSプロパティ background-image: url("my_background.png"); を使用します。
  • my_background.png "の代わりに、完全なURLでもウェブサーバー上の相対パスでも、画像の場所を使用してください。
  • background-repeat: norepeat;」と「background-size: cover;」のプロパティを使用して、背景画像がページを覆うようにします。

ウェブページの背景を設定する

  1. HTML文書を開きます。HTMLファイルを編集するには、Notepad++やTextEditなどのテキストエディタを使用できます。
    • まだウェブページを作成していない場合は、.NETのガイドをご覧ください。
    • お好みであれば、HTML文書とは別のファイルにCSSコードを追加することもできます。この場合、CSSコード用のstyles.cssファイルを作成し、<link>タグを使ってHTMLドキュメントにリンクします。このガイドでは、CSSをHTMLファイルに直接追加することに焦点を当てますが、スタイル・シートを別に作成する方法については、こちらをご覧ください。
  2. HTML文書の先頭に<style>と入力します。これはカスケーディング・スタイル・シート（CSS）の開始タグで、<head>タグと</head>タグの間に記述します。
    • あるいは、別のCSSドキュメントにCSSを作成し、それをHTMLドキュメントにリンクすることもできます。
  3. 次の行にbody {と入力します。これは、HMTLドキュメントのボディをスタイルするCSSコードの冒頭部分です。
  4. 背景画像を設定するコードを入力します。 background-image: url("filename.jpg");.filename.jpgは、使用したい背景画像のパスに置き換えてください。
    • 背景画像がHTMLファイルと同じフォルダにある場合は、画像のファイル名だけでかまいません。例えば、background-image: url("my_background.png");とします。
    • 画像がウェブ上にあり、HTMLファイルと同じフォルダにない場合は、画像へのパスを指定する必要があります。これは画像の完全なURLでも構いません。例えば、background-image: url("https://www.wikihow.com/images/my_background.png"); のように指定します。
    • また、ウェブサーバー上の画像へのパスを使用することもできます。例えば、HTMLファイル www.wikihow.com/mypage.html を編集していて、背景画像が www.wikihow.com/images/my_background.png にある場合、background-image: url("/images/my_background.png"); を使って背景を設定することができます。
  5. 背景が繰り返されるか、1つの画像のままかを選択します。デフォルトでは、背景画像がページより小さい場合、自動的に繰り返されます。背景画像を一度だけ表示させたい場合は、次の行に background-repeat: no-repeat; と入力してください。
    • 小さな画像を壁紙のように並べたい場合など、背景を繰り返し表示させたい場合は、no-repeatを他のオプションで置き換えることができます：
      • background-repeat: repeat;：伝統的な壁紙効果のように、画像を水平方向と垂直方向に繰り返します。
      • background-repeat: repeat-x;：画像を水平方向に繰り返します。
      • background-repeat: repeat-y;: 画像を水平方向に繰り返します：画像を縦方向に繰り返します。
      • background-repeat: space repeat;：ページの左右を縦に、中央を空けるように画像を繰り返します。
      • background-repeat: space;：ページの四隅に画像を配置します。
  6. 背景がページ全体を覆うようにします。background-repeat: no-repeat;を使って背景を繰り返さないことにした場合は、背景画像がフレームより小さくてもページ全体を覆うようにします。そうしないと、背景画像の端にページの一部が見えてしまいます。これを行うには、次の行に次のコードを入力または貼り付けます： background-size: cover;.
  7. スクロール時の背景の動作を選択します。ユーザーがページをスクロールするときに背景を固定したい場合は、次の行の background-attachment: fixed; というコードを使って、背景画像をビューポートに固定することができます。
    • また、段落や画像など他のHTML要素と一緒に背景もスクロールさせたい場合は、background-attachment: local;を使用します。
  8. CSSの「Body」セクションの最後に「}」と入力します。など、本文に影響する他のCSSコードを含めたい場合は、今すぐそれらを含めてください。そして、CSSの最後の行の下に「}」と入力して、bodyセクションを閉じます。
  9. CSSの最後に</style>と入力します。この行を</head>タグの前に追加します。このタグでCSSを閉じます。
  10. HTMLファイルを保存します。すべての作業が終わったら、「ファイル」、「保存」の順にクリックして保存します。HTML文書全体はこのようになるはずです：
      <!DOCTYPE html> <html> <head> <title>ページタイトル</title> <style> body { background-image: url("/images/my_background.png"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } </style> </head> <body> </body> </html>

背景のトリックと例

  1. 任意のHTMLタグに背景画像を追加する。背景画像は、段落やヘッダーなど、どんなHTML要素にも設定できます。この例では、<p>タグに背景画像を設定し、段落タグ内のすべてのコンテンツが背景画像を継承するようにします。CSSファイル、またはHTML文書の<style></style>セクションに、背景画像を設定したい要素に新しいCSSセレクタを追加します。この例では、段落の中央、text: <p>タグの後ろに小さな背景画像を追加します：
    <head> <style> p { background-image: url("/images/my_background.png"); background-position: left; }. </style> </head>
  2. 背景画像のサイズを変更するには、background-sizeプロパティを使用します。CSSを使って背景のサイズを変更するには、coverまたはcontainというキーワードを使う方法、widthの値だけを指定する方法、widthとheightの値を一緒に指定する方法の3つの方法があります。
    • background-size: cover; 画像を伸ばしたり縮めたりすることなく、コンテナ全体を覆うように背景画像を拡大縮小します。コンテナはウェブページ全体でも他の要素でもかまいません。ウェブページ全体の背景画像を設定する場合によく使われます。
    • background-size: contain;：このオプションは、背景画像が使用するコンテナよりはるかに大きい場合に便利です。画像が小さい場合はタイル状になります。
    • background-size: background-size: 150px 200px;：このオプションは、背景画像を幅150px、高さ200pxにします。最初のサイズは幅で、2番目のサイズは高さです。ただし、長さは任意です。幅だけを入力すると、高さは伸縮や反りなしで自動的に拡大縮小されます。
      • 長さと幅をパーセントで指定することもできます。
  3. 背景を整列させるには、background-positionプロパティを使用します。このプロパティは、背景画像をコンテナ（ページ（bodyタグで使用されている場合）またはその他のコンテナ）に対して相対的に配置するのに役立ちます。background-positionには2つの値を指定できます。垂直方向の値を指定しない場合、デフォルトは常に50%になります。 いくつかの例を示します：
    • background-position: center;：背景画像を中央に配置します。
    • background-position: top;：要素の上部に配置します。
    • background-position: bottom;：要素の下部に配置します。
    • background-position: left;： 要素の左側に揃えます。
    • background-position: right;：要素の右側に配置します。
    • background-position: right top;：要素の右側と上側に配置します。
    • background-position: center bottom;：要素の中央と下部に配置します。
    • background-position: top 20px right 10px;：20pxのオフセットで上部に、10pxのオフセットで右側に配置します。ピクセルをパーセントで指定することもできます。
    • background-position: 20% 60%;：背景を左から水平方向に20％、上から垂直方向に60％の位置に配置します。
  4. 背景色を設定します。ページに背景画像を追加する場合でも、背景色を設定することをお勧めします。背景画像が読み込まれない場合、ユーザーにはあなたが選択した背景色が表示されます。そのためには、background-color：#FF33F0をお好みの.NETファイルで置き換えてください。
この記事は、" ウェブサイトに背景画像を追加する： この記事は、CC BY-NC-SAの下で公開された "Add Background Image to the Website: Step-by-Step Tutorial "を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。

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

コメント

返信元（返信をやめる）

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

NG表示方式

NGID一覧