「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『CSS（シーエスエス）』を学習したい方向けに、
基本的なポイントをまとめてみました！
そもそも『CSS（シーエスエス）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『CSS（シーエスエス）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
また、『HTML（エイチティーエムエル）』は、
『CSS』学習とは切っても切れない基礎知識ですので、
以下の別記事他、『HTML』学習のご紹介ページもぜひ事前にご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
[toc]
全てに共通の書き方！『CSS』の書式『ルール』を学ぼう！
『CSS』の書き方をざっくりお伝えすると、
『HTML』のどの部分の何に『CSS』を適用するか選択し、
その選択した部分をどんなスタイル（デザイン）にするか書き込む、
というイメージです。
以下のHTMLファイルとCSSファイルを例に、
もう少し具体的に見てみましょう。
テスト.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>link要素でCSSを読み込む</title>
<link rel="stylesheet" href="テスト.css">
</head>
<body>
<p>link要素でテスト.cssを読み込んでいます。</p>
</body>
</html>
テスト.css
@charset "utf-8";
p {
border: 10px solid #009900;
}
上記をブラウザ表示させるとこんな感じ。
「テスト.css」というCSSファイルの2〜4行目で、
「テスト.html」というHTMLファイルの9行目、
<p>タグを枠線で囲むスタイルにしています。
CSSファイルの「p { ・・・｝」という部分を、
CSSの基本書式、『ルール』と言います。
この書き方がCSSの基本です。
以下の図も参考にしながら、
しっかりと学習していきましょう！
【図１：CSSの基本書式、『ルール』と各部の名称】
①ルール
「ルール」とは、
セレクターと宣言ブロックがセットになったものです。
一部のプロパティ値を除き、
アルファベットからコロン（:）、セミコロン（;）、スペース等の記号も含め、
すべて半角で記述します。
②セレクター
CSSによるデザイン指定を、
どのHTML要素に適用させるか指定するのが「セレクター」です。
前述の図１を見てみましょう。
「セレクター」は「p」です。
ここで決めたスタイル（デザイン）をHTMLの「p」部分に適用してね〜、
と指定しているわけです。
③宣言ブロック
「 { 」〜「 } 」で囲まれた部分を「宣言ブロック」と言います。
セレクターで指定したHTML部分に、
この「宣言ブロック」内で書かれたスタイルを適用します。
「宣言ブロック」内は、
後述の「プロパティ」と「プロパティ値」で構成されます。
④プロパティ
「プロパティ」とは、
CSSで操作出来るスタイルの定義です。
前述の図１を見てみましょう。
「プロパティ」は「border」です。
「border」は、
枠線のスタイルを整えるプロパティです。
図１はHTMLの「p」部分の枠線を整えるよ〜、
と記述していることになります。
⑤プロパティ値
先述の「プロパティ」だけでは、
「整えるよ〜」と言っているだけで、
「どんな感じに」という部分が欠けています。
「どんな感じに」という部分に該当するのが、
「プロパティ値」です。
図１でいくと、
「10px solid #009900」の部分ですね。
ここで、「p」の枠線を「10px solid #009900」な感じにするよ〜、
と記述しています。
ちなみに、
「10px」で枠線の太さ、
「solid」で枠線のデザイン（点線、二重線…等）、
「#009900」で枠線の色を指定しています。
各プロパティ値の詳細は、
今後学習を進める中で理解していけば大丈夫ですので、
今は全体感を掴んでおきましょう！
⑥宣言（スタイル宣言）
ここまで学習してきた、
④プロパティと⑤プロパティ値をまとめて宣言（スタイル宣言）と言います。
プロパティとプロパティ値は必ずセットで記述します。
まとめ
-
CSSの基本は「ルール」！
-
「セレクター」で、HTMLのどの部分にこのCSSを適用するかを指定する
-
「セレクター」で指定したHTML部分の何を変更するかは、
「プロパティ」で指定する -
「プロパティ」で指定した所を、
「プロパティ値」で具体的なスタイル（デザイン）にする -
「プロパティ」と「プロパティ値」はセットで記述する
いかがでしたでしょうか？
今回は、『CSS』学習初心者の方向けに、
『CSS』の基本的な構造である『ルール』について、
解説をさせて頂きました。
『ルール』をしっかり理解しておけば、
後は具体的なプロパティやプロパティ値のセット（宣言）を、
一つずつ習得していくことで、
HTMLを自分なりに綺麗に整えていけるようになります。
覚えることは沢山ありますが、
焦らず、一つ一つツボをおさえていきましょう！
今後も随時、学習のツボをUPしていけたらと思っていますので、
宜しければご参考下さい。
今回の記事が、
少しでも皆さんのお役に立てたら幸いです！