「何だか難しそう・・」
「htmlさえムリなのに、cssって論外」
実際こんな方が、少なくないようです。
私も以前はまさにそれで、cssの文字が目に入った瞬間「あームリムリ」
そんな拒否反応を起こして、自分で調べてみようかなど全く思いもしませんでした。
でも、ぜんぜん大丈夫！
一度知ってしまえば「な～んだ、そんなことなか」みたいなレベルで理解出来ます。
ただ単に、【難しそうに見えてただけ】でした。
基本さえ押さえてしまえば、あとはコツコツ覚えていくだけです。全然難しく有りません。
では早速行きましょう！
【cssとはサイトの見栄えを良くする言語】
CSSとは、サイトの見た目や見栄え・レイアウトを決めるプログラム言語です。ＷＥＢサイトは、htmlとcssと言う２つの言語によって、サイトの見た目やスタイルが決められています。
html言語が、「サイトの文書構造」を決める役割を担っているのに対して、css言語は「サイトのスタイルや体裁」を決定する役割を持っているのです。
もう少し詳しく言うなら、CSSは「html言語で作製されたwebサイトの文字の大きさや色・背景色・配置などを決めてサイトの見栄えを良くするための言語」なのです。
これを知っただけでも、モヤモヤした疑問が超スッキリしたのではないですか＾＾
また一歩、進みましたね！
『カスケーディング』って何？
さて、cssは「Cascading Style Sheets（カスケーディング・スタイル・シート）」のそれぞれ頭文字を取った略称です。別名「スタイルシート」とも言われています。
カスケーディングとは、「階段のような」「連鎖的な」といった意味合いを持っています。
たとえば、タイトル文字を「大きくする⇒赤色にする⇒背景は青色に決定」このように、順を追いながら段階的に決めていくことを指しているのです。
cssとは何かとの疑問、最初の壁が無くなりましたね。
では次に、cssの基本的な書き方をちょっとだけ覗いてみましょう。
基本をわずかでも知っているだけで、今後ずいぶん違ってくるものですよ＾＾
ＣＳＳ書き方の基本を知ろう！
何もここで、「では本格的にcssを勉強しよう」と言うわけではありません。ただ、構造の基本中の基本を知るだけでも、これから先かなり理解度が違ってきます。
はじめの一歩だけでいいので、進んでみましょう！
cssの書き方は、以外にも簡単でシンプルです。
先ず覚えることは、下記の３つの要素。
- セレクタ＝どのHTMLタグに対して見合えを調整するか
- プロパティ＝どういった内容のデザインを施すか
- 値＝プロパティはどの程度か
これは、「どこの・何を、どうするのか」「どの文章をどのようにデザインするのか」を指定するわけです。
では、もう少し具体的に見て行きましょう。
【cssの書き方はとっても簡単】
たとえば下記のようなタイトルがあります。ＨＴＭＬ
ＣＳＳこれを見れば一目瞭然！
上記のタイトルは、両端を＜ｈ１＞＜/ｈ１＞のタグで囲っています。これをcss言語で、青色にするには・・
ＣＳＳ
h1{color:blue;}
↑
このように書きます。
中味を分解してみると、
- h1（セレクタ）⇒どこの（h1要素の）
- color（プロパティ）⇒何を（色を）
- blue（値）⇒どうするのか（青色にする）
cssの書き方の基本は、このようにとてもシンプルな構造になっています。