2016/08/24

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

436590073d5d0e8de52509307382662d_s

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


お母さん
タグで挟んでいくのよね!

ユトピ
そうそう!タグで挟むとパソコンさんがHTMLとして認識してくれるんだよ!



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


お母さん
英語やめて。

ユトピ
さ、さーせん



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

CSSとは?

0b4d698786e2034f6caca003c610b247_s

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


ユトピ
まぁあまり覚える必要はないです。



どういった機能なのかというと、WEBサイトにデザイン入れていくために使用する言語です。

サイトの文字をにしたり、にしたり大きくしたりできます。


お母さん
すごいわ!

ユトピ
CSSできるやん!



文字以外にも画像などの配置や大きさなどなどたくさんのことができます。


簡単に例えると、HTMLで”顔”を作ったら、そこに”メイク”をするのがCSSです。
「CSS」=「WEBサイトのメイク」といって感じですね。


お母さん
CSSがないサイトは女の子のすっぴんと同じなのね!みんなに見せられないわ!

ユトピ
そんな感じ!現実では濃すぎるメイクはアレだけど、サイトの場合はどんどんCSSで盛っていった方がいいんだよ!



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

CSSの書き方

01552471f5b59de23f62dc678ca48a0f_s

それではさっそく実践を交えながらCSSの書き方について解説していきましょう。

CSSを書くときにまず覚える単語は3つです。


『セレクタ』『プロパティ』『値』です。


お母さん
は?

ユトピ
い、いまから説明するから怒らないで・・・。



我流の日本語訳してみます。


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


実際にCSSの一例を。

css

上記がCSSの形式になります。ちなみに意味は『<p>タグの文字を赤くして』と書いてあります。
最初にセレクタ{}で挟んで次にプロパティ、「」を入れて、三つ目に、最後に「;」で締めます。


先ほどの我流日本語訳をあててみます。


『どこに』= <p>タグに
『なにを』= 文字の色を
『どのように』= 赤くして


といった感じになります。
このように日本語で考えると案外簡単なものですね。

そうすると文字が赤くなります。


お母さん
CSSの文法通りに書けばサイトをメイクアップできるのね!

ユトピ
馴染みないと難しくみえちゃうけど、英語みたいに文法を守ればすぐにできるようになるよ!

『id』と『class』の使い方

0bb07053d8ae5d10a1b873d52b0cdb6a_s

先ほどのCSSの書き方だけだと少し問題点があります。
それは<p>タグで挟まれたすべてのテキストが赤くなってしまいます。
例えば2番目のテキストだけを赤くしたり、文字を大きくしたりしたいときがありますよね。

この場合はCSSを指定したいタグに名前を付けます。
名前の付いたタグを指定してCSSを書けば、指定されたタグのみCSSを適用させることができます。


方法は以下です。


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


お母さん
上から2番目の<p>タグちゃん!あなたの名前は「aka-big」よ!わかったわね!



次にCSSです。

idの場合

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


classの場合

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


お母さん
このCSSは『idが「aka-big」のタグの文章を赤くして、大きくしてよ!』っていっとるのね!

ユトピ
そうだね!idもclassも最初の「#」か「.」が違うだけで内容は一緒でよ!



そして結果は以下です。

html14_02

この方法を使用すれば特定の部分だけにCSSを適用することが可能です。
ちなみにidとclassには守らなければいけないルールがあります。それは、


『id』は"同じ名前を1か所"にしか使用しません。
『class』は"同じ名前でも数か所"に使用することができます。

先ほどのコードを例にすると、「id名=aka-big」は他のところには使えません。
逆に「class名=aka-big」は複数のタグに使うことができます。


idというのは「固有の名前」を表すものです。HTML内のたった一つのタグを指定するために使います。classは逆にどこかのタグを指定するためには使わないので、何個でも同じ名前のclassを指定できます。


ユトピ
classは名字、idは下の名前みたいなものだよ!兄弟に同じ名前つけたらわからないよね!

お母さん
最初の子もユトピだから、次の子もユトピって名前でいいわね

ユトピ
ダメ、絶対。



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


これが基本的なCSSの書き方になります。
覚えておきましょう。


ちょっと長くなりましたので、続きは次回にしましょう。



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


ユトピのツイッター
@yutopi60pa