CSS入門 はじめました

ブログが作りたい!CSS入門 > CSS入門 はじめました

CSS入門 はじめました

CSS入門 はじめました

CSS入門(1)

ビギナーのためのCSS入門です。まずはじめに、CSSを使うことのメリットと、デメリットについて書いておこうと思います。

なぜCSSを使う必要があるのか?自分では分かっていても、誰かに説明するとなると難しいかもしれません。お話は、次の順番で進みます。

「ん?CSS???CSSって、何???」という人は、CSSの用語解説「CSSとは?」からご覧ください。

▲ページの先頭に戻る

CSSのメリット

1:CSSのメリットを端的に言い表す

「CSSを正しく使うことで、何が起こるのか?」を、端的に言い表すと、次のように書くことができます。

構造と表現を分離できる。

構造は「HTML」のことで、表現は「CSS」のことです。構造と表現がごちゃまぜになったHTMLファイルは、無駄が多いのです。

▲ページの先頭に戻る

2:イメージ

例えば、あなたがファミレスで、「ハンバーグセット \680(消費税込み)」を頼んだとします。

店員さんが「おまたせしました」と言って、テーブルの上にお皿を1枚だけ置いて行ってしまいました。

構造(HTML)と表現(CSS)の混在

お皿を見てみると、ご飯も、ハンバーグも、スープも、サラダも、デザートも、コーヒーも、すべてがひとつのお皿の中にごちゃ混ぜになっています。

構造(HTML)と表現(CSS)が混在していると言うことは、このようなごちゃ混ぜの状態と言えます。あまり、おいしく食事できないかもしれませんね。

▲ページの先頭に戻る

3:CSSのメリットを列挙する

この構造と表現に分離することによって、次のようなメリットが派生します。

  • HTMLがシンプルになるので、HTMLファイルを読み込む速度が速くなりやすい。つまり、閲覧までの表示が速くなる可能性がある。
  • HTMLがシンプルになるので、検索エンジンに好まれやすい。(tableタグを使ったレイアウトは、好まれない)
  • CSSを一度ブラウザのキャッシュに読み込んでしまえば、その分の毎回の読み込みが軽減されるので、閲覧までの表示が速くなる可能性がある。
  • 表示方法を、一元管理できる。(例えば、文字サイズ、背景色、レイアウトなど)
  • ソースコードの再利用がしやすくなる。

ちょっと、話が分かり難いでしょうか?簡単に言うと、「無駄がなくなる、無駄なことをしなくて良くなる」ということです。

あなたの作業効率が上がり、閲覧者にも、検索エンジンにも好まれるとなれば、CSSを利用しないのはちょっともったいない感じがしませんか?

▲ページの先頭に戻る

CSSのデメリット

CSSを使うことは、メリットばかりですが、ひとつだけ難点があります。

それは、ブラウザによって、表示が違ってしまう可能性があることです。特にMicrosoft社のIE(Internet Explorer)は、勝手な解釈をする傾向があるため、とても厄介です。

このブラウザの表示問題によって、主に次のような作業が必要になります。

  • CSSハックが必要。
  • 各種ブラウザでチェックを行う手間が増える。

ただ、デメリットより、メリットの方がはるかに大きいため、現状ではCSSを使わないという選択肢は考えにくい状況です。

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/05 更新日:2009/03/04

|「CSSの書き方」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

すごいブログ!

初めての訪問で、隅々まで、読ませてもらっちゃいました。
ふぁんになりました。
ブログのお手本のようなブログですね!
ユーザビリティ、デザイン、文章の分かりやすさ、すべてがすごいです。
感動。(T T) いいぶろぐだ~。
ちょうど、ぼくはHTMLとCSSを基礎からやり始めてたので、CSS入門楽しみです。

リンクさせていただきました

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

ベタ褒めしていただき恐れ入ります。
褒められて伸びる子なので、助かります。(・∀・)

また、清音さんのブログを拝見させていただきました。
ずいぶん難しい話で、読み応えがある内容ですね。(´Д`;)
今後の記事も楽しみです。

勝手ながら、SeeSaaのリンク集からリンクさせていただきました。
(ついでに、はてブも)

CSS・・・頑張って書きます!

それでは、今後もよろしくお願い致します。

通りすがりです

分かりやすい説明でした。まだまだ頑張って勉強したいと思います(^-^)/

はじめまして

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

分かり良かったようで、何よりです。

何か不明な点や、分かり難い箇所があれば、
お気軽にコメントしてくださいませ。

頑張り過ぎず、頑張ってください。(・∀・)/

CSSについて

すごいです(^^)♪
めちゃくちゃ詳しく書いておられるのを見て
感服いたしました!

わからないこととかあったら
質問させていただいたりしても
宜しいでしょうか?(T_T)

CSS

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

お褒めいただいて恐縮です。
ありがとうございます。ヾ(*´∀`*)ノ


ん、でも、haro2015さんは、
もっと詳しそうなんですけど・・・。(´Д`;)

質問していただいても構いませんが、
難しいのは、きっと無理ですよ。すんませんけれども。

どっちかって言うと、
一緒に勉強しようぜ、いえーい!(・∀・)人(・∀・)

くらいの方が良いかも。

ファンレター

あっという間にHTML入門からCSSに着地♪
もうkumaさんファンです♥
他の同系情報サイトより親切・分かりやすいのは勿論、
kumaさんの笑いのセンスの素晴らしさにも気づき始めたCSS第一歩・・・・
頑張るぞー!

速い!

nobuさん、こんばんは!(・∀・)/ぐいぶに
コメントありがとうございます。

あらま、すごいスピードスター。
速いっすなぁ。(´Д`;)

後半は、内容がパターン化して、
だんだんダレてくるかもしれませんが、

ご覧になってみてくださいーい。(´▽`)♪

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/257-23b7922d

スタイルシート(CSS)とは?(用語解説)

「スタイルシート(CSS)」とは、ウェブサイトのレイアウトを定義するためのもの...
 | トップページ | 

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
ありのごとくあつまりて