【CSS初心者チャレンジ】第1回：CSSとは？

さて、みんながCSSを触ってオリジナリティをドンドン出してきていて、置いてけぼりを食らったみたいで寂しいあなた！、私と一緒にCSSを触ってみませんでしょうか？

わたしが持っているもう1つのブログ（すみません放置してました）でCSSカスタマイズにチャレンジしてみたいと思います。

そのブログはコチラ。
みんなのBLUE_SKY

まずは、gooブログのCSS(スタイルシート)の使いかた - goo ブログを参考にチャレンジしてみたいと思います。

最終的には、現在のBLUE_SKY_BLOG風のテンプレートに少し味付けをしたものを考えています。

現在は、なんちゃってプレーンブルーに改造途中です（笑）

今は途中ですが
実際にCSSをいじる段階になれば
この【CSS初心者チャレンジ】シリーズにあわせて、変更していきたいと思います。
記事の進行は1日1ページ～2ページぐらいかな。

---

では、早速スタートしてみたいと思いますよ。

まず、1ページ目から。

■CSSとは

読んでみましたが、意味が分かりません（笑）
まあいいや、次ぎ行きましょう！

つづいて
◆CSSはなぜ使われるようになったの？

ふむふむ、ちょっと分かったような気がしますよ。

私なりの解釈です。
ブログの記事を書いている時に、文字の色や大きさを変えたいと思うと、いちいちHTMLタグを書いてあげないといけないですよね。

例えば、下記のように段落番号の1段目を青の太字で、2段目を赤い字で書きたいとすると

第1章あいうえお
　第1節アイウエオ
第2章かきくけこ
　第1節カキクケコ

HTMLだと

＜b＞＜font color="blue"＞第1章＜/font＞＜/b＞あいうえお
　＜font color="red"＞第1節＜/font＞アイウエオ
＜b＞＜font color="blue"＞第2章＜/font＞＜/b＞かきくけこ
　＜font color="red"＞第2節＜/font＞カキクケコ

と書きますよね。
ほんじゃあ、見出しを赤の太字で文章を青字で書きたいと思ったら、下記のように＜font＞タグの赤字の部分を全部書き換えていかなきゃならない。

＜b＞＜font color="blue"＞第1章＜/font＞＜/b＞あいうえお
　＜font color="red"＞第1節＜/font＞アイウエオ
＜b＞＜font color="blue"＞第2章＜/font＞＜/b＞かきくけこ
　＜font color="red"＞第2節＜/font＞カキクケコ

とっても面倒ですよね。

みなさんはマイクロソフトのWordや一太郎のようなワープロソフトで文章を書かれたことありますでしょうか？

段落を使った文章を書く時にワープロソフトは便利な機能を持っているんですよ。

Wordだと、メニュー[書式]-[箇条書きと段落番号]がそれです。


これは、各段落の文章の装飾をどのようにするのかというメニューなんです。

これを使って

レベル1の文章は、太字で青色
レベル2の文章は、赤字

と設定すれば、簡単に、上のような文章が気にせず書けるわけです。

これを、ホームページ上でやってしまおうというのがCSSだと思われます。

ブログで表すと

ブログのタイトル部分の背景色は何色
タイトル部分の背景に使う画像は何
タイトル部分の文字はどれぐらいの大きさ
タイトル部分の文字は何色
記事の背景色は何色
記事の背景に使う画像は何
記事の文字はどれぐらいの大きさ
記事の文字は何色
左側メニューの背景色は何色
左側メニューの背景に使う画像は何
左側メニューの文字はどれぐらいの大きさ
左側メニューの文字は何色

というのをCSSに記述するということみたいです。

あぁ、余計に分かり難い説明になったかも…。
すみません。

まあ、進んでいくうちに理解していくと言うことで、とりあえず次に行ってみよう！

◆gooブログテンプレートとCSS

HTMLではテンプレートの基本構造（レイアウト）を、CSSでは文字や背景の装飾部分を定義しています。

ということは…。
メニュー（カレンダーや最近の記事、過去の記事）の並びの順番や2段組、3段組を決定しているのはHTMLでCSSでは、文字の大きさとか色、背景の色や画像を設定。

んで、現在のgooブログではこのCSSだけが触れるようになったと。

※「float」セレクタには対応していません。

って何？まあ、いいやその内わかるでしょ。放置決定（笑）

---

HTMLもろくにしらない私がCSSをいじろうとしてますから、上の説明すら、あやふやです。
まちがった説明もきっとしているでしょうから、ご注意を（とんでもない奴だね）

まあ、きっと、CSSに強い方々が
フォローをしてくれると思います…。

多分。

みんな、一緒にがんばろう！

疑問、質問、フォロー、応援大歓迎！！
（疑問や質問に私が答えられる補償は全くありません）

---

CSS初心者チャレンジ一覧