Step.9 よく使うCSSを覚えよう

背景画像を指定してみよう。

今回はびっちりスタイルシートやるよー。画像を使ったスタイルシートもやるからお楽しみにね。

うっほい！！背景画像とかやれるってこと？

そういうこと。すごく期待させちゃったから、じゃあさっそく背景画像からやろうか？

やったーーーー!!!!ヘッダーがね、ずっとさびしいと思ってたんだよね！！！

ヘッダーはサイトの顔みたいなところあるしね。
しかし、画像は用意できてるの？

……。

全く、仕方のない子だなぁ。はい、これ使おうか。

透過加工してある1枚の画像だよ。名前を付けて保存してね。

ありがと！やっつけ臭がするけど嬉しいよ！

ロロ様が3分でやってくれました。ってね。
はて、では背景のスタイルシートの話をしようか。背景画像を貼るには background-image:url(ここに画像のURL); これだよ。実際にヘッダー部分に使ってみようか

[code language=”css” title=”CSS” highlight=”6-8,13″]
header,main,footer {
display:block;
width:1000px;
margin:0px auto;
}
h1,h2 {
margin:0px;
}
header {
background:#ffb0c6;
height:180px;
font-size:20px;
background-image:url(image/backimage.gif);
}
main {
background:#ffffff;
min-height:400px;
}
footer {
background:#ffb0c6;
height:50px;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
[/code]

ついでに見出しの margin 0にして、ヘッダーの太字設定消したよ！
さーて確認確認！うおっ！私の顔が大量に！

リピートしてるね。デフォルトだと横にも縦にもこうやってリピートされるよ。
このリピートを設定できるのが background-repeat だよ。
値は横方向のみリピートする repeat-x　縦方向のみリピートする repeat-y　リピートをしない no-repeat　とかあるよ。他にもあるけれどね。
今回は no-repeat にしてみよう。ソースはここからは header の分だけ出すね。

[code language=”css” title=”CSS” highlight=”6″]
header {
background:#ffb0c6;
height:180px;
font-size:20px;
background-image:url(image/backimage.gif);
background-repeat:no-repeat;
}
[/code]

おお。落ち着いた。画像が1個だけ表示されるようになったね。
でもこれさ、なんかなー画像右側にあった方がいい気がする。サイト名の文字が左上にあるしなぁ。

じゃあ画像の位置を変更してみよう。
background-position で好きな場所に背景画像を指定できるよ。
値は％でも指定できるし、左上を起点としてピクセルでも指定できるよ。他にも top bottom right left や center で中央も指定できるよ。

ん、右下に設定したかったら background-position:right bottom; とかできるの？

できるよ。 background-position:right 10px bottom 10px; とかもできるよ。右から10pxの位置、下から10pxの位置ね。

[code language=”css” title=”CSS” highlight=”7″]
header {
background:#ffb0c6;
height:180px;
font-size:20px;
background-image:url(image/backimage.gif);
background-repeat:no-repeat;
background-position:right 10px bottom 10px;
}
[/code]

おお！なんかいい感じの位置にきた！でもまだなんか物足りないんだけど？
なんかさ、斜線の背景画像とかあるじゃない？ああいうのにプラスして今の画像があればいいんじゃないの！
background-image を2つ使えばできるよね？

良い発想だね。ただ、メルちゃんが考えている方法だと上書きされちゃうからできないね。背景画像を2個使おうとする場合は書き方があるのよ

……ほう

やっつけで作ったからあんまり綺麗じゃないけど、ほい画像。

何色？これ。
私ピンクが好きなんだけどな。

白と灰色を若干透過させたものだよ。使ってみたらわかるよ。
で、まずは失敗例としてメルちゃんが思う通りに background-image でこの画像を付け足してごらん？

[code language=”css” title=”CSS” highlight=”8″]
header {
background:#ffb0c6;
height:180px;
font-size:20px;
background-image:url(image/backimage.gif);
background-repeat:no-repeat;
background-position:right 10px bottom 10px;
background-image:url(image/backimage2.png);
}
[/code]

ふぁっ？！
画像が書き換わっちゃったよ。

ってわけで、後側の画像に上書きされちゃうのね。
こんな書き方をしても同じだからね。

header { background-image:url(image/backimage.gif); }
header { background-image:url(image/backimage2.png); }

これもあとで書いた backimage2.png が上書きしちゃうから。
これをやりたい場合はカンマ(,)を使うよ。

[code language=”css” title=”CSS” highlight=”5″]
header {
background:#ffb0c6;
height:180px;
font-size:20px;
background-image:url(image/backimage.gif),url(image/backimage2.png);
background-repeat:no-repeat;
background-position:right 10px bottom 10px;
}
[/code]

ん？どこが変わった？1個分しか画像でてなくない？

よく見て。右下の方にこっそり灰色が見えるでしょ。

あ、ほんとだ。リピート無し設定とポジション設定が一緒だから重なって見づらかったのか。
これそれぞれ違うリピートとポジションの値できるの？

どちらも同じようにカンマで区切ることで出来るよ。

[code language=”css” title=”CSS” highlight=”6-7″]
header{
background:#ffb0c6;
height:180px;
font-size:20px;
background-image:url(image/backimage.gif),url(image/backimage2.png);
background-repeat:no-repeat,repeat;
background-position:right 10px bottom 10px,0px;
}
[/code]

おお。おおお！でもなんか色汚くない？

もうちょっと彩度の高い、濃いめの色を背景色にしたら灰色が目立たなくてよくなると思うよ。適当に変えて調整してね。カラーコード #ff4a74 くらいにしたらいいんじゃない？大分色が濃くはなっちゃうけどね。それが嫌なら自分で最初から色のついた画像素材用意してね。

ほう！なるほど、透過させてることで何色でもこの柄にできるのか。面白いー！

ちなみに画像だけれど、カンマの前側のほうが上に表示されるからね。前後逆にするとメルちゃんの絵とデザートの写真に縞模様入っちゃうからね。

[code language=”css” title=”CSS” highlight=”5-7″]
header{
background:#ff4a74;
height:180px;
font-size:20px;
background-image:url(image/backimage2.png),url(image/backimage.gif);
background-repeat:repeat,no-repeat;
background-position:0px,right 10px bottom 10px;
}
[/code]

あ、ほんとだ。へー。CSSって奥が深いなぁ。
しっかし、背景1つでかなりたくさんのCSS書くことになっちゃったね。

うん、だから背景のCSSはちょっと省略して書くことができるよ。それが background ね。色の指定のときにすでに使っているけど、半角スペースを区切ることで background-color background-image background-repeat background-position とかを一括指定できるよ。他にもbackground系あるけどここでは紹介しないよ。
ちなみに一括指定でもカンマを使うことで複数背景画像は変わらず使えるからね。ただその場合は必ず背景色は最後に来るようにしないといけないよ。

[code language=”css” title=”CSS” highlight=”4-7″]
header{
height:180px;
font-size:20px;
background:
url(image/backimage.gif) no-repeat right 10px bottom 10px,
url(image/backimage2.png) repeat,
#ff4a74;
}
[/code]

ちょっとだけスッキリした気がする！

背景はさらっとやったらこんなもんかな。
ちなみに、ちょっと前に教えた文字関連のCSSもbackgroundと同じように一括指定できるよ。気が向いたら調べてみてね。
さー次のいくよー

枠線を指定してみよう。

今度は枠線だよ。ボーダーって呼ばれてるね。要素に線を付けたりするよ。
線の色、太さ、線の種類、上下左右どの箇所に線を入れるかなどの指定ができるよ。
今回は見出しにボーダーを入れてみようか。

今のところ見出しはただ文字が大きいだけだもんね。

さらっと一気にプロパティと値出すよー。

border-width	線の太さを指定するよ。
border-color	線の色を指定するよ
border-style	線の種類を指定するよ

線の太さはピクセルで、線の色はカラーコードで値を指定すればいいけれど、線の種類は実際見せないとわからないね。

solid 普通の線だね。

dotted 点線だよ。

dashed 破線だよ。

double 二重線だよ。線を太めにしておかないと二重にならなかったりするよ。

線の種類は他にもあるけれどここではこれだけにしておくね。

おお、すごい一気に情報が出てきた……点線可愛いね！でも四方に線があるのはくどいなぁ。

上下左右のどれか一部だけに線を入れる、というのも可能だよ。

おっ、じゃあ上下だけに点線入れてみようかな。

あいよ。
ボーダーは背景と同じように一括指定が可能だよ。
borderで一気にできるから、まずはこれで線の太さと線の種類、色を指定してみて。

[code language=”css” title=”CSS” highlight=””]
h2 {
border:dotted 2px #dd5179;
}
[/code]

見本

こんな感じかな？うわ、やばいな可愛い。どんどんかわいくなってる！！！テンションあがってきたぁああ！！！

そりゃよかった。じゃ、こう書き換えてみて。

[code language=”css” title=”CSS” highlight=”3″]
h2 {
border:2px #dd5179;
border-style:dotted none;
}
[/code]

見本

none は線無しってことだよ。線の種類を2つ指定することで、上下を点線、左右を線無し、と指定しているよ。
margin や padding でやった時と同じ感覚だね。 3つ指定で上と左右と下、4つ指定で上下左右それぞれ好きなところに好きな線の種類を指定できるよ。
border-color も border-width も同じように上下左右それぞれこの方法で指定ができるよ。

ほうほう。ほんとだ。marginとかのときと同じだね。
ねえロロちゃん、やっぱり下側にだけ線入れたいんだけれど、その場合はborder-width を none none dotted にしたらいいんだよね？

それでもいいけれど、いっそ border-bottom を使ってしまえばいいかも。これもmarginとかと同じ感じね。

[code language=”css” title=”CSS” highlight=””]
h2 {
border-bottom:dotted 2px #dd5179;
}
[/code]

見本

おお！なるほど！ border-top で上側に、 border-left で左側に線を指定できるんだ？

そういうこと。
ボーダーは上手に使えばいろんなデザインが作れるから楽しいよ。
ただ、1つ気を付けないといけないところがあるよ。
border は padding と同じように width や height で指定した幅の数値に含まれないんだ。デフォルトではね。
そして、またまた一部ブラウザはボーダーのwidthやheightの値に含んだりするよ。

うっわ。またそれか

またこれだよ。まぁその一部ブラウザっていうのは IE6 のことなんだけどね。だいぶ古いブラウザだからそろそろ気にしなくて良いとは思うんだけれど、念のために覚えておくといいよ。
横幅を width:100px にして線の太さを border:solid 10px #000000; にした場合、ボーダーも含んだ横幅は 120px になっちゃうから気を付けてね。
ただし、IE6はボーダー含んで100pxになるよ。
padding と同様 box-sizing:border-box; を使うことによって border の値を width や height で指定した数値に含ませることができるよ。

うーん……頭の片隅に入れておく！

はいはい。

角を丸くする方法

あと、メルちゃんが喜びそうなのは、角を丸くするスタイルシートかな。

ほう？どんな感じ？

こんな感じ。

おお！よさそう！

border-radius で出来るよ。値はpxで数値で指定ね。これまた margin とかと同じように指定箇所が増えるごとにそれぞれ4つ角の丸まり具合を変更できるよ

border-radius:10px 30px 20px 40px;

border-radius:全角px;
border-radius:左上&右下px 右上&左下px;
border-radius:左上px 右上&左下px 右下px;
border-radius:左上px 右上px 右下px 左下px;

ほうほう。ヘッダーの上側とフッターの下側の左右両角を丸くして、なんかハンバーガーみたいにしようかな♪

いいんじゃない？でも現状ブラウザにぴったりくっついているから、多少余白入れないと角丸わかりづらいかもしれないけれどね。
ちなみに、画像も角を丸くできるんだよ。セレクタを img にしてやってごらん

ほう！

[code language=”css” title=”CSS” highlight=”16,25,42-44″]
header,main,footer {
display:block;
width:1000px;
margin:0px auto;
}
h1,h2 {
margin:0px;
}
header {
height:180px;
font-size:20px;
background:
url(image/backimage.gif) no-repeat right 10px bottom 10px,
url(image/backimage2.png) repeat,
#ff4a74;
border-radius:20px 20px 0px 0px;
}
main {
background:#ffffff;
min-height:400px;
}
footer {
background:#ffb0c6;
height:50px;
border-radius:0px 0px 20px 20px;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
h2 {
border-bottom:dotted 2px #dd5179;
}
img {
border-radius:20px;
}
[/code]

Sample

やだ！かわいい！！

やろうと思えば真ん丸にもできるし、楽しいよね。角丸かわいいし。

テキストや要素に影を付ける

次は要素やテキストに影を付けてみようか。要素につける影とテキストにつける影は違うプロパティになるよ

影までつけれるのか。ほんっとCSSって色々あるのねー

まずはテキストに影を付ける方法からね。
text-shadow 値がちょっとだけ複雑だね。
text-shadow:右方向へのずれpx 下方向へのずれpx ぼかし強度px 影の色;
カンマで区切ることで影を複数つけることも可能だよ。

text-shadow:2px 2px 0px #ff82c7;

text-shadow:1px 1px 1px #000000,-1px -1px 1px #000000;

見本見え辛っ！！

どっちの見本も太字に設定してるよ。色をしっかり指定したらこんな汚いことにはならない、かな？たぶん。

んーまぁ、サイトタイトルあたりに使ってみようかな？

じゃ、続けて要素に影を付ける方法ね。
box-shadow だよ。値は text-shadow と同じものに追加して inset という内側に影を付けるものがあるよ。

box-shadow:6px 6px 3px #888888;

box-shadow:6px 6px 3px #888888 inset;

立体感が出ていいよね。メルちゃんはヘッダーメインフッターの全部にうっすら影をかけてみたらどう？

[code language=”css” title=”CSS” highlight=”5,19″]
header,main,footer {
display:block;
width:1000px;
margin:0px auto;
box-shadow:5px 5px 10px #d4ccb4;
}
h1,h2 {
margin:0px;
}
header {
height:180px;
margin-top:10px;
font-size:20px;
background:
url(image/backimage.gif) no-repeat right 10px bottom 10px,
url(image/backimage2.png) repeat,
#ff4a74;
border-radius:20px 20px 0px 0px;
text-shadow:4px 4px 0px #ffffff;
}
main {
background:#ffffff;
min-height:400px;
}
footer {
height:50px;
margin-bottom:10px;
background:#ffb0c6;
border-radius:0px 0px 20px 20px;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
h2 {
border-bottom:dotted 2px #dd5179;
}
img {
border-radius:20px;
}
[/code]

Sample

細かいけれどやっぱりあるのとないのとじゃ、なんか違うね！

CSSのバージョンとブラウザの対応について

はて、メルちゃん。若干頭の痛いお話をしておいていいかな？

はい。

今まで教えてきたCSSの一部に、CSSの新しいバージョンであるCSS3で追加されたものがあるのね。
角を丸くするのと、影をつけるのがそれだよ。
あと、背景画像をカンマを使って複数使用するのもCSS3からできるんだ。
で、CSS3は比較的新しいから、古いブラウザとかだと対応されてないのね。

あー……。

だから角丸とか影とか背景画像複数使うときは、もしかしたらこれは反映されないかも！とかは頭に入れておいてね。

どれもかなり可愛いデザインになるのに、もったいないなぁ。

まぁ、古いブラウザも大分少なくなってきているんじゃないかな、とは思うけど……対処方法がいくつかあるみたいだから気が向いたら調べてみるといいよ。

セレクタについてもう少しお勉強特定の親要素の中の子要素を指定

はて、ぱっと思いつく限りのことは結構やったんだけど、まぁ他にも沢山あるんだけどね。
とりあえず、現状の知識で一度好きなようにデザインをしてみたらどう？

そうだね！私の本気見せてあげる！
っと、その前にさ、ヘッダーのサイト名を動かしたいんだけれど、これに余白を指定するには<h1>に余白を指定しないといけないよね？ただ、そうなるとメインの中にある<h1>の余白も一緒に設定しちゃうじゃん？どうしたらいいんだっけ？
あ！class属性いれて、クラス名で指定したらいいのか

それでもいいんだけれど、セレクタは便利でね、現状でもHTMLを変更することなくヘッダーの<h1>だけを指定する方法があるよ。
header h1 { プロパティ:値; } でやってごらん。header と h1 の間は半角スペースね。

header h1 { padding:25px 15px; }っと。ほんとだ！ヘッダーの<h1>にだけ余白がかかったや！

うん。半角スペースを挟んでさらに要素名を入れることによって、親要素の中にある子要素にだけCSSを指定。といった感じにできるんだ。当然クラス名やID名でも同じことができるからね。

header .classname {  };
.classname h1 {  };

とかできるよ。

ほー！じゃあそれも使いつつ、一度いろいろやってみるよ！

テキストの中央寄せの方法

んー、行き詰ったんだけど！

ん。とりあえずソースだして？

[code language=”html” title=”HTML” highlight=””]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><div id="header"><h1>メルちゃんの素敵なサイト★</h1></div></header>

<h1>レシピ一覧</h1>

<section>
<h2>オムライス</h2>
<a href=""><img src="image/demo3.jpg"></a>
</section>

</article>
</main>

<footer id="main1"><p>コピーライト</p></footer>

</body>
</html>
[/code]

[code language=”css” title=”CSS” highlight=””]
body,h1,h2,p {
margin:0px;
}
body {
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
header,main,footer {
display:block;
width:1000px;
margin:0px auto;
box-shadow:5px 5px 10px #d4ccb4;
}
header {
height:180px;
margin-top:10px;
font-size:20px;
background:
url(image/backimage.gif) no-repeat right 10px bottom 10px,
url(image/backimage2.png) repeat,
#ff4a74;
border-radius:20px 20px 0px 0px;
text-shadow:4px 4px 0px #ffffff;
}
header h1 {
padding:25px 15px;
}
main {
background:#ffffff;
min-height:400px;
}
main h1 {
margin:20px 0px;
padding:6px;
background:#ef5e7f;
border:4px #ff97af;
border-style:dashed none;
color:#ffffff;
text-shadow:1px 1px 0px #bf415e;
}
main h2 {
margin:30px 20px 10px;
padding:3px;
border-bottom:dotted 2px #dd5179;
font-weight:bold;
}
main img {
border-radius:20px;
}
footer {
height:50px;
margin-bottom:10px;
background:#ff4a74 url(image/backimage2.png);
border-radius:0px 0px 20px 20px;
}
[/code]

Sample

margin の相殺で困ってそうなのは何となくわかったけれど、とりあえず気になる点を全部上げてみて？

ロロちゃんの言うとおりで、まず<main>要素の<h1>要素の上部marginの相殺にすごく困ってる。「レシピ一覧」の上にもちゃんと白い背景色が来てほしいんだ。
次に、「レシピ一覧」って文字を中央に配置したいんだけれどできるかな？
あと、画像をもっと等間隔に並べたいなぁって思ったんだけど、どうしたらいいかわかんない！

じゃあ一番簡単な、テキストの中央配置からいこうか。
text-align で値を center にすることで中央配置にできるよ。
ちなみに、デフォルトは left になってて、 right を入れると右寄せになるよ。

見本 text-align:left;

見本 text-align:center;

見本 text-align:right;

ふあ！便利！！

はて、残りは次でやろうか。
しかし、画像を等間隔にきれいにってのは、まぁできるっちゃできるけれど……
縦幅と横幅を綺麗に揃えた画像を用意したほうがいいと思うんだけどね？前も言ったけどさ

んー……でもせっかくだから、現状で出来る限り綺麗に見せてくれる方法を！
ロロちゃんなら教えてくれるに違いない！

こいつ……

Step.8 見出しとアウトラインについてとCSS縦横幅の最小値最大値の設定とページ内リンクについて

Step.10 サイズの違う画像を等間隔に並べてみよう

Step.9 よく使うCSSを覚えよう

背景画像を指定してみよう。

枠線を指定してみよう。

角を丸くする方法

テキストや要素に影を付ける

CSSのバージョンとブラウザの対応について

セレクタについてもう少しお勉強 特定の親要素の中の子要素を指定

テキストの中央寄せの方法

セレクタについてもう少しお勉強特定の親要素の中の子要素を指定