CSS 基礎 | 初心者

今までの学習を整理するための記事。

CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、HTMLの要素をどのように修飾するかを指示する仕様の一つ。

直訳すると、段階的に連なった様式シート…?
要はHTMLの要素に対して色々指示することで、webサイトの見た目を変える時に使うやつです。
HTMLについては前回の記事で触れました。

実際にCSSを書く時はセレクタに対してプロパティと値を指定する形で書きます。
日本語にしたら、「HTMLの、どこの何をどうするか」と言う感じだと思います。

「どこ」に該当するのが「セレクタ」で、
「何」に該当するのが「プロパティ」で、
「どうする」に該当するのが「値」です。

それらを次の文法に従って書きます。

セレクタ{
プロパティ:値;
}
(HTMLをCSSで装飾する方法はいくつかありますが、ここで紹介するのはHTMLとCSSを別々のファイルで保存し、ファイルの関連付けを行うことでCSSを適用させる方法です。ファイルの関連付けは後で説明します。)
セレクタにはさまざまな種類があります。
その中でよく使われるものをいくつか紹介します。
要素を指定
HTMLのタグを指定することで装飾する範囲を指定します。 タグを指定するときは、HTMLの<ここの部分></ここの部分>に書いてある文字を書きます。
HTML
<h1>見出し</h1>
<p>テキスト</p>
CSS
p{
color:#FF0000;
}
ブラウザ上では次のように表示されます。
見出し
テキスト

このCSSのコードは、「pという要素の文字の色をカラーコード#FF0000(赤)にする」という意味です。セレクタでpタグを指定しているので、<p></p>で囲まれている「テキスト」という文字だけ赤になっています。

IDを指定

HTMLのタグにはIDと呼ばれる名前のようなものを付けることが出来ます。
タグに付けたIDを指定することで装飾する範囲を指定します。
IDを指定するときは、HTMLの<タグ id=”ここの部分”></タグ>に書いてある文字の先頭に「#」を付け足して指定します。

HTML
<h1 id=”midasi”>見出し</h1>
<p>テキスト</p>
CSS
#midasi{
color:#00FF00;
}
ブラウザ上では次のように表示されます。
見出し
テキスト

このCSSのコードは、「midasiというIDの文字の色を緑(#00FF00)にする」という意味です。セレクタでmidasiというIDを指定しているので、IDがmidasiのタグで囲まれている「見出し」という文字だけ緑になっています。

CLASSを指定

HTMLのタグにはCLASSと呼ばれる名前のようなものを付けることが出来ます。
タグに付けたCLASSを指定することで装飾する範囲を指定します。
CLASSを指定するときは、HTMLの<タグ class=”ここの部分”></タグ>に書いてある文字の先頭に「.」を付け足して指定します。

HTML
<h1>見出し</h1>
<p class=”text”>テキスト</p>
CSS
.text{
color:#0000FF;
}
ブラウザ上では次のように表示されます。
見出し
テキスト

このCSSのコードは、「textというCLASSの文字の色を青(#0000FF)にする」という意味です。セレクタでtextというCLASSを指定しているので、CLASSがtextのタグで囲まれている「見出し」という文字だけ青になっています。

IDを指定する方法と似ていますが、先頭に付ける文字が「#」か「.」の違いがあります。また、CLASSは複数のタグに同じCLASSを付けることが出来ますが、IDは1つのタグにしか付けることが出来ません。

セレクタやプロパティはこの他にもたくさんあります。ここで全てを紹介する事は出来ないし、自分自身そんなに沢山知らないのでこの記事ではここまでにします。

次の記事では別々のファイルとして作成したHTMLとCSSの関連付を行ってみたいと思います。

コメント

タイトルとURLをコピーしました
Close Bitnami banner
Bitnami