プログラミングの勉強でHTMLなどに続き、学ぶ言語の一つである『CSS』はサイトを制作する際に必ず理解していなくてはいけない言語です。
ここではCSSとは何なのかということから、その使い方、書き方までを初心者の方にも分かりやすく解説していきます。
CSSはHTMLと一緒に使用する機会が多くなっていきます。
そのHTMLについてはHTMLの使い方、書き方を初心者でも分かりやすく簡単解説で詳しく解説していますので、参考にしてみてください。
Contents
前提：CSSはプログラミング言語ではない
先ほど紹介させていただいたHTMLについての記事を見た方は分かるかと思いますが、HTMLに引き続き、CSSもプログラミング言語ではありません。
CSSは『Cascading Style Sheets』という略称のスタイルシート言語になっています。
スタイルシート言語と聞くと、初心者の方には難しく聞こえるかもしれませんが、CSSを簡潔に表すと、デザインを指定するための言語になります。
CSSを使用することでサイト内のカラーやフォントサイズなど、様々なデザインを指定、変更することが出来ます。
そして、初心者の方はこのスタイルシート言語というのもHTMLの時と同様に、それを知らなかったとしても弊害があることはほとんどありません。
ここからの解説で、CSSの使い方、書き方について詳しくかつ初心者の方にも分かりやすく解説していきますので、それを理解して自分自身でサイトを制作していきましょう。
準備：CSSを使うためのHTMLファイルを用意する
前述したようにCSSはサイト内のカラーやフォントサイズなどのデザインを指定するための言語となります。そのため、テキストやどの画像を使用するかなどはCSSでは指定することが出来ません。
それらを指定するためにまずはHTMLファイルを用意しなくてはいけません。
HTMLファイルは前述したようにHTMLとは？HTMLの使い方、書き方を初心者でも分かりやすく簡単解説！で詳しく解説していますので、参考にしてみてください。
この記事の中にも記載してありますが、CSSで記述したデザインを反映させるためには、指定のHTMLファイルにCSSファイルを読み込ませなければなりません。
それではそのCSSファイルを作成していきましょう。
1：CSSを記述するための『CSSファイル』を作成する
CSSファイルは拡張子を『css』にすることで作成することが出来ます。
『拡張子』とは『jpg』や『png』などのことで、ファイル名の『〇〇.css』などのcssの部分のことを言います。
類似しているものとして、HTMLファイルの作成方法が挙げられますが、HTMLファイルを作成するには拡張子を『html』にするのに対し、CSSファイルは拡張子を『css』にするという違いがあります。
具体的なファイル名ですが、拡張子の『css』の前には『style』を記述して、ファイル名を『style.css』とすることが無難です。
CSSファイルはこれで作成することが完了いたしました。それではこれを指定のHTMLファイルに読み込ませていきましょう。
2：HTMLファイルにCSSファイルを読み込ませる
ここからは作成したCSSファイルをHTMLファイルに読み込ませていきます。これをすることで、指定のHTMLファイルとCSSファイルをリンクさせることが出来ます。
具体的な方法を解説していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>上記のコードの中でheadタグ内にある『<link rel=”stylesheet” href=”style.css”>』がCSSファイルを読み込むためのコードになります。
前述した記事でも解説しましたが、『link rel=”stylesheet”』の部分でCSSファイルを読み込むということを伝えます。そして、『href=”style.css”』の部分でどのCSSファイルを読み込むかを指定しています。
『style.css』の部分はファイル名を記述する部分ですので、前述した部分でファイル名を『style.css』にしない場合はそのファイル名を記述してください。
指定のHTMLファイルとCSSファイルをリンクさせることが出来たので、次からは実際にCSSファイルに記述を開始していきます。
3：作成したCSSファイルの一行目で文字エンコーディングを定義する
作成したCSSファイルにまずは文字エンコーディングを定義します。
下記のコードを見てください。
@charset "UTF-8";作成したCSSファイルの一行目に『@charset “UTF-8”;』を記述しました。
『@charset “UTF-8″』を記述することで、『このCSSファイルがUTF-8で記述されます』ということを伝えています。
この記述の詳しい意味はCSSの書き方を勉強している初心者の方は割愛しても問題はないでしょう。
初心者の方はまず、一行目に『@charset “UTF-8”;』を記述するということを癖づけていきましょう。
次からはCSSのデザインを決める記述をしていきます。
4：セレクタを記述する
ここからCSSを記述してデザインを決めていきます。その中でいくつかの新しい言葉を理解しなければいけないため、それを1つずつ解説していきます。
CSSの記述をする時、CSSファイルを読み込ませたHTMLファイルのどの要素を装飾するのかを決めなければいけません。
まずはそれを書いてみましょう。下記のコードを見てください。
header {
}前述した『@charset “UTF-8”;』は省略しています。
CSSファイルに『header』と『{}』を追記しました。これでこれから書かれるコードがCSSファイルを読み込ませたHTMLファイル内のheaderタグのデザインということになります。
このような『header』など、HTMLファイルのどの部分を装飾するのかを表す言葉を『セレクタ』と言い、CSSでデザインを決める時に最初にすることになります。
セレクタには『header』などのようなタグに加え、class名やid名を記述する場合も多くあります。
それぞれのセレクタとしての書き方は、
・タグをセレクタにする場合はタグの前には何も入れず、タグ名のみ
・class属性をセレクタにする場合はclass名の前に『.』を入れる
・id属性をセレクタにする場合はid名の前に『#』を入れる
このようにしてタグ、class属性、id属性をセレクタにします。
main {
font-size: 100px;
}
.content {
font-size: 50px;
}
#item {
font-size: 25px;
}class属性、id属性についてはclass属性、id属性の違いって？それぞれの使い方を簡単解説でそれぞれを比較しながら解説していますので、参考にしてみてください。
また、複数のセレクタに同じデザインを反映させたい場合にはセレクタ間に『,(カンマ)』を入れます。
この複数のセレクタに同じデザインを反映させる方法はCSSで複数のセレクタに同一のプロパティ、値を指定する方法を解説で詳しく解説していますので、参考にしてみてください。
このセレクタである『header』の後に『{}』が記述されていますが、これはHTMLで言うところのタグに近い意味を持ちます。
header要素を含めたセレクタのデザインは好きなところにその記述をしていいのではなく、『{}』の間に収めて書くことが求められます。
4－1：より下の行にあるセレクタがデザインとして反映される
同じ要素をセレクタとして選択して、別のデザインを指定した場合、より下の行にあるセレクタがデザインとして反映されます。
例えば、下記のようなコードがあったとします。
header {
font-size: 100px;
}
header {
font-size: 50px;
}上記のコードではheaderタグに『font-size: 100px;』と『font-size: 50px;』が指定されています。
プロパティ、値の部分はこの後、詳しく解説しますが、このコードではheaderタグのフォントサイズが100pxか50pxを表すようになっています。
このような場合、headerタグのフォントサイズはより下の行に書かれた『font-size: 50px;』が指定されます。
これはCSSを扱う上のルールの一つで、指定されたデザインはより下の行に書かれたものが上書きされ、デザインとして反映されます。
4－2：より細かく書かれたセレクタがデザインとして反映される
前述したようにCSSではより下の行にあるコードがデザインとして反映されます。しかし、そのルールが適応されない場合もあります。
下記のコードを見てください。
header p {
font-size: 100px;
}
p {
font-size: 50px;
}どちらもpタグに対してのコードですが、2つのうち上に書かれたコードは『header p』ということで、『headerタグ内のpタグ』を表しています。それに対し下に書かれたコードは『全てのpタグ』に対してのコードになります。
この時、『headerタグ内のpタグ』には『font-size: 100px;』と『font-size: 50px;』の2つが指定されているということになります。
このように同じ要素について書かれたコードは、よりどの部分に着目したコードなのかを細かく書かれたコードがデザインとして反映されます。
そのため、今回の場合、『header p』と書かれた方がどの部分のpタグなのかを細かく記述していることで、『全てのpタグ』に対して書かれたコードよりも上にありますが、『header p』に書かれた『font-size: 100px;』が反映されます。
セレクタをより細かく書く方法は上記のように親要素と子要素の間に半角スペースを入れます。
class属性やid属性の場合も同じように、親要素と子要素の間に半角スペースを入れ、その後にそれぞれの属性に合わせて、『.』や『#』を入れて記述します。
main .content {
font-size: 100px;
}
main #content {
font-size: 50px;
}HTMLを記述するときから、タグの親子関係を意識して書くことで、CSSを書く時もスムーズに書き進めることが出来ます。
5：プロパティを指定する
次にプロパティを指定していきます。
プロパティはセレクタの解説の時に何度か登場した言葉ですが、これは指定したセレクタにどのようなデザインを反映させたいかの指示を出すための記述です。
下記のコードを見てください。
header {
font-size
}先述したコードに『font-size』を追記しました。
『font-size』はフォントサイズを決めるための記述で、このように指定したセレクタにどのような種類のデザインを反映させるかの指示を出すものを『プロパティ』と言います。
『プロパティ』には様々な種類があり、『font-size』のようなフォントサイズを決めるものからテキストの色や余白の大きさを変化させるもの要素の位置を決めるものなど、数多く存在します。
今回の記述はセレクタであるheaderタグのフォントサイズを決めるための記述になります。次にこのフォントサイズが具体的にどのくらいの大きさなのか、その値を決めていきます。
6：値を指定する
ここからは先述したプロパティの値を指定していきます。
下記のコードを見てください。
header {
font-size: 100px;
}プロパティの『font-size』の値を『100px』と指定しました。
上記のコードを見て分かるように値は『: ○○;』の形で書くことが決められています。
今回はフォントサイズを指定するための単位として『px』を使用しましたが、『%』や『em』、『rem』などの単位を使用する場合もあります。
単位についてはCSSの単位まとめ！px・%・em・remを詳しく解説で詳しく解説していますので、参考にしてみてください。
また、単位を必要とせず、『left』や『right』などで表す場合など、値はプロパティに合わせて様々な書き方があるので、プロパティを調べ、そのプロパティに合う書き方で値を記述しましょう。
header {
font-size: 100px;
text-align: center;
}プロパティと値は『{}』の間に1行に1プロパティと値を書くことが一般的です。自分だけではなく、他人に見られたとしても分かりやすいCSSを記述することを心掛けましょう。
CSSの書き方はこれで以上になります。
まずはHTMLでサイトの骨組みを作らなければなりませんが、骨組みの段階からCSSで制作するデザインのイメージを意識すると、スムーズにCSSを記述することが出来てきます。
次からは応用としてレスポンシブデザインの書き方について簡単に解説してきます。
応用：レスポンシブデザインの書き方
ここではレスポンシブデザインの書き方を初心者の方にも分かりやすく、簡単に解説していきます。
レスポンシブデザインの書き方のイメージは
○○～○○pxの間はこのコードを指定する
ということです。これがどういうことなのか下記のコードに沿って解説していきます。
@charset "UTF-8";
header {
font-size: 100px;
}
@media screen and (min-width: 601px) and (max-width: 960px) {
header {
font-size: 50px;
}
}『@media screen and～』より前の部分はこれまでの知識だけでも理解出来るはずですが、ここではheaderタグにフォントサイズ100pxが指定されています。
レスポンシブデザインがない場合はこれで終わりですが、レスポンシブデザインを書く時は『@media screen and～』の部分が必要になります。
この『@media screen and (min-width: 601px) and (max-width: 960px)』の部分は『601px以上、961px以下の範囲の画面幅で反映される』という意味でその範囲内のデザインはこの『@media screen and (min-width: 601px) and (max-width: 960px)』が書かれた部分から始まる『{}』の間に収められます。
『@media screen and (min-width: 601px) and (max-width: 960px)』の間の記述方法はこれまで解説してきたものと変わりませんが、それが反映されるのが今回の場合、601px以上、961px以下の範囲ということだけ意識しなければなりません。
このようにレスポンシブデザインは○○～○○pxの範囲ではこのコードが反映されるという考え方の元、書かれていきます。
今回はざっくりとした解説になってしまいましたが、下記の記事ではレスポンシブデザインとは何なのかということから、その書き方、実際にレスポンシブデザインに対応したコードを書くためのテンプレまで用意されていますので、是非、参考にしてみてください。
今回はCSSの書き方について初心者の方にも分かりやすく、細分化しながら解説していきました。
CSSはデザインの基礎となる言語で必ず身に着けてなくてはならない言語の一つです。まずはここで基礎を理解して、CSSに付随する知識も積み上げていきましょう。
