WebDesigner StartGUide Chapter 3 ~CSSを必要最低限覚える~

CSSの役割 多分、これからWebデザインに触れていく中で、CSSとはどう頑張っても切っても切れない関係になります。それくらいCSSは重要です。 CSSとはカスケーディング・スタイル・シート(Cascading Style Sheets)の略で、Web上のページのスタイル(見た目など)を指定するための言語です。HTMLなどで作成されるページにスタイルを適用する場合には、このCSSが一般的に利用されています。 HTMLはWebサイトのコンテンツの役割を明確にしていると説明しました。 CSSはそのコンテンツをどう装飾するのかを指定するための言語です。

CSSでできること CSSは文書のコンテンツの装飾などを行うことができます。 例えば、Webページがスクリーン(パソコンの画面)に表示される際の色・サイズ・レイアウトなどの表示スタイルや、プリントする際の出力スタイル、音声で読み上げられる場合の再生スタイルについて指定することができます。 一般的に、HTMLを使って、スタイルを指定することも可能です。 ですが、今はそれぞれの言語によって、役割を分担したほうがいいという流れになっています。つまりHTMLは文書の役割の明確にするもの、CSSは文書の見た目を変えるものと分離したほうがいいとされているのです。

CSSでできること CSSでできることを簡潔に示した写真があります。 このように、見た目を変えることができます。 引用：http://www.htmq.com/csskihon/001.shtml

CSSの使い方(例) CSSを実際に使う時は、下のような記述方法をとります。 body{ background:black; width:100%; height:100%; font-size:14px; } これは、bodyタグに対して、「背景を黒色」「横幅を100%」「縦幅を100%」 「文字サイズを14px」に指定していると言えます。

CSSの使い方(例) CSSを使う際は、HTMLのコードが既に存在していることが大半なので、bodyタグがあるかどうかを調べるのは簡単です。実際CSSを扱う際にあなたが覚えなければいけないことは、width:100%;などを指定する方です。 ここで、「セレクタ」と「プロパティ」と「値」 というものを覚える必要があります。下の画像を見て下さい。 先程の例だと、bodyはセレクタ、widthはプロパティ、100%は値になります。 引用： http://www.dolceproof.jp/topic/reference/referencecss/base-css

CSSの使い方(例) あなたがCSSを覚える上で必要になってくる知識は、ほとんどが「プロパティ」と「値の指定の仕方」です。「セレクタ」はHTMLを書いた時点でほとんど終わっていますのであまり気にする必要はありません。 ここで少しだけCSSに踏み入った内容に入っていきます。 簡単なところまでしか説明しませんので、ご安心下さい。

CSSのセレクタの指定方法 先程の例では、bodyは1つしかないタグだったので良いのですが、「div」など複数存在するタグの場合はどのようにしたらいいでしょうか？ div{ width:100%; } と指定していますと、全てのdivタグに反映されてしまいます… さて、どうしますか？

CSSのセレクタの指定方法 ここで、一旦HTMLに戻る必要が出てきます。 大体の場合、セレクタで起こる問題はHTMLで起こっている問題です。 簡単にいうと <div></div> のこの２つに違いを生み出さないといけないわけです。 どうしたらいいでしょうか？

CSSのセレクタの指定方法 ２つのdivにそれぞれ別の名称のようなものをつけたらいいのでは？ となるわけです。 そして生まれたのがidとclassという考え方です。 このidやclassというものをタグごとにつけてあげることで、違いを生む という考えです。 書き方は <div class=“a”></div> <div></div> のような感じです。

CSSのセレクタの指定方法 <div class=“a”></div> <div></div> この例だと、上のdivはclassがaですが、下のdivは何もない状態です。 ということが「クラスがaのdiv」と言うと、片方だけを表現できるわけです。 このように使うのがidやclassです。 ちなみに、idの指定方法も同じで <div id=“a”></div> となります。

Idとclassの役割 これで、同じタグを分ける方法はわかったわけですがもう１点疑問があるはずです。 それは「じゃあ、idでもclassでもどっちか片方で良くない？」という話し。 実は、それぞれ違いがあります。 class→「種別名を割り当てる」 特徴：同じclass名を、1ページ中に何度でも使える id→「固有の名前を割り当てる」 特徴： 同じid名は、1ページ中に1度しか使えない

Idとclassの役割 纏めると class属性が対象の所属みたいなものを表しているのに対して id属性は対象に「固有の名前」を付けて一意に表すために使われます。 ですから、1ページ中に同じid名は1度しか使えません。 一意といいながら2体存在するのはNGなわけです。 じゃあ次は、今説明したidとclassを使ってCSSを適用する時はどうするのか？ つまり<div id=“c”></div>と<div></div>にそれぞれ違うスタイルを 適応させる場合はどうするのかの話しをしていきます。

Idとclassを指定してスタイルを適用する この場合割と簡単で classの場合→「.a」「.b」のようにドット(.)をつける idの場合→「#a」「#b」のようにシャープ(#)をつける とすることで出来ます。例を挙げると div.a{ width:100%; } のように、div#bとしたりします。

階層構造がある時も同じ ついでに説明しておくと <div class=“a”> <div id=“b”></div> </div> という時は、 div.a div#b{ width:100%; } というように書くことも出来ます。

これでCSSのセレクタ方法は完了です CSSのセレクタの指定方法はこれで完了です。 あとは、プロパティと値が正しく書けるかどうかの問題です。 この章では最後に、簡単によく使うプロパティの説明をして 終わろうと思います。 引用： http://www.dolceproof.jp/topic/reference/referencecss/base-css

よく使うプロパティ① color:文字色を変更します font-size:文字サイズを変更します font-weight:文字の太さを設定します font-family:文字スタイルを設定します text-align:文章を揃える位置を変更します text-decoration:文字につく装飾を変更します(下線など) list-style:リスト形式のスタイルを変更します

よく使うプロパティ② margin:外側の余白を変更します padding:内側の余白を変更します border:枠線を変更します background:背景を指定します 引用： http://kumacrow.blog111.fc2.com/blog-entry-269.html

CSSは他の勉強との兼ね合いです CSSの学習は一番終わりが無いと言えます。 まず、そもそもデザインを司るものである以上、デザインの修得も必要であるということ。さらにアニメーションまでもいじれるようになってしまいました。 これは実際にあることとして、「こう作りたい」というイメージに対して、それどおりにスタイルを変えるのがまず難しいです。そして、その通りにできたとして、それが綺麗になるかどうかも微妙です。(Webサイトにしてみると、意外と汚かったりします) だから、奥が深いんです。

実際にWebサイトをたてましょう！ CSSは実地訓練しかありません。 ですが、そのためには、あなたのWebサイトを持つ必要があります。 これから実際にWebサイトを作っていきましょう。 それでは、この章はここまでにします！