WEBサイトを作る上で欠かせないのがHTMLとCSSですが、プログラミング初心者の場合
・HTMLとCSSって何が違うの？
・どっちか片方だけじゃだめなの？
と考えたこともあるのではないでしょうか。
そこで今回は、
・CSSとは何か
・CSSを書く場所
・CSSの基本的な書き方
をご紹介します。
この記事を読めば、CSSがどんな役割で何のためにあるのかがわかっていただけるはず。CSSについて知りたい方はぜひ参考にしてみてくださいね。
目次
CSSとは何か
CSSとはCascading Style Sheets（カスケーディングスタイルシート）の略で、文章にデザインを加えることでWEBサイトの見た目を整える言語です。
WEBサイトを作る言語にHTMLがありますが、HTMLだけだとWEBページのデザインを細かく指定できません。
また、以前はHTMLのタグ自体で見た目を変更するスタイルの指定も行われていました。
例えば、
|
1 |
<font size="25px" color="orange">テキスト</font> |
のように、HTMLタグで文字の色や大きさも指定していたのです。
ですが、現行のHTML5では<font>タグのようにスタイルを指定するタグは廃止され、CSSで見た目を変更するのが基本となっています。
・HTMLはWEBページの基本的な構造を書く言語
・CSSは見た目の変更を指定する言語
と、はっきりと役割がわかれているのです。
CSSでできることとは？
CSSを使うと、
・リンクをボタンにする
・背景や文字の色を変える
・中央寄せや左寄せなどレイアウトを変える
など、様々な見た目を表現できます。
もしCSSを使わずにHTMLだけでWEBページを作った場合、文字と画像が並んだだけのとても簡素なものになってしまいます。
例えばこのブログのCSSを無効にすると、
上から文字と画像を並べただけのとてもシンプルな見た目になってしまいます。
CSSを使って見た目を整えると、
このように画像や文字がバランスよく配置され、整理されたデザインになります。
普段見ているWEBページのデザインは、CSSを駆使することで実現しているのです。
CSSを書く場所
役割がわかれているHTMLとCSSですが、実際にHTMLとCSSを連携させたい時
どこにCSSを書けばいいの？
と思いますよね。
そこで、いくつかある書き方やその特徴をご紹介します。
スタイルを指定したい要素にstyle属性を追加する
<h1>や<a>など、要素にstyle属性を追加するとスタイルを指定できます。
style=”プロパティ : 値 ; ”
のように記述します。例えば、
|
1 |
<h1 style="font-size:30px; color:orange;">CSSとは</h1> |
のように、スタイルを指定したい場所に直接書けばいいため一見わかりやすいように感じます。
ですが、この方法は
・1つ1つの要素にCSSを書く必要がある
・たくさん書くとコードが見づらくなる
・優先度が高くなってしまう
という理由から、WEB制作の現場では推奨されていません。
HTMLは構造を担当、CSSは見た目を担当といった役割もなくなってしまっています。
| 書く場所 | HTMLファイル内のスタイルを指定したい要素のstyle属性 |
|---|---|
| 推奨度 | ☆ |
style要素でHTMLファイルにまとめて追加する
HTMLファイルのhead要素の中にstyle要素を記述することで、そのHTMLファイルにのみ反映されるスタイルが設定できます。
<style>〜</style>
の中に指定したいスタイルをまとめて記述します。
例えば、このように
HTML
|
1 2 3 4 5 6 |
<style> .title { font-size : 30px; color : orange; } </style> |
CSS
|
1 |
<h1 class="title">CSSとは</h1> |
HTMLとCSSをわけることができるのが特徴です。
ただしこの方法は、<style>〜</style>を記述した1つのHTMLファイルにしか反映されません。HTMLとCSSがわかれているものの、複数のHTMLファイルに同じスタイルを指定したい時などに不便です。
| 書く場所 | HTMLファイル内のstyle要素 |
|---|---|
| 推奨度 | ☆ |
link要素で外部CSSファイルを呼び出す
スタイルを記述したCSSファイルをHTMLファイルとは別に作成し、HTMLファイル内から呼び出す方法です。
HTMLファイルのhead要素内にlink要素を記述し、外部CSSファイルを指定します。
<link rel=“stylesheet” href=“外部CSSファイル”>
実際にHTMLとCSSを書いた例を見てみましょう。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”UTF-8″> <title>CSSの練習</title> <link rel=“stylesheet” href=“style.css”> </head> <body> <h1 class="title">CSSとは</h1> </body> </html> |
CSS
|
1 2 3 4 |
.title { font-size : 30px; color : orange; } |
このように、HTMLとCSSを別ファイルとして完全にわけて管理できるため、複数のHTMLファイルで同じスタイルを使うことができます。
スタイルを修正する場合にも、1つのCSSファイルを修正すれば、同じCSSファイルをリンクしているHTMLファイルが全て修正されます。
管理がしやすいので、CSSを使う場合はこの方法を使うようにしましょう。
| 書く場所 | 外部CSSファイル |
|---|---|
| 推奨度 | ☆☆☆ |
CSSの基本文法
CSSにはセレクタ・プロパティ・値という要素が存在し、組み合わせることでスタイルを指定できます。
スタイルを指定する際は、以下のルールに沿って記述します。
セレクタ {
プロパティ : 値 ;
}
・最初にセレクタ名を指定
・{ } で囲まれた部分にプロパティと値を指定
・プロパティと値は : （コロン）で区切る
・複数のプロパティ・値を指定する場合は ; （セミコロン）
例えば、以下の例を見てみましょう。
|
1 2 3 4 |
h1{ font-size : 30px; color : orange; } |
これは<h1>タグの
・font-sizeを30px
・colorをorange
にするという意味です。
「h1」がセレクタ、「font-size」がプロパティ、「30px」が値にあたります。
セレクタはタグ名以外に色々な指定ができます。
CSSの優先順位
CSSには反映される優先順位というものが存在します。
CSSは
・外部ファイルをリンク
・HTMLファイル内に直接書く
と色々な場所に書けたり、
・id
・class
・!important
など指定方法がいくつもあるため、1つの要素にたくさんスタイルを指定できてしまいます。
「もし重複する指定があった場合どれが優先されるのか？」
というのは、CSSを書いている時に悩まされるポイントです。
こちらの記事ではCSSが効かない時に確認するポイントとして、CSSの優先順位についてまとめています。
CSSが効かない！？確認すべきポイント3つを解説！
CSSの優先順位がわからない時は参考にしてみてください。
まとめ
以上、CSSについて
・HTMLとCSSは何が違うのか
・CSSが書ける3つの場所
・CSSの基本文法や基礎知識
をご紹介しました。CSSが何なのか悩んでいた方の参考になれば幸いです。
