ウェブログラム ~学習するな実践せよ~

CSSとは?初心者にも分かりやすく解説!

CSSはWebサイトを制作する上で、HTMLと並んで非常に重要となってくる技術です。
CSSとは何かを一言でいうと
「Webサイトのデザインをするもの」
です。

例えば

  • 文字のサイズや色
  • 背景色の色
  • ヘッダーやナビゲーション・バーの配置
  • 各要素の余白

このようなことがCSSを使用すると可能です。HTMLを書いたことがことがあれば、ただの文字列で色もなくそっけないのがわかるかと思います。コレにデザインを加えていく、それがCSSの役割です。

デザインを加えていくことは、「スタイルを当てる」と言ったりもするので覚えておきましょう。

CSSの書き方

CSSを書いていく上で重要な要素が3つあります。以下のHTMLを例に説明していきます。

index.html
<h1>フロントグラム</h1>

このh1に対して何らかのスタイルを当てることを考えます。

まずセレクタですが、これは「どのタグに対してスタイルを当てるのか」ということです。
プロパティは、セレクタで指定したタグに対して「何のスタイルを当てるか」になります。
プロパティ値についてですが、「プロパティに対してどのような設定をするか」になります。

画像の例であれば

  1. h1というタグをセレクタとして
  2. colorという文字色を表すプロパティを用い
  3. 赤色を示すredというプロパティ値を設定する

ということで、h1の文字色が赤色になります。

セレクタの部分はもう少し複雑で、タグ以外に対しても指定することが出来るので、その方法を見ておきましょう。

タグにスタイルを当てる

これは上記の画像の例ですね。h1タグ以外にもimgタグやpタグ、aタグなど色々なタグをセレクタとして指定することができます。

classにスタイルを当てる

classはHTMLタグに自由に付けることが出来る目印のようなものです。

<h1 class="title frontgram">フロントグラム</h1>

h1タグに「title」と「frontgram」というclassをつけてみました(class名は自由に付けることが出来る)。
classはこのように複数付けることができ、単語同士をスペースで区切ればOKです(ハイフンやアンダースコア、数字なども使えます)。

ではタグと同じようにclassにスタイルを当ててみましょう。

.title {
color: red;
font-size: 24px;
}

titleというclassに文字色赤とフォントのサイズ24pxを指定しました(pxはWebで扱う大きさの単位です)。
注意点として、classは「.」ドットから始める必要があります。

HTMLタグでスタイルを当てていたのが、classに置き換わっただけですね。

idにスタイルを当てる

次にidについてみていきましょう。idも基本的にはclassと同じですが、CSSでidを指定する場合は「#」シャープから始まることに注意しましょう。

<h1 id="title">フロントグラム</h1>
#title {
color: red;
font-size: 24px;
}

そしてclassと異なる重要な違いが、「1つのHTMLファイルに対して、同じid名は複数書くことが出来ない」ということです。

例えば、

<h1 id="title">フロントグラム</h1>
<h1 id="title">ふろんとぐらむ</h1>

これはルール的にダメです。同じid名は同じHTMLファイル内で使わないようにしましょう。
動かないことは無いですが、決まりごととして覚えておきましょう*。

また、idを使うメリットはあまりないので基本的にはidではなくclassを使うように心がけましょう。

 

HTMLタグ、class、idで記述するセレクタを説明しましたが、実はこれらを組み合わせり、セレクタで使える記号を使ったりして複雑なセレクタを指定することもできます。以下で紹介しているので、基礎が理解できたら見てください。

CSSでよく使うセレクタ8選!

次回は、特定のエリアの高さや幅を変えてみたり、背景色を変えて見たりしていきましょう。