HTMLの学習が終わり、いよいよ次はCSSの学習になりました。
CSSはHTMLで作成した基本の形に様々な装飾をすることができるということで、味気なかったwebページが少しでも華やかになればいいなと思っています。
今回作成したページはこのようなページになります。
（CSS指定前）
（CSS指定後）
今回はCSSのスタートだったので、CSS用のスタイルシートの作成方法や色・枠などの指定方法を学びました。
CSSスタイルシートの作成
HTMLのシートに直接CSSを書き込むこともできますが、CSSを別のスタイルシートにしてLINKさせる方法がスタンダードです。
HTMLのシートの<head>の部分に<link>を書き込みます。
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheets/○○.css">
<title>タイトル</title>
</head>
このように<link>タグを書き込めばOKです。また、書き込んだ後に、windowsならctrlを押しながら<stylesheets/○○.css>の部分をクリックすれば、新しく指定した場所にCSSのスタイルシートを作成することができます。
ボーダースタイル
border-styleの基本
ボーダースタイルは、枠線のスタイルを決めるCSSです。何も指定しない場合はnoneを指定したのと同じで、枠なしになっています。枠をあえて無くす時に（none）を使うと枠がなくなります。
他に、一本の直線（solid）や点線（dotted）などの枠線のスタイルを指定できます。さらに、２つのスタイルをCSSに書くことで、スタイルを組み合わせた枠を作ることもできます。詳しくはMDNで確かめてみるとよいです。
色の指定
文字の色を指定する
文字の色を指定する場合は、colorというプロパティを使います。
例えば、bodyで全体の文字の色を指定する場合は、
body {
color : 色の指定 ;
}
という感じでコードを書きます。
色は、ｈｔｍｌ5では色の名前（例えば red、 blue など）で指定することもできますし、光の三原色を使った（RGB）で指定することもできます。
RGBを使用する方法は４つあります。
color : #FF00FF ;
＃の後に１６進数の００～FF（２５５）で光の強さを指定して色を決める
color : #F0F
＃の後の色の指定が００やFFのようにゾロ目の場合は、それぞれを１回ずつの３桁に省略して色を決める
color : rgb(255, 0, 50) ;
rgb( )の中に０～２５５の数字で強さを指定して色を決める
color : rgb(100%, 0%, 50%)
rgb( )の中に０％～１００％で色の強さを指定して色を決める
さらに、色を指定した後、そこにカーソルをもっていくと色を見ながら指定することもできます。（↓こんな感じです）
background（背景）の色を指定する
背景色を指定する場合は、background-colorを利用して指定することができます。
画面全ての背景色を指定する場合は次のようなコードになります。
body {
background-color : 色の指定;
}
これで、body（webページ全体）の背景色が指定できます。
画像を貼り付けて背景に指定する
背景に画像を使う場合は、background-imageを利用して指定することができます。
背景に画像を指定する場合は、次のようなコードになります。
body {
background-image: url(画像のある場所の指定);
}
このコードだと、画像がページ全体に繰り返し表示されます。画面いっぱいに画像を指定したい場合はこれでOKですが、繰り返したくない場合は、次のコードを書きます。
background-repeat: no-repeat;
バックグラウンドリピートでノーリピートをしていすると、一度だけの表示になります。
この方法を使って、背景に自分のお気に入りの画像を貼り付けるのもいいですよね。
セレクター
CSSを使って様々な装飾をしてくためには、セレクターの指定の方法を理解する必要があります。セレクターとは、指定する場所のことだと理解すればいいでしょう。
具体的なコードの場所は
セレクター（どこ）｛ プロパティ（何） ： 値（どうする） ； ｝
となります。「どこに、何を、どうするのか」を書いていくときの、「どこ」にあたるのが、セレクターということになります。
セレクターとして３つ紹介します。
要素セレクター（bodyやh1など）
body { }
IDセレクター（タグの中にidを指定する）
#（ID名） { }
クラスセレクター（タグの中にclassを指定する）
.（クラス名）{ }
セレクターを使用することで、必要な部分に必要な装飾をすることができます。ここの部分だけ色を変えたいとか、この種類はボーダーで囲みたいとか、セレクターを理解しておくと思い通りのページ作りができるようになってきますね。
まとめ
今回は、CSSの基礎的な書き方の学習でした。セレクターに何をどうするのかを指定することで様々な装飾をすることが可能なんですね。
色と枠だけでも、HTMLだけのものに比べて見やすく、伝わりやすいwebページにすることができます。
さらに学習を進めて、もっと見栄えのするものにしていきたいところです。
ではまた。
