CSS(はじめてのCSS、基本的書き方を学ぶ)

ichikawaです。
CSSについて書きます。本日初講義です。
個人としてはとても楽しみにしておりました。ついに始まりました。いやほう。

今日は主に以下の事を学びました。

  • CSSとは
  • ウェページを作る3要素
  • CSSを学ぶことの目標
  • CSSの書き方

CSSとは

Cascading Style Sheetの略で、普段はよく”スタイルシート”と呼ばれます。
主にデザインを作るものです。


ウェブページを作る3要素

一つのウェブページには、様々な要素が混じってつくられていますが、それぞれの役割は主に3つに分けられる、ということです。
その3要素とは

  • Structure
  • Behavior
  • Presentation

の3つです。

Sturucture
文書構造を指します。いま私達が勉強しているHTMLもこの部類に入ります。
Behavior
直訳すると”ふるまい”ですが、これは指定した箇所にマウスを合わせると画面上でなにか表示が変わったり、メッセージがひょこっと出たりなど、そういった動きのある要素です。javascriptなどがこの部類です。
Presentation
CSSがこれに当たります。デザインをつくる要素です。

現在もHTMLを勉強していますが、授業ではさんざん「見た目をHTMLで作るな」と言われてきました。
それはブラウザに依存するところが多いからです。自分がこう表示させたい、と思っても見る人によって全然違う表示になったりするのです。CSSでデザインするとそのようなことは軽減でき、より細かなデザインを設定することができます。


CSSを学ぶことの目標

まずはこのCSS Zen Gardenをご覧ください。
このサイトのページを見るとHTMLを変更せずに、CSSを変更するだけで様々なデザインができる、ということが分かります。
右の”デザインを選択”の下の部分から何種類ものデザインが見られます。
目標は、このCSSが読め、書けるようになることです。
今ですと随分難しいように見えますが、
挑戦します。


CSSの書き方

それでは、CSSの書き方です。

基本は下のように書きます。

指定の箇所 {  キー : 値 ; }

“指定の箇所”には、どこにデザインをするのか、ということを書きます。
HTMLで文書構造をつくり、CSSで例えば「<h1>要素内の文章の色を赤色に変えたい」ということを実行したいなら

h1 { color : red ; }

と書けばできます。
また、特定の部分だけデザインしたいなら、要素内で指定したidやclassを持ってくることができます。
idなら#(シャープ)id名、
classなら . (ドット) class名で指定できます。

例:

#ichikawa{ color : red;}
.dino{ color : red ; }

このようになります。


今日のところは、自分の指定したい箇所にデザインができる、ということを覚えました。
CSSを覚えることによって、習っているHTMLとPHPを組み合わせたら、ほとんど自分の作りたいページを作れるような気がしました。
これから覚えていくのが楽しみです。

—-
(2008/07/11 17:30 hirafuji追記)
動画をご覧下さい!

1 件のコメント so far »

  1. by スタートアップ研修記 » PHP データベースをphpで操作するための関数, on 07.10.08 @ 5:42 PM

     

    [...] « CSS(はじめてのCSS、基本的書き方を学ぶ) [...]

Comment RSS · TrackBack URI

コメントをどうぞ

名前: (Required)

eMail: (Required)

Website:

Comment:

Spam Protection by WP-SpamFree