はじめに
CSSはHTMLを学習する際にセットで勉強する言語です。
習得難易度も高くありません。HTML同様簡単に確認ができるので、どんどん作成していきましょう。
HTMLファイル
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title>タイトル</title>
</head>
<body>
<h1>サイトの見出し</h1>
<p class="Paragraph">サイトの本文</p>
</body>
</HTML>CSSファイル（test.css）
h1 {
font-size: 24px;
font-weight: bold;
color: #ff7800
}
このようにHTMLの文字に色を付けたり大きさを調節できたりします。
CSSの基本的な書式
CSSを作成するために必要な基本的な書式について学習していきます。
基本的な名称
はじめにで挙げたCSSについてみていきます。
セレクタ
h1 {
}
セレクタとはHTMLからCSS適応の対象となる要素を選択している部分です。
対象となる要素はHTMLのタグだけではなくタグの属性も指定することが可能です。
上記のCSSではHTML内のすべての<h1>要素を選択しています。
HTML全体を指定する際にはセレクタは「*」を使用して指定します。
プロパティ
font-size:
font-weight:
color:
プロパティとは適応するCSSのスタイルの種類を決定する部分です。
上記では「font-size」「font-weight」「color」はそれぞれ「文字のサイズ」「文字の太さ」「色」を設定する項目名です。
見た目やどのようにしたいかに合わせてプロパティを選択してセレクタ内部に追加していきます。
プロパティの最後に「:」（コロン）を付けます。
値
24px;
bold;
#ff7800
値とはセレクタに適用するプロパティをどのように変更するのかの具体的な決定をする部分です。
設定する値はプロパティによって異なり、数値のこともあれば、あらかじめ決められている単語の場合もあります。
値の終わりには「;」（セミコロン）を付けます。しかし、最後の行のセミコロンは省略可能です。
値には「24px」の「px」などの特別な単位を使用することがあります。
よく使う単位
| 単位 | 説明 |
|---|---|
| px（ピクセル） | モニタの1ピクセルを1pxとする絶対値の単位。 |
| %（パーセント） | ブラウザのデフォルトフォントサイズを100%、またパーセントによる幅や高さの割合指定。 |
| em（エム） | 適用する要素の大文字のMのフォントサイズを1とする相対値の単位。 |
| rem（ルートエム） | ルート要素（html）の大文字のMのフォントサイズを1とする相対値の単位。 |
CSSの書式について
ここからは実際に書いていく際に注意する点を学習していきます。
ルール
HTMLの全体を設定するものや、スタイルの適用条件を指摘するものなど、個々の要素には直接働かないものがあり、そういったものをアットマークルールといいます。
アットマークルールには、CSSファイルの文字コード方式を宣言するものや、パソコンとスマートフォンでページレイアウトを切り替える（レスポンシブ対応）に使う「メディアクエリ」などがあります。
@charset “UTH-8”;
文字コードの宣言
@media (min-width: 768pc) {
html {
font-size: 14px;
}
}
レスポンシブ対応
コメント文
CSSはHTML同様コメント文を記載することができます。
CSSのコメントは「/*」で始まり「*/」で終わります。1行に収めても複数行にまたがっても問題ありません。
/* 1行のコメント */
/*
複数行にまたがるコメント
複数行にまたがるコメント
*/
最後に
CSSの基本的な構文はこれだけです。HTMLと合わせて何度も作成して慣れていきましょう。
また、HTMLとCSSを駆使することができればアニメーションを組み込んだWEBサイトを作成することも可能です。
コメント