LINEで現役エンジニアに直接質問してみよう!登録無料

【初心者向け】CSSとは?10分でわかる基礎と書き方をイラストを使って解説

CSSとは、Webサイトサイトを作る時のデザインを行う言語です。HTMLと深く結びついており、HTMLと同じく暗号のように見える文字列の為、「難しそう」とイメージがあるのではないでしょうか?

  • CSSを書いてWebページをデザインしたい
  • かっこいいWebページを作ってみたい
  • CSSを書く方法を知りたい
  • CSS複雑で怖いけど、頑張って理解したい!

このような疑問に答える初心者向けの内容になっています。

CSSとは?

CSSとは、基礎となっているHTMLにデザインし、人間にとって生のHTMLだけよりもわかりやすくカスタマイズできるできる言語です。

HTMLだけだと…

このように、HTMLだけだと単調でリンク、見出し、段落がわわかりにくいWebサイトになってしまいます。

CSSを設定すると…

CSSを設定すると、要素の配置や色幅を自由に設定でき、見やすくレイアウトできます。

CSSを設定してみた

HTMLで段落(<p>)を作り、そこにCSSを設定して文字サイズや色を変えてみます!

まずは、HTMLだけのテキストです。

<p>CSSでデザインを変えるサンプル</p>

CSSでデザインを変えるサンプル

ここにCSSで文字色を変えてみます。

<p>CSSでデザインを変えるサンプル</p>
p {
  color: #ff6b00;
}

CSSでデザインを変えるサンプル

更に、文字サイズを変えてみます。

<p>CSSでデザインを変えるサンプル</p>
p {
  color: #ff6b00;
  font-size: 1.5em;
}

CSSでデザインを変えるサンプル

背景を変更することだって可能です。

<p>CSSでデザインを変えるサンプル</p>
p {
  color: #ff6b00;
  font-size: 1.5em;
  background: beige;
}

CSSでデザインを変えるサンプル

このように、様々な設定(プロパティ)を追加していき、デザインを作っていきます。

CSSよりもHTMLを先に勉強するべき?

結論から言うと、CSSよりもHTMLを先に勉強するべきです。

なぜなら、HTMLが無いと何処にどのようなデザインを施すのか、書くことができないからです。

HTMLについては、HTMLの基本をマスターできる記事を作っているので、クリックして見てみてください。

【初心者向け】HTMLとは?10分でわかる基礎と書き方をイラストを使って解説

CSSはどこに書けばいいの? 3つのパターン紹介

CSSがHTMLに作用して、デザインを行う言語というのはわかったと思います。そのCSSを書く場所には決まりがあります。どこでも書けばいいわけではありません。

結論から言うと、書ける場所は下記の3つあり、よく現場で使われる順に紹介します。

  1. <link>タグを使って別ファイルから読み込む
  2. <style>タグの中に直接CSSを書く
  3. style属性の中に直接CSSを書く

<link>タグを使って別ファイルから読み込む

この方法は、<link>タグを使って別ファイルからCSSを読み込む方法です。

CSSをWebサイト全体で使うことができるなどのメリットの多さから、Web制作の現場で最も使われれいる方法です。

HTMLには、外部の関連ファイルを書くための``というタグがあります。このタグを使うと、別ファイルからCSSを読み込むことができます。

別ファイルにすると、他のWebページでも同じCSSファイルを使う事ができます。

Webサイトには、2ページ以上のページがあるのが普通ですので、別ファイルにして読み込むCSSファイルを共通化すると、Webサイト制作がはかどりますし、将来サイトの修正も行いやすくなります。

linkタグでCSSを読み込む書き方

<link>タグを使ってCSSを読み込むには、rel属性とhref属性の2つが必要です。また、<link>タグには終了タグが無く、<head>の中に1行で記述します。

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

relは「今からstylesheetを読み込みますよー」と宣言する部分です。stylesheetとは、CSSの事です。

hrefでcssファイルの場所までのパスを指定します。「https: //example.com/style.css」とか「/style.css」とか記述します。
これは「パス」と呼ばれ、サーバー上のあるファイルを特定するための書き方です。

詳しくは下記で解説しているので、クリックして見てみてください。

Webサイトのディレクトリ(フォルダ)構造とURLの関係はどうなっているの?

<style>タグの中に直接CSSを書く

2番目の方法は、HTML中で<style>タグを使いその中に直接CSSを書く方法です。

CSSを別ファイルにした時より、読み込むファイル数が少ないのでその分、高速化を望めます(ただし、普通は体感できるほど高速化しない)

この方法は複数のHTMLファイルで同じスタイルを適用させたい時は、すべてのファイルに内容をコピーしないといけないので、手間がかかります。

style属性の中に直接CSSを書く

この方法は、HTMLのstyle属性を使ってその中に直接CSSを書く方法です。

1つの要素にしかCSSをかけなかったり、共通のデザインを使い回せなかったり、見づらくなってしまうなどの理由から、使ってはいけない方法(タブー)とされています。

hogehoge

HTMLからlinkタグを使ってCSSを読み込ませる流れ

CSSの概要がわかった所で、ここからCSSファイルを作成してHTMLで読み込んで使う手順を詳しく解説していきます。

  1. HTMLファイルを作成します
  2. HTMLファイルを保存します
  3. CSSファイルを作成します
  4. CSSファイルを保存します
  5. HTMLとCSSの構成を確認します
  6. index.htmlをブラウザにドラッグアンドドロップします
  7. HTMLにlinkタグを書きます
  8. HTMLを保存します
  9. ブラウザをリロードします
STEP.1
HTMLファイルを作成します
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>サイトのタイトル</title>
</head>
<body>
  <p>HTMLからlinkタグを使ってCSSを読み込ませる</p>
</body>
</html>

まず、土台となるHTMLを作成しましょう!

このHTMLをコピーしてテキストエディタに貼り付けます。

STEP.2
HTMLファイルを保存します

HTMLファイルを保存しましょう!

この時の注意点が下記2つあります。

  1. 新規ディレクトリ「sample」を作成します
  2. 「sample」の中にindex.htmlという名前でファイルを保存します
STEP.3
CSSファイルを作成します
@charset "utf-8";
p {
  font-size: 1.5em;
  color: #ff6b00;
}

読み込むCSSファイルを作成しましょう!

フォントサイズを1.5倍して、色をオレンジ色にするコードが書かれています。

このCSSをコピーしてテキストエディタに貼り付けます。

STEP.4
CSSファイルを保存します

CSSファイルを保存しましょう!

この時の注意点が下記2つあります。

  1. 保存する場所は先程作った「sample」ディレクトリです
  2. ファイルの名前は「style.css」にします

ファイルを保存する時、拡張子を変更するとこのようなアラートが出る場合があります。今回は拡張子に.cssを使うので、気にせず「Use .css」を選択してください。

STEP.5
HTMLとCSSの構成を確認します

この段階で、「sample」ディレクトリの中に「index.html」と「style.css」が入っていることを確認しましょう!

STEP.6
index.htmlをブラウザにドラッグアンドドロップします

作ってみたindex.htmlをブラウザで見てみましょう!

sampleフォルダにあるindex.htmlをブラウザにドラッグ&ドロップすると内容が表示されます。

STEP.7
ブラウザに表示された!

内容がブラウザに表示されました。

しかしよく見てみると、CSSの設定したデザインが反映されていません。フォントサイズは大きくなっていないし、色も変化していません。

なぜなら、<link>タグを設定してCSSファイルを読み込むようにしていないからです。

ここからCSSを反映させる追記をHTMLを行います。

STEP.8
HTMLにlinkタグを書きます

<link>タグは、下記です。

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

このタグを<head>の中に書きましょう

STEP.9
保存してブラウザをリロードします

保存してブラウザをリロードすると、このようにCSSが適用されてデザインが変わります。

完了!

ここまでをまとめると、、、

  1. HTMLファイルを作成する
  2. CSSファイルを作成する
  3. <link>タグで読み込み

という手順でCSSを開発していきます。

CSSの書き方基本

ここからはCSSの書き方を学習していきましょう!

CSSはこのような構造をしており、各部分には名前が付いています。

  1. 「セレクタ」… どこのHTMLタグのデザインを変更するのか指定
  2. 「プロパティ」… どんなデザインを施すのか指定
  3. 「値」… どのくらい変更するのかを指定

CSSファイルには「コメント」と呼ばれるどんな内容を書いても処理されないエリアを設定できる書き方があります。 /*から始まり、*/で終わるまでの部分がそれです。

まとめ

ここまでで内容をまとめます。

  • CSSを使う方法は3種類ある
  • <link>タグを使って読み込む方法が主流
  • CSSは「セレクタ」「プロパティ」「値」から構成される
  • CSSにはコメントを作れる

以上です

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。