前回はHTMLのお話をさせていただきました。
HTMLはWEBサイトの骨組みであり、基礎建築であるというお話をしましたが、HTML単体で動かすと無骨な見た目の家が出来上がります。
西洋風のお洒落な家、瓦屋根の純和風の家、近未来的な形をした家、いろんなデザインの家を作りたいなと思ったら、次に登場するのがCSSです。
ということで、今回はCSSのお話です。例によってミニコデを起動してお使いください。
＼ 今すぐタップ ／
CSSってなに？
CSS（シー・エス・エス）は Cascading Style Sheets の略です。名前は難しいですが、簡単に言うと HTMLで作ったページの見た目を変えるルール です。
- 文字の色を変える
- 背景の色をつける
- 文字を大きくする、小さくする
前述の通り、CSSはHTMLを装飾すること前提に開発言語なので、単体では何の役にも立ちません。
ということで、次の章からHTMLで作成した基礎建築をCSSで装飾する例をいくつかご紹介したいと思います。
文字の色を変える
基礎中の基礎、文字の色を変えるをやってみましょう。
因みにCSSは以下のタグで囲まれた範囲に記述します。
ということで、以下コピーして、ミニコデのHTMLタブに貼り付けてください。
<h1>こんにちは！</h1>
<p>これは段落です。</p>
<style>
h1 {
color: blue; /* 見出しを青色に */
}
p {
color: gray; /* 段落をグレーに */
}
</style>プレビュータブが以下の結果になれば文字色変更できたことになります。
上記は<h1>タグ（ホームページの見出しと言われる大きい文字）に文字に青色を指定、<p>タグの文字にグレーを指定した例です。
ご覧の通りHTMLで書かれた見出しや段落（普通の文章のこと）に装飾を施すことができるのが、CSSです。上の例だと<h1>タグや<P>タグにまとめて装飾を指定しています。
もちろん、特手の文字だけの指定なんかもできます。
文字の大きさを変える
文字の大きさを変えるCSSもご紹介しておきます。前述のソースを見て、お気づきの方もいると思いますが、特定のタグに対して文字サイズを指定しているのが以下のソースです。
<!doctype html>
<meta charset="utf-8">
<style>
h1 { font-size: 32px; }
p { font-size: 16px; }
small { font-size: 12px; }
</style>
<body>
<h1>大きな文字（h1）</h1>
<p>普通の文字（p）</p>
<small>小さな文字（small）</small>
</body>実行結果はこんな感じです。
背景の色をを変える
今度は背景色を変更してみます。同じくミニコデに以下のソースを貼り付けてプレビューしてみてください。
<!doctype html>
<meta charset="utf-8">
<body class="pink"><!-- ← "blue" に変えると色が変わる -->
<style>
body { margin:0; min-height:100vh; }
body.blue { background:#e6f0ff; }
body.pink { background:#ffe6f0; }
</style>
</body>こちらが実行結果です。
ちなみに<body class”pink“>の部分を<body class”blue“>に変えると背景色が青になりますので、是非試してみてください。
まとめ
CSSは見た目を変えるルール
HTMLとCSSはセットで使う
次は「JavaScript編（基礎の基礎）」で、ボタンを押したら動く！入力したら変わる！といった 動きをつける方法 を学んでいきましょう！
コメント