100日チャレンジも、ついにDAY8になりました。
DAY1～DAY7までは、HTMLを中心に学んできました。
見出しや文章、リンク、画像、リスト、表、フォームなど、Webページを作るための基本的なHTMLタグを少しずつ覚えてきました。
そして今日から、いよいよCSSに突入です。
HTMLだけで作ったページは、正直かなり地味。
文字は黒一色で、レイアウトも基本的には上から順番に並んでいきます。
「Webページって、もっとおしゃれな感じじゃないの？」
最初はそんなことを思っていました。
そこで登場するのがCSSです。
今日は、HTMLで作った「すっぴん」のWebページにCSSを使って、少しずつ見た目を整える方法を学びました。
今回は、CSS初心者の私がDAY8で学んだことを、実際に書いたコードと一緒に記録していきます。
CSSとは？HTMLとの違いを理解する
まず最初につまずいたのが、
「HTMLとCSSって何が違うの？」
というところでした。
HTMLを勉強してきたばかりなので、最初はCSSもHTMLと同じようなものなのかなと思っていました。
でも、役割はかなり違います。
ざっくり分けると、こんな感じです。
| 言語 | 役割 |
|---|---|
| HTML | Webページの構造や内容を作る |
| CSS | Webページの見た目やデザインを整える |
HTMLでは、
- 見出し
- 段落
- リンク
- 画像
- リスト
- 表
- フォーム
など、**「ページに何を置くのか」**を決めます。
一方、CSSでは、
- 文字の色
- 文字の大きさ
- 背景色
- 余白
- 配置
- レイアウト
など、**「それをどう見せるのか」**を決めます。
HTMLとCSSを家にたとえてみる
個人的に一番イメージしやすかったのが、家にたとえる考え方でした。
HTMLが家の骨組みや部屋の配置だとすると、CSSは壁紙や家具、インテリアなどの内装部分です。
骨組みだけの家では少し味気ないですが、壁紙を変えたり家具を置いたりすることで、雰囲気が大きく変わります。
Webページも同じ。
HTMLでページの骨組みを作り、CSSで見た目を整える。
この関係が分かると、HTMLとCSSの違いがかなり理解しやすくなりました。
💡 初心者メモ
HTML＝「何を表示するか」
CSS＝「どう見せるか」まずはこの2つをセットで覚えておけば良さそうです。
CSSの基本構文を覚える｜セレクタ・プロパティ・値
CSSについて調べていると、まず出てきたのが、
「セレクタ・プロパティ・値」
という言葉でした。
最初は少し難しそうに感じましたが、実際のコードを見ると意外とシンプルです。
h1 {
color: red;
}
この短いコードの中に、CSSの基本となる3つの要素が入っています。
セレクタ
h1
これはセレクタです。
「どのHTML要素にCSSを適用するのか」を指定します。
今回の場合は、
「h1にCSSを適用してください」
という意味です。
プロパティ
color
こちらがプロパティ。
「何を変更するのか」を指定します。
colorなので、文字の色を変更します。
値
red
最後が値です。
「どのように変更するのか」を指定します。
今回はredなので、文字色を赤にします。
つまり、
h1 {
color: red;
}
は、
「h1の文字色を赤にしてください」
という意味になります。
CSSは「どの要素に、何を、どう変えるか」
ここで覚えておきたいのが、
「どの要素に、何を、どう変えるか」
という考え方です。
CSSを見ると、これからどんどん知らないプロパティが出てくると思います。
でも、
セレクタ＝どこに？
プロパティ＝何を？
値＝どうする？
と考えれば、コードの意味を読み解きやすくなりそうです。
今日の私の理解
「CSSって、難しいコードを丸暗記するものなのかな……」
と思っていたけど、基本は
「ここを、こう変えて！」
と指定しているだけなんだと分かりました。
この感覚を忘れないようにしたいです。
初心者がまず覚えたいCSSの基本プロパティ
CSSには、本当にたくさんのプロパティがあります。
最初から全部覚えようとすると、それだけで挫折しそうなので、まずは今回よく使いそうだと思ったものをまとめてみました。
| プロパティ | 意味 |
|---|---|
color | 文字色 |
background-color | 背景色 |
font-size | 文字の大きさ |
text-align | テキストの揃え方 |
margin | 外側の余白 |
padding | 内側の余白 |
例えば、
h1 {
color: #6b8e9b;
}
なら、h1の文字色を変更できます。
h1 {
font-size: 36px;
}
なら、h1の文字サイズを36pxにできます。
このように、プロパティを組み合わせることで、少しずつWebページの見た目を変えられます。
まだ全部を完璧に覚える必要はなさそうなので、これから実際に使いながら覚えていきたいと思います。
実際にCSSを書いてWebページの見た目を変えてみた
ここまで理屈を勉強してきましたが、やっぱり実際にコードを書いてみないと分かりません。
そこで、今回はstyle.cssにCSSを書いて、実際のWebページに反映させてみました。
今回書いたのはこちらです。
h1 {
color: #6b8e9b;
font-size: 36px;
}
一つずつ見てみます。
h1の文字色を変更
color: #6b8e9b;
colorで文字色を指定しています。
今回使用した、
#6b8e9b
は、くすみブルー系の色です。
黒文字からこの色に変えるだけでも、かなり印象が変わりました。
h1の文字サイズを変更
続いて、
font-size: 36px;
です。
font-sizeは文字の大きさを指定するプロパティ。
今回は36pxに設定しました。
つまり今回のCSSでは、
h1の文字色をくすみブルーにして、文字サイズを36pxにする
という指定をしています。
【Before】CSSを適用する前のWebページ
まずは、CSSを設定する前の状態です。
サイトタイトルの**「grillon-design」**は黒文字で、文字サイズもブラウザの標準的な大きさのままです。
画像の内容：
CSSを適用する前の「grillon-design」のWebページ。サイトタイトルが黒文字で表示されている状態。
この状態だけを見ると、まだかなりシンプルです。
HTMLでページの構造は作れていても、デザイン面ではまだ「すっぴん」という感じ。
【After】CSSを適用して見た目を変えてみた
そして、先ほどのCSSを追加してみました。
h1 {
color: #6b8e9b;
font-size: 36px;
}
すると……
画像の内容：
CSSを適用した後の「grillon-design」のWebページ。サイトタイトルがくすみブルー系の色になり、文字サイズも大きくなっている状態。
実際に見比べてみると、かなり印象が変わりました。
文字色が黒からくすみブルーに変わり、さらに文字サイズも大きくなっています。
たった数行のCSSでもWebページの印象が変わる
今回、一番「おお！」と思ったのがここでした。
書いたCSSは、ほんの数行です。
h1 {
color: #6b8e9b;
font-size: 36px;
}
それだけなのに、Webページの印象が変わりました。
HTMLだけを勉強していたときは、
「Webサイトって、どうやってこんなデザインにしているんだろう？」
と思っていました。
でも実際にCSSを書いてみると、
「ここを変えたい」
と思ったところを、CSSで少しずつ指定していけばいいんだと分かってきました。
実際にやってみて思ったこと
数行のコードで見た目が変わるの、ちょっと楽しい……！
「もっと色を変えたい」
「余白も調整したい」
「文字の位置も変えてみたい」
と、次に試したいことがどんどん出てきました。
これまでHTMLでは「ページを作る」感覚でしたが、CSSでは**「ページをデザインしていく」感覚**が少し分かってきた気がします。
DAY8で分かったCSSの基本
今回のDAY8で学んだのは、CSSのほんの入り口です。
まだまだ知らないプロパティもたくさんあります。
それでも、
セレクタ・プロパティ・値
というCSSの基本構造を理解できたことは、大きな一歩だったと思います。
今回学んだことをまとめると、
- HTMLはWebページの構造や内容を作る
- CSSはWebページの見た目を整える
- CSSは「セレクタ・プロパティ・値」で指定する
colorで文字色を変えられるfont-sizeで文字サイズを変えられる- 数行のCSSでもWebページの印象を変えられる
ということ。
そして何より、
最初からすべてのCSSプロパティを覚えなくてもいい
ということが分かりました。
まずは基本的な仕組みを理解して、実際にコードを書いてみる。
分からなかったら調べる。
そして、また書いてみる。
この繰り返しで少しずつ覚えていけばいいんだと思います。
HTMLからCSSへ。ここからWeb制作がさらに面白くなりそう
DAY1からHTMLを勉強してきて、ようやくCSSまでたどり着きました。
HTMLでページの骨組みを作って、
CSSで少しずつ見た目を整えていく。
この流れが分かってくると、Web制作の面白さが少し見えてきた気がします。
まだ文字色と文字サイズを変えただけですが、
「背景色を変えたらどうなる？」
「余白を調整したらどうなる？」
「文字を中央に配置したら？」
「ボタンのデザインも変えられるの？」
と、やってみたいことがどんどん増えてきました。
HTMLを学んでいたときとは、また違った楽しさがあります。
これからCSSを覚えていくことで、今まで作ってきたWebページがどんどん変わっていくのが楽しみです。
まとめ｜DAY8はCSSの第一歩
今回のDAY8では、CSSの基本について学びました。
HTMLとCSSの役割の違いを理解して、実際にCSSを書いてWebページの見た目を変えてみました。
最初は「CSSって難しそう」と思っていましたが、
「どの要素に、何を、どう変えるか」
と考えると、少し分かりやすくなりました。
まだまだ分からないことだらけですが、まずは一つずつ。
100日チャレンジなので、完璧を目指すよりも、毎日少しでも手を動かすことを大切にしていきたいと思います。
次回のDAY9では、今回覚えたCSSの基本を使って、さらにいろいろなプロパティを試してみる予定です。
HTMLで作ったページが、CSSによってどこまで変わっていくのか。
自分でも楽しみです。
DAY9もコツコツ頑張ります！
。
コメント