column

ITコラム

Search box Web Online Browsing Searching Concept

プログラミングノウハウ

2016.11.30

HTML 【 背景 】~backgroundの設定

Webサイトは、その中に書かれていた内容よりも、ページ全体のイメージが記憶に残ることがよくあります。
このようなイメージを形作るのに重要となるのがページ全体の背景だと思います。
そこで今回は、CSSを使ってWebサイトの背景を設定する方法を紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1.サイトの背景に色を付けてみよう

1.1 背景全体に色を付ける

サイトの背景全体に色を付けるには、CSSで に色指定をします。

body {
background: #4B088A;
}

CSSのプロパティ「 background 」は背景色や背景画像に関する指定をします。

色指定は16進法のカラーコードで指定します。上の「#4B088A」は紫です。

※「16進法のカラーコード」など、色指定については、HTML 【 色指定 】 ~ colorの指定方法を参照して下さい。

設定前後の変化をブラウザで確認すると、次のようになります。
 
[設定前]
HTML 背景 backgroundの設定 プログラマカレッジ
 
[設定後]
HTML 背景 backgroundの設定 プログラマカレッジ

▲目次へ戻る

 

1.2 本文の背景

上のように、紫のような濃い色で背景を設定すると、文字が読みにくいですね。

そういう時は、文字色を変える方法もありますが、ここでは、本文背景だけを白にしてみましょう。

まず、div要素で、背景が白となる本文の範囲指定をします。

<body>
<div id="container">
  (ここに本文が入ります)
</div>
</body>

div要素にidを付けることが大事です。

ここでは、「 container 」というidにしました。

次に、CSSで、この「 container 」というidのdiv要素の背景を白に指定します。

#container {
width: 600px;
margin: 0px auto;
padding: 30px;
background: #FFF;
}

ブラウザで表示を確認すると、次のようになります。
HTML 背景 backgroundの設定 プログラマカレッジ
文字が読みやすくなりました。

▲目次へ戻る

 

1.3 header

HTML5より前は、div要素 に「 header 」などのid名をつけて、サイトのタイトルなどの設定をしていましたが、HTML5では、新しいhtml要素として <header> が加わりました。

そこで、header要素の背景色を設定してみましょう。

htmlファイルでは次のような書き方です。

<body>
<header>
<h1>ムーンパレス</h1>
</header>
<div id="container">
  (ここに本文が入ります)
</div>
</body>

次に、CSSでheader要素の設定をします。

ついでに、header内にあるh1要素も指定しました。

header {
padding: 30px;
background: #333;
color: #FFF;
}
h1 {
font-weight: bold;
font-size: 240%;
}

ブラウザで表示を確認してみましょう。
HTML 背景 backgroundの設定 プログラマカレッジ
header要素の背景色は、#333( 濃いグレー )にしました。それに伴って、headerのテキストの色は#FFF( 白 )にしています。

「 padding 」は、内側の余白のことです。「 padding: 30px; 」と書くことで、header内( 濃いグレーの部分 )の、外枠から文字まで30px空くように余白が指定されます。

また、h1要素で指定した「 font-weight 」は、文字の太さのことです。100から900まで9段階の数値で指定することもできますが、通常は、「 normal( 標準の太さ ) 」、「 bold( 一般的な太字の太さ )」、「 lighter( 相対的に一段階細くする )」、「 bolder( 相対的に一段階太くする )」で指定します。

▲目次へ戻る

 

1.4 footer

<header> と同じように、<footer> もHTML5で新しい要素として加わりました。

こちらも、以前はdiv要素に「 footer 」などのid名を付けて書いていました。

「Copyright © HTML入門 All Rights Reserved.」のようなコピーライト( 著作権関係の表示 )やサイトのURL等を書きます。

footerですが、ページの一番下に入れなくても使えることは使えます。

htmlファイルでは、次のように書きます。

<body>
<header>
</header>
<div id="container">
</div>
<footer>
Copyright © HTML入門 All Rights Reserved.
</footer>
</body>

この位置にfooter要素を書くと、さきほどのheader要素と同じように、ページの左右いっぱいの幅になります。
もし<div id=”container”> ~ </div> の中にfooter要素を書くと、<div id=”container”> の幅になります。
次に、CSSで下のようにfooter要素の設定をします。

footer {
font: bold 80%/1em Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
padding: 10px;
background: #000;
}

footer要素の背景色は#000( 黒 )にして、文字色は#FFF( 白 )にしました。

また、文字が読みやすく表示されるように、フォントの内容も指定しました。

ブラウザで表示を確認すると、下のようにfooterが表示されます。
HTML 背景 backgroundの設定 プログラマカレッジ

▲目次へ戻る

 

1.5 HTML5の新要素対応

IE8までは、<header> <footer> のようなHTML5の新要素に対応していません。

IE8以下への対応が必要な場合は、head内に次のJavaScripを書けばOKです。

<head>
<!--[if lt IE 9]>
<script   
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>

JavaScripについては、ここで理解する必要はありませんが、「 もしIE9未満だったら、HTML5の新要素対応のためのファイルを読み込んで下さい 」というような意味です。

▲目次へ戻る

 

2.サイトの背景に画像を表示させよう

2.1 backgroundプロパティ

今度は、CSSを使って背景に画像を表示させてみましょう。

背景画像を指定するCSSプロパティは、厳密には「 background-image 」です。

背景画像の繰り返し方法を指定するプロパティは「 background-repeat 」、背景画像の位置は「 background-position 」、背景色を指定するのはさきほど使った「 background-color 」です。

「 background 」は、「 ショートハンドプロパティ 」と言われるもので、これらの複数のプロパティの値をまとめて書くことができます。

ここでは、「 background 」だけで指定する方法で書いていきます。

▲目次へ戻る

 

2.2 画像の表示方法

サイトの背景に画像を表示する場合、画像をどう表示するかの種類があります。

ここでは、次のような画像の貼り方のバリエーションをやってみます。

●リピート無しで貼る(画像の位置を縦(Y)と横(X)の値で指定します)
●縦(Y)方向にリピート
●横(X)方向にリピート
●全方向(縦(Y)と横(X))にリピート

▲目次へ戻る

 

2.3 backgroundに色指定も

body要素に背景画像を指定すると同時に、背景色も指定します。
例えば「 リピート無し 」の場合、画像が貼られた部分以外の背景色を指定しておかないと、 そこだけブラウザのデフォルト色となって変な印象になります。
画像の色に合わせて指定しておく必要があります。
背景に使う画像は、サイトの背景になじむ物を選ぶと良いと思います。

▲目次へ戻る

 

2.4 リピート無し

では、最初はリピート無しで貼ってみましょう。

画像を用意します。適当な画像が無い場合は、フリー素材などで検索して、画像をダウンロードしてみて下さい。

ここでは、下のような画像( 縦600px、横300px )を、imgフォルダに「 norepeat.jpg 」として保存しました。
HTML 背景 backgroundの設定 プログラマカレッジ
リピート無しで画像を貼るには、CSSで「 no-repeat 」と書いて、配置位置のX(横位置)、Y(縦位置)も書きます。

body {
width:100%;
margin:0;
padding:0;
color:#666;
font-family:Arial, sans-serif;
line-height: 18px;
background: #EDE8EA url(../img/norepeat.jpg) no-repeat right top;
}

この書き方はCSSの「 ショートハンド 」と言います。

backgroundプロパティに対しての値を、まとめて設定する方法です。

上( 青字部分 )の場合、値は先頭から順番に
background-color
background-image( url )
background-repeat
background-position
を、半角スペースを間に入れながら書いています。

そして、その内容は、
背景色は#EDE8EA、
画像は . . /img/norepeat.jpg、
リピート無し、
X軸は右にY軸は上にセット、
と書いています。

画像の位置指定の値は「top、bottom、right、left」または「ピクセル( px )」で指定します。

ブラウザのデフォルトは左上(「left top」または「0px 0px」)です。

ですので、左上から貼る場合は、この位置指定は省略してOKです。

ここでは、右上を基準に貼りたいので、「 right top 」と位置指定します。

ブラウザで表示を確認してみましょう。
HTML 背景 backgroundの設定 プログラマカレッジ
このように表示されました。

▲目次へ戻る

 

2.5 縦( Y )方向にリピート

縦( Y )方向にリピートで貼ってみましょう。

横長の画像を用意します。

ここでは、下のような画像( 縦100px、横1100px )を、imgフォルダに「 repeaty.jpg 」として保存しました。
HTML 背景 backgroundの設定 プログラマカレッジ
そして、CSSで「 repeat-y 」と書き、開始位置も指定します。

background: #E6EE8A url(../img/repeaty.jpg) repeat-y center top;

ここでは上のように「 center top 」と書きました。

これは「 左右中央の位置で上から 」Y方向にリピートするように指示しています。

もしも「 左上(left top)」から縦( Y )方向にリピートする場合は、ブラウザのデフォルトが「 左上 」なので 位置指定は省略してOKです。

ブラウザで表示を確認してみましょう。
HTML 背景 backgroundの設定 プログラマカレッジ
このように表示されました。

▲目次へ戻る

 

2.6 横( X )方向にリピート

次は、横( X )方向にリピートで貼ってみましょう。

縦長の画像を用意します。

ここでは、下のような画像( 縦600px 、横20px )を、imgフォルダに「 repeatx.jpg 」として保存しました。
HTML 背景 backgroundの設定 プログラマカレッジ
そして、CSSで「 repeat-x 」と書き、開始位置も指定します。

background: #E6EE8A url(../img/repeatx.jpg) repeat-x

ここでは、開始位置は省略しています。

「 左上 」からリピートを開始したいのですが、ブラウザのデフォルトで、リピートは「 左上 」から始めるので、この場合は書かなくてOKだからです。
ウィンドウの上から離れた位置から開始したい時は、位置指定をしましょう。

ブラウザで表示を確認してみましょう。
HTML 背景 backgroundの設定 プログラマカレッジ
このように表示されました。

▲目次へ戻る

 

2.7 全( XY )方向にリピート

XY方向にリピートする画像は、上下左右にタイリング( タイルのようにつながる )されてもおかしくないように、考えて作成する必要があります。

ここでは、下のような画像( 縦20px、横20px )を、imgフォルダに「 repeatxy.jpg 」として保存しました。
HTML 背景 backgroundの設定 プログラマカレッジ
全( XY )方向にリピートするには、CSSで「 repeat 」と書きます。

XY全方向にタイルのように貼るので位置指定は不要です。

また、目には見えないので背景色の指定も不要です。

よって、設定は「 background-image( url )」と「 background-repeat 」のみになります。

background: url(../img/repeatxy.jpg) repeat;

ブラウザで表示を確認してみましょう。
HTML 背景 backgroundの設定 プログラマカレッジ
このように表示されました。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ