CSSの基本的な書き方とは？【初心者でもOK】
上記の様な方は、意外と多いと思います。
僕も気になったことはどんどん調べるタイプなので、気持ちが分かります。
また、web制作のお仕事を受けようと勉強している方は、基本的に知っているべき知識であると思うので、この記事では、「基本的なCSSの書き方」について解説したいと思います！
また、HTMLの基本的な知識とCSSとは何かという知識がある方へ書いているので、「HTML、CSSについて何も分からない」という方はまず、こちらの記事をお読み下さい。
htmlとは？全くの初心者に向けて専門的な知識を解説。
CSSとは？その役割と必要性を分かりやすく解説。
では、内容へ入ります。
基本的なCSSの書き方とは？？
基本的な書き方は、まずスタイルを当てたい場所(セレクタ)の指定します。そして、スタイルを当てる項目(プロパティ)を指定します。最後に、その値を指定します。
p {
font-size: 20px;
}このように書きます。上記の例では、「p」という要素が「セレクタ」で、「font-size」というのが「プロパティ」で、その値が「20px」という指定になります。
p{font-size:20px;background-color:purple;}この様に、詰めて書いてもOKなのですが、これでは見にくいので、慣習的に、改行、空白、などを入れます。
セレクタの指定方法ですが、様々なものがあります。どれもよく使うし、状況によっては便利であるので、知っておくといいでしょう。
また、他の人が書いたコードを読むときにも、知っていた方がいいのでほぼ必須な知識です。
CSSを書く場所とは？
完全な初心者ですと、この様な反応をしているかと思います。
CSSの書き方について、これからもっとこの記事で詳しく書くので安心して下さい。
その前にまず、そもそもどこにCSSってどこに書けばいいの？というところから解説します。
ではまず、大枠からお伝えしますね。
CSSを書く場所。
- htmlファイルのheadタグの中のstyleタグの中。
- 個別のhtmlタグの中に埋め込む。
- 別にCSSファイルを作って書く。
などが挙げられます。
「htmlファイルのheadタグの中のstyleタグの中。」はあまり使いませんが、一応書けるので、「ここにも書けるよ」ってのをお伝えします。
簡易的なテストなどで、書くことはあります(手っ取り早いので)。後の2つは実務でどちらも用途によって使いますね。
では早速詳しく解説します。
htmlファイルのheadタグの中のstyleタグの中。
どこなのかコードを書いてお見せした方が早いと思ったので、載せます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ここにか書く。 */
</style>
</head>
<body>
</body>
</html>「ここにか書く！！！」って書いてある所に書きます。
「/* */」これはコメントアウトと言って、挟まれたコードを無効化します。
なので実際は、「<style></style>」このHTMLのタグの間に書きます。スタイルタグとかって呼ばれています。
個別のhtmlタグの中に埋め込む。
この書き方はインラインCSSと呼ばれます。これ以降はインラインCSSと呼んでいきます。
<p style="color:pink;">テストテストテスト</p>この様に、個別のHTMLタグに埋め込むことができます。セレクタは必要ないので、書きません。プロパティと値を指定します。HTMLにスタイル属性をつけることで指定する感じですね。
改行などを入れても良いし複数の指定も可能です。後々詳しく書きますが、優先順位が高いのが特徴です。同じセレクタに違った場所からCSSでスタイルが当たっていたとしても、こちらが優先されます。
例えば、別のCSSファイルから、スタイルが指定されていても、こっちの方が優先です。
(!important)は除く。これは後で説明しますが特別に最も優先される方法があるのです。
別にCSSファイルを作って書く。
この方法が一般的によく使われています。なぜなら、ファイルを分けることで、スッキリとした見た目でコードが書けるからです。一つのHTMLファイルに書いてもOKですが、多くの場合、コードが長くて見づらくなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>この様に、head内にlinkタグを書いて、別の場所にあるCSSファイルを読み込みます。
すぐ上に書いた例では「style.css」というファイルが読み込まれています。
CSSを書いた場所によって優先順位が変わります。
これはとても重要な話しです。適切な文法でCSSを記述することに成功しても、「CSSで書いたスタイルが当たらない」などが起きることは、よくあります。
それを解決するには、「CSSを書いた場所によって優先順位が変わる」ことを知っておく必要があります。ルールは簡単です。まず簡潔にルールを箇条書きします。
CSSの優先順位。
- インラインCSSが優先。
- 次に、後に書かれた方が優先される(上書き。)
この様な順番で優先されます。ではもう少し具体的にCSSの優先順位に関するルールを書いていきます。
インラインCSSが優先。
インラインCSSは優先順位が高いです。手っ取り早く、スタイルを当てたい場合にこれが使われます。基本的に他のどれよりも優先されますが、(!important)よりは優先順位が落ちます。
書き方は後述します。
次に、後に書かれた方が優先される(上書き。)
これは基本的なルールになるので重要です。
p {
color: blue;
}
p {
color: green;
}この様に、二つのCSSが同じセレクタに対して指定している状況では、下に書かれている方が優先されます。この例ではgreenが優先されます。
後から読み込まれたもので上書きされていくイメージですね。なので大枠のスタイルから書いていき、例外的なスタイルを後から書いて上書きしていきます。
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mystyle.css">外部ファイルからCSSが読み込まれている場面です。この時も下に書かれたものが優先です。この例では、「mystyle.css」に書かれているCSSが優先されます。
外部ファイルのCSSとstyleタグで書くCSSは優先順位は同じ。
外部ファイルのCSSとstyleタグで書くCSSは優先順位は同じです。なので、どっちが下に書かれているか？によって優先順位が決定します。あまりstyleタグは使うことがないと思いますが、一応書いておきますね。
!importantが特別的に最優先される。
今まで書いたルールを覆すことができる設定があります。多様すると修正が難しくなるので、使いすぎは避けるべきだと考えてますが、覚えておくと何かと便利です。
p {
color: blue!important;
}
p {
color: green;
}この様な例で、今までのルールだと、下に書かれたgreenの方が優先されると思うかもしれませんが、「!important」を上の様に書くと覆すことができます。この場合はblueが優先されます。
これはインラインCSSよりも優先されます。言わば「最優先」ですね。
CSSを書く場所が同じときは?
CSSは書く場所によって優先順位が異なることをお伝えしてきました。そして同じCSSファイル内では、後で読み込まれたものが優先される(下に書かれたもので上書き)、とお伝えしました。
ですが、その他にもルールがあって、セレクタの指定方法によって優先順位が変わります。
「基本的な優先順位のルール」も存在しています。それは「セレクタ」によって優先順位が変わるというものです。それらについては、「セレクタに関する記事」で詳しく解説しますね。
まとめ
この記事を読むことでCSSの基本的な書き方は、お伝えできたと思います。ですが、より具体的なCSSの書き方が分からないと、実際にwebサイトを作るのは難しいとも思います。
なので、この記事の内容を踏まえた方向けに、より実践的な内容でのCSSの書き方の記事を書いていく予定です。より詳しく知りたい方はそちらをお読み下さい。
それではまた、次回の記事でお会いしましょう！