Webサイトが地味でつまらない？CSSの基本を学んでWebサイトに命を吹き込もう

CSS

2025.09.05

HTMLは書けるけど…なんか地味。僕のWebサイト、どうにかしたい！

こんにちは、かたすけです！HTMLの知識だけで、自分のリンクサイトを作ってみました。でも、なんか地味。文字や画像が表示されてるだけで、全然惹きつけられない。これじゃ誰にも見てもらえないんじゃないか…。

原因を考えてみました。HTMLはあくまで骨組み。デザインはブラウザ任せなので、どうしても単調になってしまいます。もっと個性を出したい！

そんな悩みを解決するのがCSS！CSSは、HTMLで記述したWebサイトの見た目を、自由自在にデザインできるものです。今回は、CSSの基本を学んでいきます！

CSSとHTMLの関係について詳しく知りたい方はこちら↓

CSSの書き方は、以下の通りです。

セレクタ {
  プロパティ名: 値;
}

copy

最初は「セレクタ？プロパティ？値？何それ？」状態でしたが、一つずつ確認していきましょう。

例えば、`h1`要素の文字色を赤色にする場合は、

h1 {
  color: red;
}

と書けば良いです！

CSSファイルの準備: まずは、`style.css`という名前のCSSファイルを作成しました。
文字コードの指定: CSSファイルの先頭に`@charset “UTF-8”;`を記述。これで文字化けの心配なし！特に覚える必要はないです。
CSSを記述してデザインを調整: いよいよCSSを記述して、Webサイトのデザインを調整していきます。ここがCSSで一番重要なところです！今後、詳しく勉強していきましょう。
リセットCSSの導入: 同じHTMLファイルでも、Google ChromeとFirefoxでは見え方が少し違うことがあるんです。それをなくすために、リセットCSSというものを使います。以下のサイトからダウンロードして、自分のCSSファイルよりも前に読み込みます。読み込み方は5へ。
- destyle.css: https://github.com/nicolas-cusan/destyle.css
CSSをHTMLと結びつける:作成したCSSファイルは、HTMLファイルに結びつける必要があります。具体的な方法としては、HTMLのhead内に、<link rel=”stylesheet” href=”読み込むCSSファイルの相対パス”>と記述します。注意点として、リセットCSSは、自分の作成したCSSの前に読み込むようにしましょう。

<head>
...
<link rel="stylesheet" href="style.css">
...
</head>

<head>ってなに？？という方はこちら↓

今回は、CSSがどのようなものなのかについて学習しました。次回からは、実際にCSSを書いていき、サイトを魅力的にするための具体的方法について学んでいきましょう！

最後まで読んでいただき、ありがとうございました！