CSSの基本的な書き方「セレクタ」「プロパティ」「値」を理解する

CSSの基本的な書き方「セレクタ」「プロパティ」「値」を理解する

CSSの基本的な書き方に使用する「セレクタ」「プロパティ」「値」の使い方を理解しながら実際にCSSをどのように書けばいいのか理解できるようにします。

セレクタ、プロパティ、値はCSSの書き方には必ず必要になることなので、基本のCSSの書き方を覚えておきたい初心者さんや独学でCSSを学ぼうと思ってる人に少しでも参考になればと思い記事にしました。

 

CSSとは何か基本を理解する

 

CSSとは「Cascading Style Sheets」の頭文字をとって「CSS」と言います。

Cascadingを翻訳すると「階段状の連続する滝」とか「縦つなぎ」を意味します。

基本的にCSSファイルの読み込み方は滝のように上から順に読み込みをします。そのため下の記述の方が後から追加指示になるので下の方が優先されます。

そしてStyle Sheetはスタイルを書くシート、つまり私たちがCSSを書いてHTMLページのデザインをするWeb上のシートのことを意味します。

スタイルを書いたシートを滝のように上から下に順番にブラウザが読み込みできるようにスタイルを書くことがCSSの基本なのだと「Cascading Style Sheets」の用語から理解ができます。

 

そしてCSSでHTMLページのデザインをすることについてはHTMLの存在が大切です。

 

 

HTMLはページの構造を作る骨組みを作成するためには必要なことですし、HTMLの内部構造がしっかりしていることでCSSの書き方も楽になる場合があります。ですが見た目だけは骨組みだけなので上記画像のようにliタグでメニューにするにもリストのままですし、画像も見切れてしまいます。

 

 

しかしCSSの書き方を理解して書けるようになるとHTMLページにデザインや位置調整をして見やすいHTMLページにすることができます。そのためCSSとはHTMLの骨組みの見栄えを整えるための装飾を加えるのがCSSの役目です。

 

Advertisement

 

CSSの書き方と使用する構造の各名称

 

HTMLページをCSSでデザインするときには主に3つのことがCSSでできることです。

 

  • ボックスに含まれるコンテンツの表示を操作
  • ボックスそのものの表示を操作
  • ボックスの配置やボックス同士の配置の操作

 

 

ボックスというのはHTMLの表示領域になる要素を選択して、選択した要素にスタイルを適用してHTMLページをデザインしていくのですが、CSSデザインする書き方には基本になる構造とその組み立てるための各名称があります。

 

 

上記画像のCSSはHTMLのp要素を選択して背景カラーをグレーにするというルールをセットしています。

ルールセットにはCSSの書き方に必要な「セレクタ」「プロパティ」「値」を書くことで「どこに」「何を」「どのように」を指定できて一つのセットとして構造を作ります。

 

セレクタの書き方

 

セレクタの基本的な書き方はHTMLの要素になるタグを選んで指定します。HTMLのh2タグで見出しにしてる要素のスタイルを変えたいと思ったらCSSのセレクタにはh2とタグ名を書きます。

 

h2{
 color: pink
}

 

HTMLのタグ名をセレクタとして選択する書き方は「タイプセレクタ」と言います。そしてタグ名で指定したセレクタはHTMLの要素の「どこにCSSを適用するか」を決定する役目をするのです。

CSSのセレクタの書き方はタイプセレクタが基本的な書き方ですが、他にも色々な書き方があります。

色々な中でもよく使用するセレクタの書き方は「classセレクタ」と「idセレクタ」です。

 

Advertisement

 

classセレクタの書き方

classセレクタの書き方は以下のHTMLとCSSのコードをセットで見て頂くと理解がしやすくなります。

 

HTML

<div class="example"></div>

 

HTML側にはスタイルを適用するタグにclass属性を指定します。

 

CSS

.example {
  color :pink
}

 

そしてCSS側にはHTML側のclass属性の属性値の部分、上記HTMLコードでは「example」ですが属性値をCSSで「.ドット」をセレクタの前につけて書きます。

そうすることでHTMLで同じclass指定が複数ある場合でもCSS側で書くセレクタの中のプロパティと値がクラスに別れて適用されるのです。

 

idセレクタの書き方

idセレクタの書き方です。

 

HTML

<div id="example"></div>

 

HTML側にはスタイルを適用するタグにid属性で値を指定して書きます。

 

CSS

#example {
  color :pink
}

 

そしてCSS側にはHTMLで指定したidの属性値をセレクタとして書きますが、書き方はid属性値の前に#シャープを書きます。

idセレクタを書くときの注意点は、セレクタで指定した「id名」は一つのHTML内で一度しか使用ができません。それなのでidセレクタで選択できる要素は一つだけになります。

 

CSSのセレクタの種類は他にもあるのでリファレンスでご確認ください。

 

 

 

プロパティの書き方

 

CSSのプロパティはセレクタに指定したHTMLの要素に「何を」デザインするかの指定を書く部分です。

CSSの書き方のルールをわかりやすくした「どこに(セレクタ)」「何を(プロパティ)」「どのように(値)」の「何を」の部分になり、大まかにいうと表示の操作と設定できる項目の一つひとつをプロパティと言います。

プロパティの書き方はCSSのセレクタの後に波カッコを書いた中にスタイルを変更したいプロパティを書きます。

 

h2 {
  color: pink;
}

 

例えばh2の見出しのカラーを変えたい場合のプロパティの書き方は、タイプセレクタでh2を指定してから波カッコを書いた中にプロパティになる「color」を書きます。

書きときにはCSSが見やすいようにセレクタと波カッコの間に半角スペースを入れて改行してからプロパティを書くと見やすくなります。

CSSのプロパティに指定できる種類は数多くあります。

 

  • カラーを変更できる「color」
  • 背景カラーを変える「background-color」
  • 要素の余白調整をする「margin」

 

など他にも覚えきれないほどの種類があるのでCSSリファレンスを活用して使用できるプロパティを確認しておくことをおすすめします。

下記に目的別で見ることができるプロパティのCSSリファレンスを貼っておきます。

 

 

Advertisement

 

値の書き方

 

CSSの値は指定したプロパティを「どのようにして」スタイルを適用させるかコントロールするために書きます。なのでCSSで書く値はプロパティとセットで書くということがほとんどです。

値の書き方はプロパティの後にコロン:を書いてコロンの次にプロパティの値を書きます。

 

background-color : #aab1ff

 

コロンが抜けてしまうと正しく動作しないことがあることに注意してください。

またコロンの前後には半角スペースを入れることがあります。これはCSSコードを見やすくするためですが、一般的にはコロンの後ろ、または前後に半角スペースを入れます。

そしてスタイルを適用したいプロパティが複数になる場合は値も複数になるので値の最後にセミコロンを書いてプロパティと値のセットの区切りをつけます。

 

h2 {
 color: #aab1ff;
 background-color: #aab1ff;
}

 

設定する値はプロパティによって書き方が異なります。CSSでHTML要素のカラーをスタイルしたいならプロパティにcolorを書いて値を16進数のカラーコードを書くとか、余白を作るならmarginプロパティを書いて値を10pxにするとかの書き方があります。

 

セレクタ、プロパティ、値を使う3つのCSSの書き方

 

次はCSSの「セレクタ」と「プロパティ」と「値」を使う書き方の理解を深めてみてください。

CSSの書き方は3つの書き方があります。

3つのCSSの書き方には今回説明しているセレクタ、プロパティ、値を使うことになるのですがCSSの書き方に少し違いがあるので使い分けできるように説明していこうと思います。

 

Advertisement

 

CSSを外部ファイルで読み込む書き方

 

3種類あるCSSの書き方の一つ目は、CSSを外部ファイルで読み込んだ時の書き方です。

HTMLファイルとは別にCSS専用のファイルを作ってCSSを書きます。CSSを書くシート、これがスタイルシートというやつですね。

書き方はスタイルをあてたいHTML要素のタグ名をセレクタに指定してプロパティと値を指定する書き方をします。先述した書き方と同じで以下のような書き方をします。

 

p {
 margin-bottom: 0px;
 background-color: #0000ff;
}

 

そして書いたCSSコードをHTMLファイルで読み込めるようにする必要があります。スタイルシートのファイル名にするときは拡張子は「.css」です。

そして作成したCSSファイルをHTMLの<head></head>の中にlinkタグでCSSファイルとHTMLファイルを繋げます。

 

 

CSSを外部ファイルで読み込んでスタイルを書くと、スタイルシート内はCSS記述しかないのでセレクタとプロパティと値が見やすくなり管理しやすくなります。

そのため後から、ある要素のスタイル変更をしたいときにも他のプロパティや値と比較することもすぐにできるため便利な書き方ができます。

 

styleタグを使用したCSSの書き方

 

次のCSSの書き方はstyleタグを使用した書き方です。

styleタグとはスタイルシートを記述するためのHTMLタグです。

 

<head>
<meta charset=”utf-8″>
<title>test</title>
 <style>        
  body {           
  background-color: #ffd600
 }
 </style>
</head>

 

CSSを書くときのセレクタとプロパティと値の指定の仕方は外部ファイルで読み込んだときの説明と同じ書き方です。

書き方の異なることは、HTMLファイルの<head></head>の中で<style></style>タグで囲んだ中にスタイルを指定する書き方をすることです。

styleタグを使用したCSSの書き方は、HTMLとCSSを一つのファイルで管理できるので一枚のページだけの短いコンテンツ作成ならばHTML要素も探しやすく、すぐにCSSでプロパティの指定もしやすいので活躍する書き方になるのではないでしょうか。

 

インラインCSSの書き方

 

最後にインラインCSSの書き方です。

インラインでCSSを書くときは、これまでの説明とは少し違ってセレクタを指定しません。

セレクタを使用しないというかHTMLの要素に直接CSSを記述してスタイルをあてる書き方なので元からHTMLページで書いてるタグにstyle属性をつけてCSSを書きます。

 

インラインCSSの書き方は以下のコードのように書きます。

 

<p style="color:red;">インラインcss</p>

 

例えばHTMLタグのpに直接に属性としてstyle属性を書いてstyle属性の属性値としてCSSのプロパティと値を書きます。

このときプロパティを書いた後にはコロンを書き、値の後にはセミコロンを書きます。

 

<p style="color:red;text-align:center;">インラインcss</p>

 

複数のCSSを指定する場合にはセミコロンで区切って書きます。

 

まとめ

 

CSSの書き方で「セレクタ」「プロパティ」「値」の理解をしてからCSSの3つの書き方を紹介しましたが、最終的にCSSの書き方の理解が深まるのは実際にCSSを書いてHTMLページをデザインしてみることが一番の近道です。

もっとCSSの書き方が理解できるための最初のステップの手助け的な記事になればと思い書いた今回の記事でした。

CSSカテゴリの最新記事