Step.5 よく使うCSSを学ぼう余白・文字関連編

余白の指定をしてみよう。

よし、CSSの書き方は大体伝えたから、よく使うCSSを覚えてみようか。
久々に目指しているサイトの形をもう一度表示するよ。

メルちゃんの素敵なサイト★
ここにホームページの説明

メイン

コピーライトとか

で、現在の index.html ファイルを見比べてみて、今一番気になるところは、ヘッダー・メイン・フッターが中央寄りじゃなくて左寄りになってしまっていることだと思うのね。

よくわかってるじゃないのロロちゃん。私ずっと気になってたんだよね。

ん。あと、もっと細かく言えば、index.html 側はヘッダーの上側に若干余白が生まれてしまっているのね。
あと、目標サイトでは文字の周りに余白がちゃんと生まれているけれど、index.html 側は余白がなくてぴったり文字がくっついちゃっているね。
これら余白を自分好みに指定するCSSが margin と padding だよ
まずは中央寄りにしてみようか。
HTMLは前回のstyle属性を指定していたのは消しておこうね。

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

<header>メルちゃんの素敵なサイト★</header>
<main>メイン</main>
<footer>コピーライト</footer>

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

[code language=”css” title=”CSS” highlight=”6,13,20″]
header {
display:block;
background:#666666;
width:1000px;
height:180px;
margin:0px auto;
}
main {
display:block;
background:#aaaaaa;
width:1000px;
height:400px;
margin:0px auto;
}
footer {
display:block;
background:#666666;
width:1000px;
height:50px;
margin:0px auto;
}
[/code]

おおお！中央寄りになった！なんか一段とサイト！って感じがしてきたよ！
でも、0pxっていうのはわかるけれど、autoって何？

autoは中央に配置されるように自動的に余白を設定してくれるよ。
要素を中央に配置したいってこと今回みたいによくあるから、そういう時に大活躍だね。よく使う手法だと思うから覚えておくといいよ。
じゃ、お次もよく使う要素と中の文字との間に余白を入れるCSSを使ってみようか。

[code language=”css” title=”CSS” highlight=”7,15,23″]
header {
display:block;
background:#666666;
width:1000px;
height:180px;
margin:0px auto;
padding:10px;
}
main {
display:block;
background:#aaaaaa;
width:1000px;
height:400px;
margin:0px auto;
padding:10px;
}
footer {
display:block;
background:#666666;
width:1000px;
height:50px;
margin:0px auto;
padding:10px;
}
[/code]

Sample

おお、文字の周りに余白ができた！やっぱりある程度余白があると読みやすくていいね。
どっちも同じ余白だけれど、使うCSSは違うんだね。

margin は外側の余白、padding は内側の余白になるよ。
余白の指定方法は margin も padding も同じだよ。

margin:上下左右px;
margin:上下px 左右px;
margin:上px 左右px 下px;
margin:上px 右px 下px 左px;

って感じに空白スペースを間に挟んで指定箇所を増やしていけるよ。
あと、上下左右個別に設定する方法もあって、それがこれ

margin-top:上px;
margin-right:右px;
margin-bottom:下px;
margin-left:左px;

もちろん padding でも同じことができるよ。
ちなみに、padding は少し使い方を気を付けないといけないよ。
さっき padding を設定したことによって、実は色がついている部分の横幅が伸びちゃったんだけど気づいた？

えっまじで？！

まじで。
大体のブラウザでは width height で指定した横幅縦幅の値＋ padding で指定した上下左右の余白の値＝背景色で確認できる横幅縦幅って感じになるのね。
だからこのサイトのこの部分の横幅縦幅は何pxだ！って決めた後に padding とか使っちゃうと計算が狂っちゃうね。
あと、一部ブラウザでは padding が width height の値に含まれたりもするから、ブラウザによってまた見た目が変わってしまうから注意ね。
具体的に今のCSSの状態で説明すると

[code language=”css” title=”CSS” highlight=”6-7,14-15,22-23″]
header {
display:block;
background:#666666;
width:1000px;
height:180px;
margin:0px auto;
padding:10px;
}
main {
display:block;
background:#aaaaaa;
width:1000px;
height:400px;
margin:0px;
padding:10px;
}
footer {
display:block;
background:#666666;
width:1000px;
height:50px;
margin:0px auto;
padding:10px;
}
[/code]

これだと背景色がついている横幅は 1020px になっているよ。
width:1000px; + padding:10px;(上下左右10px) ね。ただ、これが一部ブラウザでは padding 分の20pxが width の1000px に含まれてしまって、背景色がついている横幅は1000pxになるよってことね。

えぇえ、またブラウザの違い？それどうしたらいいの……？

CSSに box-sizing:border-box; って入れると padding に width height を含めないブラウザも padding を width height に含めるようにできるんだけれども、これ古いブラウザだと使えないから対処が必要だね。
一番いいのが padding と width height を同時に使わないって方法かな。
<p>要素をしっかり使ってページを作っているならば、<p>要素に余白を指定すればいいからね。あとで実際にやってみようか。

うん。

はて、次に一番上と一番下に余白があると思うから、それを消そうか。
これの余白はどれについていると思う？

んー<header>要素も<footer>要素も上下の margin は0pxにしているはずだもんね。うーん……

これはね<body>要素の margin だね。
padding margin もブラウザのデフォルトによって余白がついてたりするね。

へぇ。<body>の存在忘れていたよ。あれにもCSS入れられるんだね。
じゃあ、これでいいのかな？

[code language=”css” title=”CSS” highlight=”25-27″]
header {
display:block;
background:#666666;
width:1000px;
height:180px;
margin:0px auto;
padding:10px;
}
main{
display:block;
background:#aaaaaa;
width:1000px;
height:400px;
margin:0px auto;
padding:10px;
}
footer {
display:block;
background:#666666;
width:1000px;
height:50px;
margin:0px auto;
padding:10px;
}
body {
margin:0px;
}
[/code]

Sample

そうそう、実際に確認してごらん。余白が消えたでしょう？
ほかにもブラウザによってデフォルトで余白が設定されているものとかあるから、思い通りのデザインにしたいときは余白はしっかり設定していくね。
はて、メルちゃん、次にヘッダーとメインとフッターの中の文字を全部<p>要素にして、今 padding を使っているのを消して<p>要素に margin を設定してみて。

さっきの width と padding を同時に設定しないってやつを試すんだね。わかった。

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

<header><p>メルちゃんの素敵なサイト★</p></header>
<main><p>メイン</p></main>
<footer><p>コピーライト</p></footer>

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

[code language=”css” title=”CSS” highlight=”25-27″]
header {
display:block;
background:#666666;
width:1000px;
height:180px;
margin:0px auto;
}
main {
display:block;
background:#aaaaaa;
width:1000px;
height:400px;
margin:0px auto;
}
footer {
display:block;
background:#666666;
width:1000px;
height:50px;
margin:0px auto;
}
body {
margin:0px;
}
p {
margin:10px;
}
[/code]

Sample

あれ？

思い通りにいかなかったでしょ。実はね、margin も気を付けないといけないところがあってね。marginの相殺っていうのが起こるのよね。
今、ヘッダーメインフッターどれも margin の上下は0pxだよね。それに対して子要素の<p>をそれぞれ margin:10px; にしたわけだけれど、このとき、その10px は親要素と子要素の間にできず、親要素のmarginと同じ位置に余白ができているよ。
親要素にmarginが設定してあったらまた違うけれどね。ちょっと試してみようか。

[code language=”css” title=”CSS” highlight=”6,13,20,26″]
header {
display:block;
background:#666666;
width:1000px;
height:180px;
margin:20px auto;
}
main {
display:block;
background:#aaaaaa;
width:1000px;
height:400px;
margin:20px auto;
}
footer {
display:block;
background:#666666;
width:1000px;
height:50px;
margin:20px auto;
}
body {
margin:0px;
}
p {
margin:10px;
}
[/code]

Sample

ヘッダー、フッター、メインそれぞれの上下のmarginを20pxに設定したよ。さて、どうなっているかわかる？

ンー……ぱっと見で何pxなのかはちょっとわからないなぁ

まぁ、そうだね。それぞれこうなっているよ。

実際に空いている余白はどれも20pxだけだよ。

ほえ……？なんかもう意味わかんないんだけど
まずヘッダーの下側のmargin20pxとメインの上側のmagin20pxと合わせたら40pxの余白ができるんじゃないんだ？

そう、これがmarginの相殺なんだ。
まぁ要は、同じ場所にできる余白は加算されずに一番大きい値が優先されるんだ。

へぇ……なんかややこしいような……。でも、上下20pxに設定することで均等に20pxずつ余白ができてくれるのはありがたいかもね。

そうだね。
ちなみに親子でのmarginの相殺は親要素に、とあるCSSが指定されていたら起こらないんだ。
そのCSSっていうのは、今習った中では padding がその1つね。親要素に1pxでもpaddingの余白を作っておくと親要素と子要素の間に余白ができるよ。
margin も大変な子ね。

うわぁ……なにそれぇ

まぁ、今回の余白に関しては<p>要素に margin の代わりで padding を入れてあげたら解決するから、あんまり気にしないで。「あれ？何か margin がおかしいぞ？」って思ったら相殺の話を思い出して調べるといいよ。
とりあえず<p>要素に padding で余白指定しちゃって margin は 0px にしておいてね。

あいよー！

文字関連のCSSを指定してみよう。

次は文字の装飾をいじってみようか。一番よく使うのはやっぱり文字色と文字の大きさあたりかな？
あとは、せっかくだからフォントも変えてみようか。

文字の色とか大きさ変えるのは何か楽しそうだなーって思ってたんだよね！
ところで、フォントって何？

見たことない？書体のことなんだけれど。実際に見せようか？

こんな風に、パソコンの文字には色んな書体があるんだよ。これをフォントっていうよ。特によく見るのがゴシックと明朝だね。
他にも色んなフォントがあって、どのフォントを使うかを指定することができるよ。
フォントはパソコンに最初からいくつかの種類のものが入っているんだけれども、それ以外にも誰かがフォントを作成して配布してたり、売ってたりするものもあるよ。

へぇー！自分で作れたりするんだ？

作れるよー。全てのひらがな、かたかな、漢字、アルファベットとか作るとなると大変だろうけどね。
はて、ページ内すべての文字のデザインを指定したいときのセレクタは、body をお勧めするよ。

あぁ～！そうだね！<body>要素にかければ全部を弄れるね！

ちなみに<body>に background で背景色指定入れてあげたらページ全体の背景色の変更になるよ。

あぁ、そっか！ページ全体の背景色はそうやってつけるのか。なるほど！

それじゃ、さっそくやってみようか。先にソースから出しちゃうね。

[code language=”css” title=”CSS” highlight=””]
body {
color:#520013;
font-size:18px;
line-height:30px;
font-family:serif;
}
[/code]

colorが文字色、font-sizeが文字の大きさ、line-heightが行間、
font-familyがフォントの指定になっているよ。
行間は現状のHTMLファイルじゃわかりづらいから、メインあたりにちょっと文章入れてから確認してみようか。

<header><p>メルちゃんの素敵なサイト★</p></header>
<main><p>メイン</p><p>行間を試すために文字を沢山書いておきます。文章を読みやすくするには多少行間を開けておいたほうが良いでしょう。文字の大きさも、女性は小さい文字を好むことが多いようですが、小さすぎると大変読み辛くなり、せっかくサイトを作ったのに見てもらえなくなったりしますので単純に見た目だけに拘らず、見やすさ、使いやすさ、わかりやすさ、といったものに目を向けるのも大切だと思います。</p></main>
<footer><p>コピーライト</p></footer>

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

[code language=”css” title=”CSS” highlight=”24-27″]
header {
display:block;
background:#666666;
width:1000px;
height:180px;
margin:0px auto;
}
main {
display:block;
background:#aaaaaa;
width:1000px;
height:400px;
margin:0px auto;
}
footer {
display:block;
background:#666666;
width:1000px;
height:50px;
margin:0px auto;
}
body {
margin:0px;
color:#520013;
font-size:18px;
line-height:30px;
font-family:serif;
}
p {
padding:10px;
margin:0px;
}
[/code]

Sample

文字でっかいな！

文字の大きさが変わってるよーってわかりやすく見せたかったのよ。まぁ数値いじって実際どれくらいの数値がどれくらいの見栄えなのか、確認してみるといいよ。
はて、font-familyの値をいくつか見本出しておくね。

font-family:serif;	いちにさんしごろくしちはちきゅうじゅう 12345678910１２３４５６７８９１０一二三四五六七八九一〇
font-family:sans-serif;	いちにさんしごろくしちはちきゅうじゅう 12345678910１２３４５６７８９１０一二三四五六七八九一〇
font-family:cursive;	いちにさんしごろくしちはちきゅうじゅう 12345678910１２３４５６７８９１０一二三四五六七八九一〇
font-family:fantasy;	いちにさんしごろくしちはちきゅうじゅう 12345678910１２３４５６７８９１０一二三四五六七八九一〇
font-family:monospace;	いちにさんしごろくしちはちきゅうじゅう 12345678910１２３４５６７８９１０一二三四五六七八九一〇
font-family:’ＭＳゴシック’;	いちにさんしごろくしちはちきゅうじゅう 12345678910１２３４５６７８９１０一二三四五六七八九一〇
font-family:’ＭＳＰゴシック’;	いちにさんしごろくしちはちきゅうじゅう 12345678910１２３４５６７８９１０一二三四五六七八九一〇
font-family:’ＭＳ明朝’;	いちにさんしごろくしちはちきゅうじゅう 12345678910１２３４５６７８９１０一二三四五六七八九一〇
font-family:’ＭＳＰ明朝’;	いちにさんしごろくしちはちきゅうじゅう 12345678910１２３４５６７８９１０一二三四五六七八九一〇
font-family:’メイリオ’;	いちにさんしごろくしちはちきゅうじゅう 12345678910１２３４５６７８９１０一二三四五六七八九一〇

ただ、気を付けないといけないことがあってね。このfont-familyで指定しているフォントがサイト閲覧者のパソコンに入っていないとそのフォントは閲覧者のパソコンには適応されないよ。

ほう！

だから、どこかでフリーのフォントを探してそのフォント名を指定したとしても、閲覧者のパソコンが同じフォントを入れている可能性が低いからあんまり意味がないってことね。

なんだ。可愛いフォント探してこようかと思ったのに

ただ、それを可能にするCSSもあるよ。WEBフォントって言われているよ。ただ今回はこれについてはやらないから、気が向いたら調べてごらんよ。

はーい。

まぁ、そんな閲覧者のパソコン環境に作用されるプロパティだからこそ、font-familyは値を複数入れることができるよ。
font-family:’メイリオ’,family:serif;
といった感じに、カンマで区切ることによってフォントを複数指定することができるんだ。
これを左側から優先的に閲覧者のフォントを探して、見つからない場合は次に指定されているフォントにする、といった感じにフォントの変更をしてくれるんだ。

なるほどー！

はて、文字の色も無事変えられるようになったことだし、これでとりあえずの目標は達成だね。メルちゃん好きに今のCSSいじってごらん？

よっしゃ！私の色彩センスを見せてやる！

[code language=”css” title=”CSS” highlight=””]
header {
display:block;
background:#ffb0c6;
width:1000px;
height:180px;
margin:0px auto;
font-size:20px;
}
main {
display:block;
background:#ffffff;
width:1000px;
height:400px;
margin:0px auto;
}
footer{
display:block;
background:#ffb0c6;
width:1000px;
height:50px;
margin:0px auto;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
[/code]

Sample

あら、可愛いじゃない。ヘッダーだけ文字を大きくしたとことか素敵ね。

そうでしょ！たださ、ヘッダーの文字なんだけれど、数値をすごく大きくしたら文字が太くなるんだけれど、文字が小さくても太くする方法とかないの？

あるよ。
font-weightで文字の大きさを設定できるよ。normalで通常の細字。boldで太字になるよ。
font-weight:bold; って指定してご覧。

おお！できたできた！ありがとう♪

他にも楽しいCSSが色々あるけれども、余白の説明が思った以上に長くなっちゃったから今回はここまで。
次回はCSSの書き方について、もう少し詳しく教えるね。

うわ、まだ書き方とかルールみたいな話が合ったのね。

うん。一部は覚えておくとさらにデザインが広がる内容だよ。あとの一部は、実はこう書いてもいいんだよ。程度な内容。まぁ頑張って。

Step.4 CSSの書き方の基本を学ぼう

Step.6 CSSのセレクタなどについて学ぼう

Step.5 よく使うCSSを学ぼう 余白・文字関連編

余白の指定をしてみよう。

文字関連のCSSを指定してみよう。

Step.5 よく使うCSSを学ぼう余白・文字関連編