MENU

初心者向け!CSSの書き方入門

2021 2/13
初心者向け!CSSの書き方入門

今回はCSS(スタイルシート)について解説していきます。初心者の方でも分かるよう、なるべく噛み砕いて説明していきますのでご安心ください。「CSSとは一体何なのか」というお話に加え、基本的な書き方をお伝えしたいと思います!

CSSを学ぶにあたり、ある程度HTMLの知識が必要となります。HTMLがよく分からないという方は、下記の記事も合わせてお読みください!

あわせて読みたい
HTMLって何?基本のキから徹底解説します!
HTMLって何?基本のキから徹底解説します!Web製作をする上で避けては通れないのがHTML。今回はHTMLについて、基礎から徹底的に分かりやすく解説していきたいと思います!【HTMLとは?】HTMLとは、webページを作...
目次

CSSとは?

CSSとは、webページに装飾を加えたり見やすくしたりなど、見栄えを良くすることができるものです。

もしCSSを使用しない場合……

HTMLのみで作られたwebページ

HTMLだけでWebページを作成すると、このように真っ黒で見辛いページができあがってしまいます。

例えば、サイズの大きい写真を使用する場合、CSSを使用しないと極端に大きな画像が表示されてしまいます

HTMLとCSSで作られたwebページ

HTMLで作られたwebページに、装飾をつけて見栄えを良くできるのがCSSです。

  • 文字・画像の大きさ
  • 背景の色
  • 余白

など、CSSを使用すると様々な要素を見栄えよくすることができます!

CSSはどこに、どうやって書くのか

ここからは実際にコードを書きながらご説明したいと思います。詳しい解説は後ほど行いますので、まずは一緒に手を動かしてみましょう!

当ブログの解説では、無料エディタの「VSCode(Visual Studio Code」を使用しています。非常に使いやすいエディタですので、使ったことがない方がいらっしゃいましたらぜひ一度ダウンロードしてみてください。

あわせて読みたい
誰でもわかるVisual Studio Code(VSCode)のインストール方法
誰でもわかるVisual Studio Code(VSCode)のインストール方法無料で使えるエディタの中で、根強い愛好家を持つVisual Studio Code(VSCode)のインストール方法を一から解説していこうと思います。また、合わせて日本語化のやり方...

まずはHTMLファイルを作成!

STEP
VSCodeを開く
クリック/タップで拡大

まずはVSCodeを開いてみましょう。

STEP
新しいファイルを作成する
クリック/タップで拡大

「新しいファイル」をクリックし、何も書かれていないファイルを作成します。

STEP
コードを書く
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テストページです</title>
</head>
<body>
  <h1>今からHTMLを勉強します!</h1>
  <p>素敵なWebページを作りたいな〜</p>
</body>
</html>

左のコードをコピーし、テキストエディタへ貼り付けてください。

STEP
保存する

先ほど入力したHTMLを保存しましょう。

名前test.html
保存場所デスクトップ

この時、拡張子を必ず「.html」としてください。

STEP
ファイルを開いてみる

デスクトップにある先ほど保存したtest.htmlファイルをダブルクリックで開いてみましょう。

すると、ブラウザが立ち上がり、HTMLファイルが表示されました!

先ほど入力した内容がそのまま反映されていますね。

CSSを書いていきます

ここで少しおさらいですが、HTMLの<head>~</head>には

  • 検索エンジンに伝えたいこと
  • コンピューターに伝えたいこと

など、Webページの情報を記述するんでしたね。CSSはコンピュータに「こういう見た目だよ!」という情報を伝える役目がありますので、<head>~</head>に書いていきます。

あわせて読みたい
headタグに書く内容を総まとめ!
headタグに書く内容を総まとめ!今回はhead内に書いておいたほうがいいタグや、その意味を総まとめしていきます!【headとは】今ご覧のこのページも含め、WebページはHTMLにより作られています。HTMLは...
STEP
<style></style>を挿入する
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テストページです</title>

<style>
/*ここにCSSを書きます*/
</style>

</head>
<body>
  <h1>今からHTMLを勉強します!</h1>
  <p>素敵なWebページを作りたいな〜</p>
</body>
</html>

それでは実際に、先ほどのtest.htmlにCSSを書いていきましょう!

<title></head>の間に<style> </style>と書いてみましょう。

<style>タグの中にCSSを書くことで、webページの見た目を変えることができます!

STEP
<style>タグの中にCSSを書く
<style>
 body {
  color: pink;
}
</style>

<style>部分をこのように書いてください。

書き方や意味は後ほど説明しますので、まずは試してみましょう!

/*ここにCSSを書きます*/という部分は削除してしまってOKです!

STEP
上書き保存する

test.htmlを上書き保存しましょう。

  • 上部メニュー「ファイル」→「保存(上書き保存)」
  • Ctrl+S(macの場合+S

どちらかの方法で上書き保存してください。

STEP
test.htmlを開く

文字の色がピンク色になりましたね。

もし文字色が変わっていない場合、ブラウザを再読み込み(更新)して下さい。

WindowsF5
Mac+R

このように、HTMLファイル内の<head><style>タグを作り、その中にCSSを書くことができます。

実はCSSを書く方法は、今回の方法と合わせて3種類あります。別記事にまとめますので、今しばらくお待ちください!

CSSの基本的な書き方

ではここからはCSSの文法について学んでいきましょう。

CSSの文法について

セレクタどこの
プロパティ何を
どのように

ということを指定することができます。

先ほど書いたCSSに当てはめて考えてみましょう。

セレクタ<body>全体の
プロパティ文字色を
ピンクに

先ほど、全体の文字色がピンク色に変わったのは、そういう指示をCSSに書いたからということです。

CSSの記号について
セレクタの後ろ{ }波かっこ
プロパティの後ろ:コロン
の後ろ;セミコロン

上の表のように、CSSでは

  • 記号を書く位置
  • 記号の種類

も厳密にルールが決められています。間違えるとCSSが反映されなくなるので、注意しましょう!

かもめ かもめ

CSSでは空白やタブ、改行は間にいくら入っていてもOK!ただし、全角スペースはエラーが出るので絶対に使わないようにしましょう!

セレクタの書き方

先ほどのおさらいになりますが、セレクタでは「どこの」デザインを変えるのか、という場所を指定するものでしたよね。

タグで指定する

p {
  color: blue;
}

まずひとつめはタグで指定する方法です。この指定方法の場合は、タグ名をそのまま書けばOKです。p{〜}div{〜}img{〜}のように書きます。

例では、<p>タグの中にある文字色を青色に変更しています。

タグで指定した場合、webページ全ての要素にCSSが反映されます。

idやclassで指定する

<p class="text-01">ピンクです</p>
<p id="text-02">青です</p>
.text-01 {
  color: pink;
}

#text-02 {
  color: blue;
}

要素一つずつに対し、個別にスタイルを当てたい場合はidかclassを使用します。

  1. HTMLの要素内にid="○○"またはclass="○○"をつける
  2. CSSでそれぞれ指定する

という手順で、要素それぞれに対してCSSを指定することができます!

id#(シャープ) + id名
class.(ドット) + class名
あわせて読みたい
idとclassの使い方を徹底解説!
idとclassの使い方を徹底解説!HTMLやCSSを勉強していると必ず出てくるidとclass。今回はこの2つの違いや使い方含め、徹底的に解説していきたいと思います!【id、classとは一体何?】そもそもidとcl...
id / class名の付け方
  • 半角英数字
  • -(ハイフン)、_(アンダースコア)が使用できる
  • 数字から始まる命名はダメ

というルールが決められています。

かもめ かもめ

特に理由がない限りはclassを使うようにしましょう。同じidはページで一度しか使えないので使いまわせない他、JavaScriptの働く先を指定するのに使われることが多いためです。とりあえずclass、くらいで覚えておきましょう。

プロパティの書き方

次に、プロパティの書き方を説明します。プロパティでは「何を」変えるのか指定するものでしたよね。

.title {
  color: pink;
  font-size: 16px;
  background-color: #b1b1b1;
}

例では、

  • 文字色をピンク
  • フォントサイズは16px
  • 背景色は#b1b1b1

ということを伝えています。変更プロパティにもたくさんの種類があります。

CSSにはどのようなプロパティが使えるのか気になった方は下記サイトもご覧ください。

TAG index
No Image
スタイルシート[CSS]/CSSプロパティ一覧 - TAG indexCSS 2で定義されているプロパティの一覧。各プロパティの値や基本データを掲載しています。
かもめ かもめ

全て暗記する必要は全くないですのでご安心ください。必要なときに検索し、使用すればそれでOKです!

値の書き方

最後に、値の書き方を説明します。「どのように」変更するのか、という内容を指定できるのが値でしたよね。

/* colorの値は「色」*/
.color-01 {
  color: pink;
}

/* 「色」ではないので無効です */
.color-02{
  color: 18px;
}

プロパティに対し、どのような値を指定できるかはあらかじめ決まっています

プロパティ: 値;がワンセット!

先ほどご紹介したTAG indexで使用できるプロパティを調べることができるので、ぜひご活用ください!

コメントを残したい場合は/* 〜 */を使用します。最初のうちは積極的にコメントを書き込んでおくと、後から見返した時に分かりやすくなりますよ

CSSの書き方 まとめ

  • CSSの役割は、HTMLで作ったwebページの見た目を変更すること
  • 基本文法はセレクタ{プロパティ: 値;}
  • セレクタ……タグ、class、idに対して指定できる
  • プロパティ……変更できる種類は多いため、検索推奨。暗記の必要はなし
  • 値……プロパティとワンセット。指定できるものが決まっている
  • コメントを残したい時は/* 〜 */を使用する

この記事が気に入ったら
フォローしてね!

この記事を書いた人

都内勤務のフロントエンドエンジニア。初心者の方向けにブログを更新中。webに萌えてもっと楽しく、もっと素敵に!

目次
閉じる