CSSの基本

HTMLで書いたテキストなどを、
自由にスタイルを決めて素敵にデザインしてあげる時には
CSS（シーエスエス）という言葉で書いていきます。

CSSでは「どのタグの { どこを:どうする; } 」みたいな書き方をします。

たとえば「リンクの { 文字色を:赤くする; }」だったらこんな感じに書きます。

a { color: red; }

CSSの「どこを:どうする;」のどういうスタイルにするのかの部分はいくらでも増やすことができます。
このようにわかりやすく改行を入れて書いたりします。

a {
color: red;
font-size: 18px;
}

このCSSでは
「リンクの { 文字色を:赤くする; 文字の大きさを:18ピクセルにする; }」
ということを書いてます。

こんな感じにCSSで書くと、リンクがこんなふうに表示されます。

ホームページでは、文字の大きさの単位はpx（ピクセル）で書きます。
数字が大きくなるほど文字も大きくなりますよ。

基本的にCSSは、CSS専用のファイルに書いていきます。
ブログのCSS編集ページなんかがそれにあたります。

CSSは、HTMLのファイルに書くこともできるんですよ。
ブログの投稿ページやHTML編集がそれにあたります。
HTMLファイルに書く時は、<style>というタグでCSS全体を囲って書きます。

<style type="text/css">
a {
color: red;
font-size: 14px;
}
</style>

<style>タグを使ってCSSを書く時は、「type="text/css"」
とタグのオプションを入れて「これはCSSのテキストですよー」と書いておきます。

HTMLタグの「style」というオプションを使ってHTMLタグに直接CSSを書くこともできます。

さっきのリンクのCSSを　HTMLタグに書いてみたらこんな感じです。

<a href="リンク先のURL" style="color: red; font-size: 18px;">リンクさせるテキスト</a>

オプションの値の部分にCSSの「どこを:どうする;」を書いていきます。
タグに直接書いているので「どのタグを」の部分は必要なくなります。
また、直接書いたタグの部分のみ、CSSで書いたスタイルになります。

１つのページにリンクがたくさんあって、
「ここの部分リンクだけ赤くしたい！」という時は、
タグに直接CSSを書く方法を使うのも良いのですが
タグに名前をつけて、その名前のついたタグに対してCSSを書いていく方法もあります。

まずは「class（クラス）」というオプションを使ってタグに好きな名前を付けます。
今回は「attention（注目）」という名前を付けてみました。

<a href="リンク先のURL" class="attention">リンクさせるテキスト</a>

そして、CSSを書く時は「どのタグの」の部分をこんな感じで書いていきます。

a.attention { color: red; }

「タグ名.クラス名」の形式で書けば
「attentionというクラス名が付いたリンクのタグ」という意味になりますし
「.クラス名」とだけ書けば
「attentionというクラス名が付いたタグ全部」という意味になります。

HTMLとCSSの基本がわかりましたか？
「全然わからないよー」という方でも大丈夫です。
HTMLやCSSは実際に書いてみて覚えていくものなので、
よくわからなくても使っていくうちに自然に覚えることができますよ！