WEBサイトをメイクアップ！お母さんにもできるCSS入門【第1回】

 
どうもWEBサイト制作入門です。
前回はWEBサイトを構築するために必要な『HTML』について説明していきましたね。
 
 

 
 
第2回の今回はHTMLで作ったWEBサイトにデザインを入れる言語である『CSS』について勉強していきましょう。
 
 


 
 
今回もなるべく難しいことは抜きにお母さんにも分かりやすいように解説していこうと思います。
 

CSSとは？

 
『CSS』とは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略です。
 
 

 
 
どういった機能なのかというと、WEBサイトにデザイン入れていくために使用する言語です。
 
サイトの文字を赤にしたり、青にしたり大きくしたりできます。
 
 


 
 
文字以外にも画像などの配置や大きさなどなどたくさんのことができます。
 
 
簡単に例えると、HTMLで”顔”を作ったら、そこに”メイク”をするのがCSSです。
「CSS」＝「WEBサイトのメイク」といって感じですね。
 
 


 
 
(実際の顔にもCSSが使えたらなぁ)

 

CSSの書き方

 
それではさっそく実践を交えながらCSSの書き方について解説していきましょう。
 
CSSを書くときにまず覚える単語は3つです。
 
 
『セレクタ』、『プロパティ』、『値』です。
 
 

 
 
我流の日本語訳してみます。
 
 
『どこに』、『なにを』、『どのように』ですね。
※これはあくまでCSSを理解しやすくするための我流なので、本当にこのような訳をするわけではないです。
 
 
実際にCSSの一例を。
 

 
上記がCSSの形式になります。ちなみに意味は『<p>タグの文字を赤くして』と書いてあります。
最初にセレクタ、{}で挟んで次にプロパティ、「：」を入れて、三つ目に値、最後に「;」で締めます。
 
 
先ほどの我流日本語訳をあててみます。
 
 
『どこに』＝　<p>タグに
『なにを』＝　文字の色を
『どのように』＝　赤くして
 
 
といった感じになります。
このように日本語で考えると案外簡単なものですね。
 
そうすると文字が赤くなります。
 
 


 

『id』と『class』の使い方

 
先ほどのCSSの書き方だけだと少し問題点があります。
それは<p>タグで挟まれたすべてのテキストが赤くなってしまいます。
例えば2番目のテキストだけを赤くしたり、文字を大きくしたりしたいときがありますよね。
 
この場合はCSSを指定したいタグに名前を付けます。
名前の付いたタグを指定してCSSを書けば、指定されたタグのみCSSを適用させることができます。
 
 
方法は以下です。
 

 
名前の付け方には2種類あります。
『id』と『class(クラス)』を使用する方法です。
名前を付けたいHTMLタグに『id=""』、『class=""』を付け加え、『""』の間に半角英数字で好きな名前を付けます。今回は『aka-big』という名前を付けました。
 
 

 
 
次にCSSです。
 
idの場合

idのついたタグを指定する際は『#(シャープ)』を使い、続けて先ほどつけた名前を指定します。
 
 
classの場合

classの場合は『.(ドット)』を使い、続けて先ほどの名前を指定します。
 
 

 
 
そして結果は以下です。
 

 
この方法を使用すれば特定の部分だけにCSSを適用することが可能です。
ちなみにidとclassには守らなければいけないルールがあります。それは、
 
 
『id』は"同じ名前を1か所"にしか使用しません。
『class』は"同じ名前でも数か所"に使用することができます。
 
先ほどのコードを例にすると、「id名=aka-big」は他のところには使えません。
逆に「class名=aka-big」は複数のタグに使うことができます。
 
 
idというのは「固有の名前」を表すものです。HTML内のたった一つのタグを指定するために使います。classは逆にどこかのタグを指定するためには使わないので、何個でも同じ名前のclassを指定できます。
 
 



 
 
ぶっちゃけ同じ名前のidでも複数のタグに使うことは可能ですが、ルールとして上記のことを守って書かないとのちのち面倒なこと(アンカーリンクの混乱など)になりますし、HTMLの文法として間違っています。ですのでこのルールは守って使いましょう。

 
 

これが基本的なCSSの書き方になります。
覚えておきましょう。
 
 
ちょっと長くなりましたので、続きは次回にしましょう。

 
 
質問や意見がありましたらお気軽にツイッターの方へどうぞ。

 
ユトピのツイッター
@yutopi60pa