CSSの書き方:CSS入門

ブログが作りたい!CSS入門 > CSSの書き方:CSS入門

CSSの書き方:CSS入門

CSSの書き方:CSS入門

CSS入門(2)

CSSを作成する前に覚えておかないといけない基本的なことがあります。言わば文法みたいなものです。

文法などと聞くと、「んげ~」と思う人もいらっしゃるかもしれませんが、それほどややこしいものではありません。(たぶん)

お話は、次の順番で進みます。

▲ページの先頭に戻る

CSSの基本文法

1:CSSの基本文法

(01)

CSSの基本文法は、次のようになります。

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の基本的なこと

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!

相変わらず、分かり易い!
スペースを入れても入れなくてもいいとか、最後のセミコロン省略していいとか、知らなかった…
thank you!

イメージ

清音さん、こんにちは。
コメントありがとうございます。

分かりやすかったかしらん。(´ー`)

CSSって、プログラム言語より覚えるのが難しかったです。自分は。
イメージし難いんですよねぇ。
出来るだけ分かりやすくなるようにして行きたいと思います。

分かり難い箇所や、間違いがあれば、ご指摘ください。
宜しくお願い致します。

こんにちは!

こんにちは!
; って、省略可だったんですね、知らなかったー。
うーん、読み返して自分の書くcssみたら、特に:の前の半角スペースが入ってたり入ってなかったり、でした。
やっぱり見やすくしたいからこれからは意識して統一していくことにします!
見やすいとあとで修正も楽ですよね。

ところで、プログラム言語もやってらっしゃるのですか?
かっこウィー!
自分はhtmlとcssだけ^^;
本当はジャバスクリプトとかも興味あるけど、全然わからんです^^;


プログラム

ひろこさん、こんにちは!(・∀・)/

; は区切りの役割なので、{}内で最後に書く ; は、
省略して良いそうです。

心配になったので、もう一度調べ直したので、大丈夫ッス。

でも、一般的に、メンテナンスのことを考えて、
「省略しないようにしましょう!」ということになっています。

未来の自分は、自分とは違うので、
「自分しか見ないからいいや」と考えずに、
見やすくしておく方がいいですよね。やはり。

ところで、プログラムは、作りたいと思うものが見つからないので、
なかなか上達しません。

はやりのRubyなんかもやってみたいんですけれど、
明確な目的が見つからないので、プライオリティは低いです。

やはり、形になって結果が見えやすくないと続かないみたいです。
飽きっぽいから。

今は、FlashのActionScriptが、興味すんすんです。(・∀・)スーンスーン

そうJavaScriptもやっておきたいですよねー、XMLも覚えて、
Ajaxなんてことをサクサクできるといいのになぁ。

しっかーし、現状、XHTML化も、もうひとつ進んでいないし、
CSSだって、まだまだなんですよねー。

CSSハックなんて、面倒くさくて、面倒くさくて、
覚えたくありません。(´Д`;)

少しずつ、優先順位決めてやっていくしかないんですけれども、
進まないなぁ。(´ー`)とほほ

ふたたびこんにちは

こんにちは!
FlashのActionScriptとはなんだ?と思って今検索していろいろ見てきたのですが、あまりに当たり前の事すぎるのか、FlashのActionScriptはこういうものです、って書いてる所を見つけられませんでした。
普通のFlashとは違うものなのですか?

cssハックは、自分が使うやつは、スターハックとか、IE7用のハックくらしか使ってないなあ・・・。
なんか一杯あるらしいけど、覚えられにゃい↓
http://www.communis.co.uk/dithered/css_filters/css_only/
http://centricle.com/ref/css/filters/


こう多いと、やっぱいつも使うハックは決まってきますよね。

CSSハック

ひろこさん、こんにちは。

私もさわっていないので詳しく知っているわけではありませんけれど、
Flashってば、いわゆるアニメみたいに、
つらつらーっと流れるのが基本形ですよね。

閲覧者は、それをジッと見ている具合。

んでっ、ActionScriptを使ってプログラムを組んでおくと、
クリックなどをすることで、その状況に応じて、
動作が変わるということかと思います。

テレビゲームに近い感じでしょうか。
インタラクティブ?

うぉぅ!ひろこさんすげへ!(・∀・)カッコイイ
CSSハックを使いこなしているのね。

IE7でも、何か起こるんだー。あらー。

さて、どうしたものか。
やっぱりやらないとあかんのか。

なるほど!

FlashのActionScriptってそういうものだったんですね!
それなら、きっと自分も今まで閲覧者側で触った事あります。
あれがそれなのかー!

あの、例えばマウスをあてると、そこに表示されてる画像がもわ~んと動いたり
するやつですよね。
以前、マウスをあてるだけで画像がボヨンボヨン散って動くサイトさんに行き着いた事があって
あまりの楽しさに散らせまくってきたのですが、あれがActionScript・・・!
えーたのしそう!
自分も絶対そのうち手をつけたい!
そろそろ、何か新しい勉強はじめたいなあ。cssもまだまだなんですが、
並行して出来るものならいろいろやってみたいです。

IE7は、IE6ほどじゃないけどハックが必要な時はある、と自分は感じてます。
もしかしたらcssの書き方によっては全然大丈夫だったりするかもしんないけど・・・。


またまたお邪魔します

FlashのActionScriptで調べてたら、こんなサイト様をみつけました。
くじらはんど様
http://www.kujirahand.com/

の中の、FlashのActionScript2エディタだそうです。
普通のと、2だと何か違うのかな?

ActionScript2編集用エディタ「as2edit」
http://kujirahand.com/tools/as2edit/

ほう・・・
ActionScriptいいですねえ・・・
うっとりや・・・

ActionScript

ひろこさん、こんにちは。

たぶんね。(・∀・)

先日、ichimarugoさんにも、Flashのフリーソフトを教えてもらったんだ。
ActionScript作れるものもあるみたい。有名なの3つです。

 ・ParaFla
 ・Suzuka
 ・Powerbullet

いつになるか分からないけれど、やってみたいなぁ。
「as2edit」ですか。いろいろあるんだねー。

2って、バージョンかなぁ。

そういえばさぁ、ひろこさんのところのクロ猫って、
もろFlashじゃないですか。

あの首が動くのは、ActionScriptで作っているんじゃないかしら。
(;´・ω・)(・ω・`;)ネー

あー、そうですねー、書く順番でも違うのだものね。
出来るだけCSSハック無しで書きたいなぁ。

う~~~ん・・・・・・こ。(・∀・)/

(`゚ω゚´)!!

こんにちは!
なんかそろそろうざい自分ですが、また書き込みします。

ですね!
うちのクロ猫、フラッシュでした。しかもActionScript!!!
ひえー
あのクロ猫は、ブログパーツのところから連れてきたのですが
なんか急に、あの子が神々しく見える!

cssだけじゃなくて、htmlの書き方でも(順番とか?)、
同じデザイン、内容のページでも
ハックの嵐になったり、全然ハック使わなくてすむ、
って事もあるらしいですね。

自分がいつも泣かされるのは、いざどっかおかしくなった時に、
どっかのハックが邪魔してうまく直せなくなった時です。
これは自分の書き方が雑なのが原因だったりorz
ハックのとこにはコメントつけるのがいいですね。

う~~~ん・・・・・・こ。(・∀・)/
↑まねっこ!

つぎはぎ

ひろこさん、こんにちは。
コメントありがとうございます。

こういった話ができる人がいなかったので、
私はとても嬉しくってよ。

ひろこさんの描いた「ねこ絵」で動いたら、
かなり可愛いと思うな。

やたら、しっぽ立つ・・・みたいな。

へー、嵐と無風じゃあ、表示速度がまるで違いますよね、きっと。
お手本になるようなコードがあるといいのだけれど、

ちょうど頃合の人がいないのよねぇ。
出来る人のものは、難しすぎるし。

私なんかもう、つぎはぎだらけだものなぁ。
ほんと、おならプーだわ。

No title

ホントはGIMPが目的だったはずなのに
cssが解ればどんなにうれしいか・・
こんなにわかりやすいサイトで
もしわからないとしても完全にわたしのせいです。
高望みだということと それに
「挫折慣れ」してますから。
字が大きく読みやすいのも有難いです。
ゆっくりのんびり読ませていただきます。
(なんせ66歳ですので)

お話しながら、楽しみながら。

sachiさん、こんばんは。
コメントありがとうございます。

GIMPはいかがでしたでしょうか?
CSSにしてもそうですが、分からないとしても、
sachiさんのせいということはありません。

どちらかと言えば、私のせいです。
ただ、説明には限界があるので、
分からない箇所があればコメントしていただければと思います。

書籍では、著者に質問できませんけれど、
ブログなら、書いている人に質問できます。

もし何かやりたいことがあるのなら、
CSSに限らず、お話しながら、楽しみながら、
やってみたら良いのではないかなぁ・・・と思います。

ブログは、既にやっていらっしゃるのかしら?
少しずつ慣れていけば、それほど難しいものでもないですよ。

文字の大きさは、もう少し大きい方が良いのかどうか、
検討していたのですが、小さく感じてはいらっしゃらないようで、
良かったです。

もし、もう少し大きさを調整したいときは、
お手数ですが、ブラウザで文字の大きさを変更してくださいませ。

参考ページ:
http://kumacrow.blog111.fc2.com/blog-entry-281.html

初見、とても見やすい!(´∀`)

はじめまして(*´∀`*)
htmlのYoutube埋め込みに困り探していたところ、このサイトにあたりました。
そして、cssを使うように書いてあって、私わかんないので、
このcss講座サイトに来ました。

しかし、すごくわかりやすく、一瞬で理解できました。
ありがとうございます。

これからも頑張ってください。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/260-76f18047
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて