【入門編】CSSの基本的な書き方

    こんにちはホームページ制作 UTO WEB STUDIOです。

    今日は CSSについて簡単に説明します。
    CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、
    ウェブページのレイアウトやカラーなどを指定するための言語です。
    CSSはHTMLと組み合わせて使用する言語になります。

    HTMLは文字や画像の情報を設置するに対して、CSSはそれらをどのように装飾するかを指定します。

    例えば、文字の周辺に色を付けたり余白を付けたり、画像の配置を横並びにしたりなど様々な装飾やレイアウト設置が可能になります。

    CSSは基本的にテキストエディタ（メモ帳など）を使って記述していきます。
    保存するときに拡張子を「○○○○.css」と必ず.cssとしましょう。

    HTMLに反映させるには、CSSをサーバーにアップした後、<header>〜</header>の間に設定しましょう。

    <html>
<head>
<meta name="Content-Style-Type" content="text/css">

    <link rel="stylesheet" href="アップしたCSSのURL">
    </head>
<body>
<p>段落 Pタグ</p>
</body>
</html>

    前記で書いた<p>タグ（段落）を例にします。

    【HTML側】

    <p class="text-color">福岡(文字の色を変えます)</p>
<p class="text-size">ホームページ制作（文字のサイズを変えます）</p>
<p class="text-color-size">福津（文字の色とサイズを変えます）</p>

    それぞれ「クラス名」を設定します。
    「class=”○○○”」というように表記されたCSSを適用させるためのタグのことです。
    ※○○○の部分は半角英数字と[-]と[_]が使用できます（最初の文字は必ず英字）

    【CSS側】
    .text-color{color:red;}

    .text-size{font-size:1.5em;}

    .text-color-size{
    color:#4682b4;
    font-size:2em;
    }

    記述が終わったらCSSとHTMLをサーバーにアップしましょう。

    【結果】

    福岡(文字の色を変えます)

    ホームページ制作（文字のサイズを変えます）

    福津（文字の色とサイズを変えます）

    ■.〇〇｛　　｝の○○部分はHTMLで指定された「クラス名」になります。

    ■｛　　｝の【color:○○;】は文字の色を変えるコード、○○は色のコードになります。#4682b4はカラーコードになります。
    　カラーコードについてはコチラをご参照下さい。

    ■font-size:○○em；は文字の大きさを表すコードです。数字が大きいほど文字が大きくなります。

    ■１つのクラス名で、複数のコードを配置することができます。

    コードはたくさんあります。今後もご紹介できればと思います。
    それではまた次回！

    タグ: