コンテンツ
CSSでスタイルを指定
こんにちは、ホームページ制作のオイゾウです！
前置きが長くなりましたが、ここからCSSを記述し、実際にスタイルを指定していきましょう！
お題
以下のHTMLのp要素に対し、スタイル（CSS）を指定して見栄えを良くしてみます。
[html]<p>小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？</p>[/html]
まずは指定なし
結果
小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？
背景色を付けてみる
最初は分かりやすく定番の背景色から。
[html highlight="2"]p {
background-color: #ab7b92;
}[/html]
↑CSSファイルに記述します。
結果
小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？
プロパティ
| background-color | 背景色を指定 |
|---|
値
| #ab7b92 | 先頭に「#」を付け、あとの6桁はRGB値になります。 RGBでの色の指定方法については「ウェブデザインに必須・初心者のためのCSS基礎知識」の「色はRGBで指定する」という項目をご参照ください。 |
|---|
備考
背景に色ではなく画像を指定することもできます。
[html]p {
background-image: url("images/manju.jpg");
}[/html]
プロパティを「background-image」にして、値は「url("画像ファイルのURLまたは相対パス")」にします。
背景にパターン（柄）を表示させる場合によく使いますが、その方法はまた別の機会に詳しく説明します。
文字が読みづらいので、色を変えたい
背景が白ではなく色付きになったら文字が読みにくくなってしまったので、今は文字の色が黒いですが、白に変えます。
[html highlight="3"]p {
background-color: #ab7b92;
color: #ffffff;
}[/html]
結果
小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？
プロパティ
| color | 文字色を指定 |
|---|
値
| #ffffff | 先ほどの背景色と同じく、RGBで指定します。 この「#ffffff」は白で、この書き方以外に「white」と書いてもOKです。 ちなみにこのwhite（白）のように色名で指定できるのは16色あります。 white、silver、gray、black、red、maroon、yellow、olive、lime、green、aqua、teal、blue、navy、fuchsia、purpleです。 |
|---|
文字を大きくしたい
文字をさらに読みやすく、目立たせるため、大きくします。
[html highlight="4"]p {
background-color: #ab7b92;
color: #ffffff;
font-size: 1.2em;
}[/html]
結果
小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？
プロパティ
| font-size | 文字サイズを指定 |
|---|
値
| 1.2em | （文字以外も含めて）サイズを指定するためにいくつかの単位がありますが、ここで使っている単位「em」は「相対指定」の一種で、フォントの高さを1とする単位です。 「1.2em」だと120%になるので、ちょっと大きくなります。 逆に小さくしたい場合は例えば「0.9em」などにします。 |
|---|
行間をもっと広くしたい
行と行の間がもうちょっと空いてるとさらに読みやすくなるので、行間を大きくします。
[html highlight="5"]p {
background-color: #ab7b92;
color: #ffffff;
font-size: 1.2em;
line-height: 1.8;
}[/html]
結果
小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？
プロパティ
| font-size | 行の高さを指定 |
|---|
値
| 1.8 | 文字サイズの指定ではemという単位を使いましたが、このように数値だけで指定することもできます。 line-heightプロパティの値に単位をつけなかった場合、フォントサイズにこの値をかけたものが高さになります。 つまり、文字サイズが大きくなれば行間も大きくなり、逆もしかりということです。 なので行間は単位を指定せずに値を決めましょう。 |
|---|
備考
どのくらいの行間を取ればいいのかということについてですが、PCもスマホも含め、一般的には1.5～1.8が多いように見受けられます。
状況によるため一概には言えませんが、個人的には1.5だとちょっと狭いかなという気がしていて、2だと文字1つ分の行間になり、それだと空きすぎに感じますので、1.7～1.8くらいがおすすめです。
最終的にはご自身でいろいろ試して頂ければいいのかなと思います。
内側に余白を入れたい
余白は外側と内側どちらも指定できます。
まずはp要素の内側の余白を作ります。
[html highlight="6"]p {
background-color: #ab7b92;
color: #ffffff;
font-size: 1.2em;
line-height: 1.8;
padding: 30px;
}[/html]
結果
小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？
プロパティ
| padding | 内側の余白（パディング）を指定 |
|---|
値
| 30px | 余白はpx（ピクセル）という単位で指定しています。 |
|---|
備考
「padding: 30px」で上下左右全ての内側の余白が30pxになりますが、上下左右それぞれ別の値を指定することもできます。
例えば「padding: 30px 20px」では上下が30pxで左右が20pxになり、「padding: 30px 20px 10px 40px」と4つ値を指定すると上30px、右20px、下10px、左20px（上から時計回り）になります。
他にも様々な指定方法がありますが、詳しい点はまた別の機会で紹介していきます。
外側に余白を入れたい
今度はp要素の外側に余白を入れます。
[html highlight="7"]p {
background-color: #ab7b92;
color: #ffffff;
font-size: 1.2em;
line-height: 1.8;
padding: 30px;
margin: 50px;
}[/html]
結果
小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？
プロパティ
| margin | 外側の余白（マージン）を指定 |
|---|
値
| 50px | 余白はpadding（パディング）と同様、今回も単位はpx（ピクセル）で指定しています。 %やemもよく使います。 |
|---|
備考
このmargin（マージン）もpaddingと同様、値が1つの場合は上下左右全てにその値が適用されますが、「margin: 40px 20px」と値が2つだと上下が40px、左右が20pxになりますし、「margin: 10px 20px 30px 40px」だと上10px、右20px、下30px、左40pxです。
枠線を引きたい
p要素を囲むように線を引いてみます。
[html highlight="8"]p {
background-color: #ab7b92;
color: #ffffff;
font-size: 1.2em;
line-height: 1.8;
padding: 30px;
margin: 50px;
border: solid 3px #6a3a51;
}[/html]
結果
小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？
プロパティ
| border | 線（ボーダー） |
|---|
値
| solid 3px #6a3a51 | 3つの値を、半角スペースで区切って順に記述します。 最初の値は線のスタイルで、「solid」は1本の線を表示するという意味です。 次の「3px」は線の太さが3ピクセルということを表しています。 最後の「#6a3a51」は線の色です。 |
|---|
備考
線のスタイルは他にdouble（2本線）、dotted（点線）など様々な種類があります。
また線は上下左右に入っていますが、部分的に（例えば下だけなど）入れることもできます。
下だけに入れる場合はプロパティを「border-bottom」にします。
最後に
いかがでしたでしょうか？
CSSでスタイルを指定することによって、まずはどのように表示することができるのかということがご理解頂ければと思います。
このようにHTMLのスタイルを指定していけるようになれば、あとはちょっと応用を効かせていくだけで、それっぽいホームページのデザインになっていきますので、がんばりましょう！
とはいってもCSSに関して知っておかなければならない知識はまだまだたくさんありますので、最低限必要だと思われる内容について、これからも順番に説明していきます！
