人生で買ってよかったものリスト ≫

CSSとは?入門知識や使い方を初心者でもわかりやすく解説

今回は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つの要素で構成されています。

CSSの要素
  • セレクタ:どの部分の見た目を変えるか
  • プロパティ:何を変えるか
  • 値:どう(どのくらい)変えるか

この3つを使って、以下のようにテキストファイルに記述していきます。

  1. セレクタ{
  2. プロパティ:値;
  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
width3px

他にも

  • width
  • margin
  • padding
  • float

などプロパティは色々あるので、用途に合わせて使い分けてみてください。

CSSの学習方法

CSSの学習方法は、

  • YouTube
  • ネット記事
  • 動画教材
  • プログラミングスクール

など色々あるので、まずは自分が合いそうなものから始めてみるといいですね。

僕が始めてCSSを勉強したときは、Progateを使いました。

最初は無料で使えて、実際にWebページを作りながら実践的に学べるので、知識ゼロの人でも理解しやすいと思います。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA