CSSの書き方：CSS入門
CSS入門（2）
CSSを作成する前に覚えておかないといけない基本的なことがあります。言わば文法みたいなものです。
文法などと聞くと、「んげ〜」と思う人もいらっしゃるかもしれませんが、それほどややこしいものではありません。（たぶん）
お話は、次の順番で進みます。
CSSの基本文法
1：CSSの基本文法
（01）
CSSの基本文法は、次のようになります。
- どこに適用するか指定します。
- はじめの波括弧（なみかっこ）
- 適用先に何を設定するのか指定します。
- コロンで区切ります。
- 適用先を、どうしたいのか指定します。
- 各「表示方法の指定」ごとに、セミコロンを書きます。
- おわりの波括弧（なみかっこ）
「適用先」のところは、セレクタと呼ばれています。専門用語です。覚えたい人は、どうぞ覚えてください。
（02）
具体的に書かないとイメージし難いですよね。どのようにCSSコードを記述するのかと言うと、例えば、次のようになります。
body { background-color: #000000; }
これを日本語に直して整理すると、次の表のようになります。
適用先 | <body>タグの |
|---|---|
何を？ | 背景色（background-color）を、 |
どうする？ | 黒色（#000000）にする。 |
「適用先」→「何を？」→「どうする？」と、3回くらい復唱してみてください。これが、基本となる文法です。
おそらく最初のうちは、「{}（波括弧）」や、「:（コロン）」、「;（セミコロン）」を書き忘れたりするかもしれませんが、数をこなしていけば慣れます。
HTMLの<body>タグは覚えていたかしら？忘れていた人は記事「HTML入門 はじめました」をご覧ください。
2：複数の「表示方法の指定」
（03）
「表示方法の指定」の箇所は、ひとつだけしか書けないわけではありません。複数の「何を？＋どうする？」を書くことが出来ます。
例えば、次のように、背景色の指定のあとに、文字の大きさを指定するなど、いくつでも指定することが出来ます。
body { background-color: #ffffff; font-size: 15px; }
日本語で書くと、次のようになります。
適用先 | <body>タグの |
|---|---|
何を？ | 背景色（background-color）を、 |
どうする？ | 白色（#ffffff）にする。 |
適用先 | <body>タグ内の |
|---|---|
何を？ | 文字の大きさ（font-size）は、 |
どうする？ | 15ピクセル（15px）にする。 |
あ、今はまだ、「background-color」、「font-size」を覚える必要はありません。のちのち別途説明いたします。
「木を見て、森を見ず」にならないように、細かなことは読み流してください。まずは、全体です。ここでは、「適用先」→「何を？」→「どうする？」を、よく理解しましょう。
なかなか覚えられないとしても、あまり気にしないで、続けてみてください。そのうち覚えられます。頭の良し悪しとは関係ありません。慣れです。
3：CSSコードが見難くないですか？
（04）
ところで、このCSSコードって見難くないですか？・・・この程度なら、大丈夫かしら。
body { background-color: #ffffff; font-size: 15px; }
それでは、もう少し増やしてみます。見難いですよね？・・・ね？
body { background-color: #ffffff; font-size: 15px; color: #000000; text-align: center;}
長くなってくると、だんだん見難くなってきます。最初に書くときは、まだ良いかもしれませんが、修正・更新するときは、作業が非効率になりがちです。
（05）
CSSコードは、次のように書くことが出来ます。
body {
background-color: #ffffff;
font-size: 15px;
color: #000000;
text-align: center;
}
「絶対、このように統一して書かなければいけない」というルールはありませんが、書くときの統一したルールを決めておくと、効率良く作成して行くことが出来ます。
例えば、次のようなことを考えておくと、よろしかろうと思います。
- 「{}（波括弧）」の位置は？
- スペースは、半角スペースを使うか？TABを使うか？
- 「:（コロン）」の前後のスペースは入れる？
- 最後の「表示方法の指定」の「;（セミコロン）」は省略するか？
特に、最後の「表示方法の指定」の「;（セミコロン）」の省略については、よく考えて決める必要があります。
もちろん好きなようにしていただいて構いませんが、さして省略するメリットはありません。修正・更新のことを考えると、省略しない方が賢明です。
「で、結局どうすれば良いの？」と思った人は、現在使っているCSSファイル（あなたのブログのテンプレート）の真似から入れば良いと思います。
次回予告
次回は、CSSファイルを外部読み込みする方法について書きます。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
- CSS入門 はじめました
- CSSの書き方（この記事です）
- CSSファイルの外部読み込み
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/07 更新日：2008/04/07
« 「CSS入門 はじめました」｜「CSSファイルの外部読み込み」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
Good job!
イメージ
コメントありがとうございます。
分かりやすかったかしらん。(´ー｀)
CSSって、プログラム言語より覚えるのが難しかったです。自分は。
イメージし難いんですよねぇ。
出来るだけ分かりやすくなるようにして行きたいと思います。
分かり難い箇所や、間違いがあれば、ご指摘ください。
宜しくお願い致します。
こんにちは！
； って、省略可だったんですね、知らなかったー。
うーん、読み返して自分の書くcssみたら、特に：の前の半角スペースが入ってたり入ってなかったり、でした。
やっぱり見やすくしたいからこれからは意識して統一していくことにします！
見やすいとあとで修正も楽ですよね。
ところで、プログラム言語もやってらっしゃるのですか？
かっこｳｨｰ！
自分はhtmlとcssだけ＾＾；
本当はジャバスクリプトとかも興味あるけど、全然わからんです＾＾；
プログラム
; は区切りの役割なので、{}内で最後に書く ; は、
省略して良いそうです。
心配になったので、もう一度調べ直したので、大丈夫ッス。
でも、一般的に、メンテナンスのことを考えて、
「省略しないようにしましょう！」ということになっています。
未来の自分は、自分とは違うので、
「自分しか見ないからいいや」と考えずに、
見やすくしておく方がいいですよね。やはり。
ところで、プログラムは、作りたいと思うものが見つからないので、
なかなか上達しません。
はやりのRubyなんかもやってみたいんですけれど、
明確な目的が見つからないので、プライオリティは低いです。
やはり、形になって結果が見えやすくないと続かないみたいです。
飽きっぽいから。
今は、FlashのActionScriptが、興味すんすんです。(・∀・)スーンスーン
そうJavaScriptもやっておきたいですよねー、XMLも覚えて、
Ajaxなんてことをサクサクできるといいのになぁ。
しっかーし、現状、XHTML化も、もうひとつ進んでいないし、
CSSだって、まだまだなんですよねー。
CSSハックなんて、面倒くさくて、面倒くさくて、
覚えたくありません。(´Д｀;)
少しずつ、優先順位決めてやっていくしかないんですけれども、
進まないなぁ。(´ー｀)とほほ
ふたたびこんにちは
FlashのActionScriptとはなんだ？と思って今検索していろいろ見てきたのですが、あまりに当たり前の事すぎるのか、FlashのActionScriptはこういうものです、って書いてる所を見つけられませんでした。
普通のFlashとは違うものなのですか？
ｃｓｓハックは、自分が使うやつは、スターハックとか、IE7用のハックくらしか使ってないなあ・・・。
なんか一杯あるらしいけど、覚えられにゃい↓
http://www.communis.co.uk/dithered/css_filters/css_only/
http://centricle.com/ref/css/filters/
こう多いと、やっぱいつも使うハックは決まってきますよね。
CSSハック
私もさわっていないので詳しく知っているわけではありませんけれど、
Flashってば、いわゆるアニメみたいに、
つらつらーっと流れるのが基本形ですよね。
閲覧者は、それをジッと見ている具合。
んでっ、ActionScriptを使ってプログラムを組んでおくと、
クリックなどをすることで、その状況に応じて、
動作が変わるということかと思います。
テレビゲームに近い感じでしょうか。
インタラクティブ？
うぉぅ！ひろこさんすげへ！(・∀・)カッコイイ
CSSハックを使いこなしているのね。
IE7でも、何か起こるんだー。あらー。
さて、どうしたものか。
やっぱりやらないとあかんのか。
なるほど！
それなら、きっと自分も今まで閲覧者側で触った事あります。
あれがそれなのかー！
あの、例えばマウスをあてると、そこに表示されてる画像がもわ〜んと動いたり
するやつですよね。
以前、マウスをあてるだけで画像がボヨンボヨン散って動くサイトさんに行き着いた事があって
あまりの楽しさに散らせまくってきたのですが、あれがActionScript・・・！
えーたのしそう！
自分も絶対そのうち手をつけたい！
そろそろ、何か新しい勉強はじめたいなあ。ｃｓｓもまだまだなんですが、
並行して出来るものならいろいろやってみたいです。
IE7は、IE6ほどじゃないけどハックが必要な時はある、と自分は感じてます。
もしかしたらcssの書き方によっては全然大丈夫だったりするかもしんないけど・・・。
またまたお邪魔します
くじらはんど様
http://www.kujirahand.com/
の中の、FlashのActionScript２エディタだそうです。
普通のと、２だと何か違うのかな？
ActionScript2編集用エディタ「as2edit」
http://kujirahand.com/tools/as2edit/
ほう・・・
ActionScriptいいですねえ・・・
うっとりや・・・
ActionScript
たぶんね。(・∀・)
先日、ichimarugoさんにも、Flashのフリーソフトを教えてもらったんだ。
ActionScript作れるものもあるみたい。有名なの3つです。
・ParaFla
・Suzuka
・Powerbullet
いつになるか分からないけれど、やってみたいなぁ。
「as2edit」ですか。いろいろあるんだねー。
2って、バージョンかなぁ。
そういえばさぁ、ひろこさんのところのクロ猫って、
もろFlashじゃないですか。
あの首が動くのは、ActionScriptで作っているんじゃないかしら。
(;´・ω・)(・ω・`;)ネー
あー、そうですねー、書く順番でも違うのだものね。
出来るだけCSSハック無しで書きたいなぁ。
う〜〜〜ん・・・・・・こ。(・∀・)/
(｀ﾟωﾟ´)！！
なんかそろそろうざい自分ですが、また書き込みします。
ですね！
うちのクロ猫、フラッシュでした。しかもActionScript！！！
ひえー
あのクロ猫は、ブログパーツのところから連れてきたのですが
なんか急に、あの子が神々しく見える！
ｃｓｓだけじゃなくて、htmlの書き方でも（順番とか？）、
同じデザイン、内容のページでも
ハックの嵐になったり、全然ハック使わなくてすむ、
って事もあるらしいですね。
自分がいつも泣かされるのは、いざどっかおかしくなった時に、
どっかのハックが邪魔してうまく直せなくなった時です。
これは自分の書き方が雑なのが原因だったりorz
ハックのとこにはコメントつけるのがいいですね。
う〜〜〜ん・・・・・・こ。(・∀・)/
↑まねっこ！
つぎはぎ
コメントありがとうございます。
こういった話ができる人がいなかったので、
私はとても嬉しくってよ。
ひろこさんの描いた「ねこ絵」で動いたら、
かなり可愛いと思うな。
やたら、しっぽ立つ・・・みたいな。
へー、嵐と無風じゃあ、表示速度がまるで違いますよね、きっと。
お手本になるようなコードがあるといいのだけれど、
ちょうど頃合の人がいないのよねぇ。
出来る人のものは、難しすぎるし。
私なんかもう、つぎはぎだらけだものなぁ。
ほんと、おならプーだわ。
No title
ｃｓｓが解ればどんなにうれしいか・・
こんなにわかりやすいサイトで
もしわからないとしても完全にわたしのせいです。
高望みだということと それに
「挫折慣れ」してますから。
字が大きく読みやすいのも有難いです。
ゆっくりのんびり読ませていただきます。
（なんせ66歳ですので）
お話しながら、楽しみながら。
コメントありがとうございます。
GIMPはいかがでしたでしょうか？
CSSにしてもそうですが、分からないとしても、
sachiさんのせいということはありません。
どちらかと言えば、私のせいです。
ただ、説明には限界があるので、
分からない箇所があればコメントしていただければと思います。
書籍では、著者に質問できませんけれど、
ブログなら、書いている人に質問できます。
もし何かやりたいことがあるのなら、
CSSに限らず、お話しながら、楽しみながら、
やってみたら良いのではないかなぁ・・・と思います。
ブログは、既にやっていらっしゃるのかしら？
少しずつ慣れていけば、それほど難しいものでもないですよ。
文字の大きさは、もう少し大きい方が良いのかどうか、
検討していたのですが、小さく感じてはいらっしゃらないようで、
良かったです。
もし、もう少し大きさを調整したいときは、
お手数ですが、ブラウザで文字の大きさを変更してくださいませ。
参考ページ：
http://kumacrow.blog111.fc2.com/blog-entry-281.html
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/260-76f18047
スペースを入れても入れなくてもいいとか、最後のセミコロン省略していいとか、知らなかった…
thank you!