CSS登場！
前回作ったHTMLファイル▼
前回はテキストや<h1>などのタグに付いて学びましたが、本当のwebページってもっとデザインチックでデザイヤーですよね。閲覧した人が読みやすいようにとか、ブランドイメージを表現したいとか。
この無機質なHTMLファイルを人並みなページに装飾していきたい。。
そこで登場するのがCSSです。
さてどこからはじめましょうか・・・
まづはタイトルの「こんにちは」の文字。このテキストの色を青色にしてみたりしちゃったりしてしまったりしてみましょうか。
前回の”呪文”をおさらい
前回Bracketsに入力してもらった「呪文」がこれ▼
<html lang = "ja">
<head>
<meta charset = "UTF-8">
</style>
<body>
〜 本文 〜
</body>
</html>
前回は<body>〜</body>の間に本文（<h1>や<p>）を書きました。この本文を装飾するCSSコードを記述する方法はいくつかありますが、今回は<head>〜</head>の中に書いていきます。
まづは<head>〜</head>の間に<style>〜</style>と入力します。
「このタグで囲んだ中にCSSを書きますよ〜」という意味です。
もうこの「呪文」は何回も書いて暗記してしまったほうがいいです。「ふ」（←筆者）もそうしていました。
なお現段階ではこの「呪文」の意味はわからなくていいです。大人になったら自然にわかるので。）
かいてみませう
さて、タイトルの「こんにちは」の文字色を青にしたい。コード内では<h1>〜</h1> タグで囲んでありましたね▼
<h1>
こんにちは
</h1>
<h2>
自己紹介
</h2>
<p>
川田 太郎と申します。好きな信号の色は黄色です。ただいま本業であるキャッチャーを運営するかたわら、HTML/CSSを勉強して巨額のお金を稼ぎたいと思っています。ちなみにお金には一切興味がありません。
</p>
〜以下略〜
</body>
この <h1> タグに対して、CSS内に命令を記述します。
「 h1 { 色 : 青 } 」
という風に。
もちろん色に関する指定のほかにも、
{ 文字サイズ : 〇〇 } とか
{ 背景色 : 〇〇 }
などと実にさまざまなプロパティ（属性）にたいして指定することができるんです。
実際に<style>〜</style>の中に記述してみましょう。
h1 {color:blue}
</style>
Bracketsの「ファイル」▶︎「保存」でChromeに結果が反映されます。
はい。見事にテキストが青色になりました。
どんどんいくぜ！
つぎは小見出し<h2>。
これを白抜き文字にしてみたい。背景色を緑、文字色を白にしてみます。
h1 {color:blue}
h2 {
background-color:green;
color:white;
}
</style>
背景色はbackground-colorというプロパティで設定します。またひとつのセレクタ（ここでは<h2>）に対して複数のプロパティを設定したいときは、上のようにセミコロン「；」で区切って書くようにしてください。
上記のコードを<style>〜</style>内に記述し、「ファイル」▶︎「保存」でプレビューしてみましょう。
お・・・
CSSは「タグ」に対して命令を出すので、今回<h2>〜</h2>で囲まれたすべての要素に適用されます。小見出しの「自己紹介」「将来への展望」はいずれも<h2>〜</h2>でマークアップされている（囲まれている）ので、一括して「背景色：緑、文字色：白」となります。
そして今度は
全体をもっとスリムにしたい！
これはかの有名な「フーノページ」をPCで全画面表示した時のイメージです。
世間のwebページって、全画面表示した時もこんな感じで画面全体に広がってはおらず、見てくれた人がすんなり文章を読めるような幅になっていますよね？
一方今作成を進めているHTMLファイルを全画面表示してみると・・▼
あちゃー。
画面いっぱいに広がっていて、なんとも読みづらい。○chのページを見ているようですね。
これをかの有名なフーノページ（←しつこく、そしてうざい）のようにスリムに表示させたい。ではCSSにどのセレクタを使えばいいのか。
「呪文」をもう一度見てみる。
<html lang = "ja">
<head>
〜略
</head>
<body>
〜 本文 〜
</body>
</html>
「呪文」を今いちど見てみましょう。「本文」は <body>〜</body> という
タグで囲まれているのです。これをCSS内のセレクタとして取り上げれば、カスタマイズできそうな気がしませんか？
ボクシングで相手を弱らせるには顔面よりボデーです。
スケバンのケンカは顔はまずいのでボデーです。
〜脱線はここまでにしてCSSを書き進めていきましょう。まずはボデーの幅を指定します。
body {
width:1000px;
}
h1 {color:blue}
h2 {
background-color:green;
color:white;
}
</style>
bodyに指定した"width"とは、「幅」を指定するプロパテーです。
そして"px"とは、ピクセル（ディスプレイ表示に使われている粒々）の数を表します。このピクセルという単位によって横幅を指定しました。
「ファイル」▶︎「保存」でこのようになりました ▼。
うむ。幅はいい感じになったのですが、全体が左寄せに表示されてしまっています。
中央に揃えたい。
"margin"というプロパティで調整しましょう。
このプロパティは「隣接する要素とのスペースを調整する」ものです。現段階では「余白」みたいなもんだと考えてもらって構いません。
通常はさっきの"width"のようにpxなどの単位を使うことが多いのですが、これを"auto（自動）"に設定すると、余白が左右均等になります。
body {
width:1000px;
margin:auto;
}
h1 {color:blue}
h2 {
background-color:green;
color:white;
}
</style>
プレビューして見ましょう。
できはった！
スタートラインに立ちました。
徐々にそれっぽいページになってきましたね・・・そして、
この時点であなたは、HTML/CSSの
スタートラインに立つことができています。
実はここまでの理解で、あとは表現したいことをGoogleで検索しながらwebページを構築して行くことができるんです。
例えばこうしたい場合▼。
「CSS 要素を角丸長方形で囲む」
で検索すると、それに準じたコードサンプルが調べられます。
ほかにもこれだったら▼。
このやうにテキストを改行したいと思ったら、
「HTML 改行」
で検索。
どんどん自力で学習を進められますね！
よかた！
だけどフーノページもよろしくね。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。
🐧 twitter 🐧