[13-2] サイトの背景に画像を表示しよう(CSS使用)

前回はサイトの背景に CSSを使って色を指定しました。
今回は応用バージョン。CSSを使って、背景に画像を指定してみましょう。

使用する要素
(HTML5)
<body> 〜 </body>
使用する
CSSプロパティ
background

★メモ★
背景画像を指定するCSSプロパティは、厳密には「background-image」です。
背景画像の繰り返しかたを指定するプロパティは「background-repeat」、背景画像の位置は「background-position」、背景色を指定するのは前回もやった「background-color」です。
「background」は「ショートハンドプロパティ」と言われるもので、これらの複数のプロパティの値をまとめて記述することができます。

この記事は、ショートハンドプロパティ background だけで指定する方法で書いています。

「background-image」やbackgroundのショートハンドについては、
【15-1】background関連のプロパティ(1/4)をご覧ください。

サンプルファイルのダウンロードはこちら

★サンプルをこちらからダウンロードできます。
→本日のサンプル(sample13-2set.zip (62k))をダウンロード

本日の課題

<body>要素の「background」に画像を表示するには、画像をどう表示するかの種類があります。
●リピート無しで貼る(画像の位置を縦(Y)と横(X)の値で指定します)
●縦(Y)方向にリピート
●横(X)方向にリピート
●全方向(縦(Y)と横(X))にリピート

本日は下図のような画像の貼り方のバリエーションをやってみましょう。

本日の課題

backgroundに色指定も同時にします

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

ということは、
背景に使う画像は、サイトの背景になじむように考えて作っておく必要があります。
背景色も指定します
↑画像をクリックすると拡大します(別ウィンドウで開く)

リピート無しは「no-repeat」(sample13-2_1)

では、最初はリピート無しで貼ってみましょう。
リピート無しで画像を貼るには、CSSで「no-repeat」と記述し、
配置位置のX(横位置)、Y(縦位置)も書きます。
下のソースの8行目が、このサンプルの「背景(background)」に関する記述です。

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

この書き方はCSSの「ショートハンド」と言います。
backgroundプロパティに対しての値を、まとめて記述する方法です。
上記(赤字部分)の場合、値は先頭から順番に
background-color
background-image(url)
background-repeat
background-position
を、半角スペースを間に入れながら記述しています。

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

★「 . . / 」とは…「ほんっとにはじめてのHTML-[10] 絶対URL と 相対URL」をご覧ください。

画像の位置指定の値は「top、bottom、right、left」または「ピクセル(○px)」で指定します。
ブラウザのデフォルトは左上(「left top」または「0px 0px」)です。
ですので、左上から貼る場合は、この位置指定は省略してOKです。

今回のように右上を基準に貼りたい場合は「right top」と位置指定しますよ。
上のソースでこのように、画像が右上に配置されました。
honttoni13-2_1.html
↑画像をクリックすると実際のHTMLファイルを開きます(別ウィンドウで開く)

左上に配置するには下記のソースでOK。background-positionを省略しています。

background: #EDE8EA url(../img/tile_1p_g2.gif) no-repeat;

このソースで画像が左上に配置されます。
honttoni13-2_1left.html
↑画像をクリックすると実際のHTMLファイルを開きます(別ウィンドウで開く)


マイナスの値も指定できます(sample13-2_2)

リピート無しで画像を貼る場合に知っておきたいこと、
XおよびY方向は、プラスだけでなく、マイナスの方向も指定が可能です。
マイナスの位置で配置
↑画像をクリックすると拡大します(別ウィンドウで開く)

このサンプルでは、タイトルが読みやすいように、画像の位置をウィンドウより上に調整しました。
ソースはこちら↓。Y軸の値をマイナスにしてるだけです。

background: #060405 url(../img/tile_1p_j.jpg) no-repeat right -30px;

上のソースでこのように画像が配置されました。
honttoni13-2_2j.html
↑画像をクリックすると実際のHTMLファイルを開きます(別ウィンドウで開く)
(実サイズの配置画像も確認できます)

サンプルのCSSファイルを書き換えて(Xの位置指定もマイナスにするなど)実験してみてください。

縦(Y)方向にリピートは「repeat-y」(sample13-2_3)

縦(Y)方向にリピートで貼ってみましょう。
配置する画像はこれ↓(実サイズは1100px×20px)
Y方向にリピートする画像

CSSで「repeat-y」と書き、開始位置も指定します。下のサンプルでは「center top」と記述。
これは「左右中央の位置で上から」Y方向にリピートするように指示しています。

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

上のソースで このように画像が配置されました。
honttoni13-2_3ytile.html
↑画像をクリックすると実際のHTMLファイルを開きます(別ウィンドウで開く)

このサンプルでは、画像をセンター合わせ(左右の中央)にしたかったので位置指定をしましたが、
「左上(left top)」から縦(Y)方向にリピートする場合は、ブラウザのデフォルトが「左上」なので 位置指定は省略してOKです。

横(X)方向にリピートは「repeat-x」(sample13-2_4)

配置する画像はこれ↓(実サイズは20px×600px)これを横(X)方向にリピートします。
X方向にリピートする画像

CSSで「repeat-x」と書き、開始位置も指定します。

ですが、ここでは開始位置は省略しています。
このサンプルは「左上」からリピートを開始したいのですが、
ブラウザのデフォルトで、リピートは「左上」から始めるので(書かなくてOK)。

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

上のソースでこのように画像が配置されました。
honttoni13-2_4xtile.html
↑画像をクリックすると実際のHTMLファイルを開きます(別ウィンドウで開く)

ウィンドウの上から離れた位置から開始したい時は、位置指定しましょう。
例えば、上から200ピクセルのところでX方向にリピートしたい場合は、
「repeat-x left 200px」と記述します。(サンプルで実験してみてください。)

全(XY)方向にリピートは「repeat」(sample13-2_5)

配置する画像はこれ↓(見やすいように拡大しています。実サイズは10px×10px)
XY全方向にリピートする画像
このように、XY方向にリピートする画像は、
上下左右にタイリングされてもつながるように、考えて作成する必要があります。

全(XY)方向にリピートするには、CSSで「repeat」と書きます。
位置指定は不要(XY全方向にタイルのように貼るので)。
そして、背景色の指定も不要(見えないですから)。
よって、ソースは下記のように background-image(url)とbackground-repeat のみになります。

background: url(../img/tile_xy.gif) repeat;

上のソースでこのように画像が配置されました。
honttoni13-2_5xy.html
↑画像をクリックすると実際のHTMLファイルを開きます(別ウィンドウで開く)

次回予告

いかがでしたか?
背景に画像を置くとイメージがグッと変わりますよね。

次回はグラデーションをサイト背景に指定してみましょう。
画像では絶対にできない「斜め方向」のグラデーションも、CSS3なら可能です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.