【記事内に広告が含まれる場合があります】
今回はCSSについてまとめていきます。
CSSを学ぶことで、Webサイトの見た目を整えて、自分の思い通りのデザインを作れるようになるので、まずは触り部分だけでも把握していきましょう。
CSSとは？
CSSとは、Cascading Style Sheets（カスケーティング・スタイル・シート）の略で、Webサイトのデザイン・見た目を装飾する役割があります。
例えば
- 文字の色・大きさ
- 背景色
- 配置
などを指定してできるのがCSSですね。
HTMLだけでもWebページは作れますが、かなり簡素的な感じになってしまいます。
CSSを使うことで、見た目を綺麗に整えられるので、Webページをつくるときは基本的にHTMLとCSSはセットで使われます。
HTMLが木の幹や枝で、CSSが葉っぱや花みたいなイメージですね。
HTMLとは？入門知識や使い方を初心者でもわかりやすく解説
CSSの使い方・書き方
まず、CSSを使うためには、テキストファイルが必要です。
テキストファイルの名前は
ファイル名.css
のようにファイル名の後に「.css」と拡張子を付けることで、CSSのファイルとなります。
CSSは、3つの要素で構成されています。
- セレクタ：どの部分の見た目を変えるか
- プロパティ：何を変えるか
- 値：どう（どのくらい）変えるか
この3つを使って、以下のようにテキストファイルに記述していきます。
- セレクタ{
- プロパティ:値;
- }
例えば、h2見出しの色を赤にしたいときは
.h2 {
color: red;
}
と書くと、h2見出しの色が赤に変わります。
色に加えてサイズも変更したい場合は
.h2 {
color: red;
font-size: 30px;
}
とすると、h2見出しの色を赤にして、文字のサイズを30pxにできます。
A
CSSの主なプロパティ
CSSでよく使われるプロパティはこちらです↓
| プロパティ | 意味 | 値の例 |
|---|---|---|
| color | 文字の色 | red #FF0000 rbb（255,0,0） |
| font-size | 文字のサイズ | 16px 0.5em |
| font-weight | 文字の太さ | bold 200 |
| background-color | 背景色 | colorと同様 |
| text-align | 文字の揃え方 | left right center |
| height | 高さ | 4px |
| width | 幅 | 3px |
他にも
- width
- margin
- padding
- float
などプロパティは色々あるので、用途に合わせて使い分けてみてください。
CSSの学習方法
CSSの学習方法は、
- 本
- YouTube
- ネット記事
- 動画教材
- プログラミングスクール
など色々あるので、まずは自分が合いそうなものから始めてみるといいですね。
僕が始めてCSSを勉強したときは、Progateを使いました。
最初は無料で使えて、実際にWebページを作りながら実践的に学べるので、知識ゼロの人でも理解しやすいと思います。
