【CSS】CSSとは？

CSSとは？

今まではHTMLという言語を使ってブラウザで閲覧することのできる文書を作ってきました。
この文書に色を付けたり、デザインを施したりするには、どうするのでしょうか？

このように、HTML文書のスタイル（デザイン、色、配置、フォント等）を設定するためには、「CSS」と呼ばれるプログラミング言語を使用します。

（Wikipediaより）

つまり、こういうことです。

・HTML：文書の中身（文章を書く）
・CSS：HTMLで書いた文書のスタイル（見た目）を設定する

なので、CSSを変更しても、文章のテキストが変わることはありません。

CSSの簡単なサンプルプログラム

CSSを使って記事の背景色を変更してみます。

このようになります。

変更前と後のプログラムを比較します。

左側が変更前、右が変更後です。

勿論、変更を加えた部分によって背景色が変わったのですが、その部分はたったのこれだけです。

背景色を設定するために追加した部分

    <style type="text/css">
        body{
            background-color:lightblue;
        }
    </style>

つまり、この５行を理解すれば、CSSの基礎がわかったことになります。

3.CSSの簡単な書き方、構造

では、背景色を設定するために追加したCSSコードを見ていきます。

➀＜style type="text/css"＞... ＜/style＞

これは、「今からHTMLではなくCSSのプログラムを書きますよ」という決まり文句です。HTMLのプログラムの中にCSSを埋め込むときはこのように書いて、＜style type="text/css"＞と＜/style＞の間に CSS のコードを書きます。

➀ body{ background-color:lightblue; }

これが、CSSのコードです。background と書いてあることから分かるように、ここで背景色を指定しています。

そこで肝心なのがCSSの文法構造ですが、CSSの文法はたった一つです！

それがこちら。

つまり、

 body{
    background-color:lightblue;
 }

は、「＜body＞...＜/body＞で囲まれた部分の「background-color（背景色）」を、「lightblue（薄い青色）」にしろ」という意味です。

この文法さえマスターすればCSSは何とかなります、多分。

試しに

 body{ background-color:lightblue; }

この「color:lightblue」を「black」や「yellow」に変更してみてください。背景色がそれに合わせて変化するはずです。

次回からは、この文法を使っていろいろやっていきます。