本記事ではCSSの超基本的な書き方について学ぶことができます。
CSSについて右も左もわからない場合はこちらの記事を読んでみてください↓↓
Contents
CSSとは
CSSとは「Cascading Style Sheet」の略で、ウェブページのレイアウトを整える言語です。
Webページの背景をオシャレにしたり、文字のサイズを変えたり、要素の配置を変更したり。
HTMLだけだと味気のないサイトになってしまいますが、CSSでデザインを施してよりユーザー目線でのウェブページを作成することができます。
CSSを適応させる方法
作成したHTMLファイルにCSSを適応させる方法は、主に3つあります。
- HTMLファイルの<head>タグの中でCSSファイルを読み込む
- HTMLの<head>タグ中の、<style></style>の中にCSSを書く
- HTMLのタグの属性としてCSSを書く
最も一般的で推奨されているのは1番の書き方です。
それでは、それぞれ詳しく解説しましょう。
CSSをheadタグで読み込む
この方法が最もモダンな方法になります。手順は以下のとおりです。
- 「.css」の拡張子のついたCSSファイルとして保存する
- <head> タグの中に<link>タグを用いてCSSファイルを読み込む
<!DOCTYPE HTML>
<html Lang=“Ja”>
<head>
<meta charaet=“UTF-8”>
<title>タイトル</title>
<link rel=“stylesheet” href=“style.css>
</head>
<body>
</body>
</html>↑こちらがサンプルコードです。
<head>タグの中で、<link>タグを用いて記述されています。hlef属性には、CSSファイルのパスを相対パスで記述します。（サンプルの場合は同じディレクトリの中にstyle.cssという名前で保存されている）
パスの書き方がわからない場合はこちらの記事をどうぞ
rel属性には、hrefで指定したファイルと、そのHTMLファイルの関係を記述します。CSSファイルは全てstylesheetとします。
HTMLの<style>タグの中にCSSを書く
<head>タグの中に、<style></style>で囲ってCSSをかくことでも反映されます。通常、ウェブサイトはいくつものHTMLファイルを元に作られますが、この方法でCSSを記述した場合はそれを記述したHTMLファイルのみにCSSが適応されます。
<!DOCTYPE HTML>
<html Lang=“Ja”>
<head>
<meta charaet=“UTF-8”>
<title>タイトル</title>
<style>
h1 { color: rgba(0, 0, 0, 1); }
P { font-size: bold; }
</style>
</head>
<body>
</body>
</html>上はコード例です。styleタグの中にCSSが記述されているのが確認できます。
このようにすると、このHTMLファイルに書かれたh1見出しは黒、段落は太字に固定されます。
HTMLタグの中にCSSを記述する
HTMLのタグの中に「style = “”」の属性を追加してダブルクオテーションの中にCSSを書きます。
<!DOCTYPE HTML>
<html Lang=“ja”>
<head>
<meta charaet=“UTF-8”>
<title>タイトル</title>
</head>
<body>
<h1 style=“color: pink;”>これは見出しです</h1>
<p style=“font-weight: bold;”>これは段落です</p>
</body>
</html>上はコード例です。タグの只中にCSSが記述されているのがわかると思います。
ただし、後2つの方法はほとんど使われることがありません。滅多なことがない限り、外部CSSファイルをhead内で読み込むようにしてください。そうすることで、サイトのメンテナンスを簡単にします。
CSSファイルを書いてみよう
CSSはHTMLありきなので、まず簡単なHTMLファイルから作ってみましょう。
簡単なHTMLファイルを作る
- ディレクトリを作る
- .htmlという拡張子のファイルを作る
- HTMLを記述する
という流れでやってみましょう。
上記の流れを最も早く遂行するには、Visual Studio Codeが最も良いでしょう。なぜならエメットの補完機能がデフォルトで装備されており、HTMLのめんどくさい部分を一瞬で書いてくれるからです。
ディレクトリ（フォルダ）を作ったら、テキストエディタでそのディレクトリを開いて.html拡張子のついたHTMLファイルを作成してください。
余談ですが、VSCodeの場合、「！＋Enter」を押すだけで次のようなコードが挿入されます。
その他にも、いちいちタグの<></>などを書く必要がなく、例えば「h1 + Enter」を押すだけで<h1></h1>が挿入されます。非常に便利なので、あなたにとってなくてはならない友となるでしょう。弘法大師も筆を選ぶ時代なのです。
どれでは本題に戻りますが、次のようなHTMLコードを書いてみてください。（Resultに示されているのが、ブラウザにおける表示です。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>わたしは人間です</h1>
<p>私が人間であることは何によって証明されるのでしょうか？</p>
</body>
</html>CSSを書いてみる
先ほど作成したフォルダの中に「style.css」というファイルを作成してください。そのファイルをテキストエディタで開き、CSSコードを追加していきます。
body {
background-color: black;
}
h1 {
color: pink;
font-weight: bold;
}
p {
color: red;
}というコードを追加してみてください。意味は、「h1見出しはピンクで太字、p段落は赤色」です。
h1とセレクタを指定したら、 { } の中にプロパティと「：；」(コロンとセミコロン）の中に値を指定します。
CSSを書くときのルール
- 半角英数字
- 小文字が良い
- 複数のセレクタを選ぶ場合、カンマで区切る
- 複数のプロパティを指定する場合、セミコロンを付ける
上で示したコード例をブラウザで表示させると次のようになります。（Resultがブラウザでの表示）
See the Pen dyMeZLM by M2RnRT (@m2rnrt) on CodePen.
まとめ
CSSファイルの作り方と適応のさせ方をお判りいただけましたでしょうか？
HTMLはタグで構成されています。CSSはどのタグの要素に対して、どのように装飾するのか指定します。
「どのタグの要素を」に関しては「セレクタ」として、タグの名前や、本記事では出てこなかったclass属性やid属性を指定します。そうしたらカーリーブラケットのカギカッコ「｛｝」の中に、プロパティと値を指定しました。
非常にシンプルで、わかりやすいのがCSSの良い所です。
この記事だと全然わかりやすくないですね．．．
それは君があほなんじゃないか？？
