【初心者必見】CSSの基礎的な書き方

この記事では、プログラミング初心者の方に向けて約1分間ですぐに理解できる『CSS』び基本的な書き方をご説明いたします。

htmlの書き方については以下から。

CSSの基本的な書き方
例文
1. 解説

CSSの基本的な書き方

CSSはHTML内の各要素にスタイルを付け加える言語です。

一般的に『styles.css』と言う名のファイル内に記述していきます。（HTMLに直接書くことも可能。また.cssの拡張子ならどんな名前でもOK）

CSSは、HTML内で作成した、<要素名 class=“クラス名”>もしくは<div>で囲った<div class=”クラス名”>の『クラス名』を指定して、そのクラスで囲まれているHTMLにスタイルを適応させるのが一般的です。またクラス名を作成しなければHTML文書内の指定した要素全てにスタイルが適応されます。

CSSの記述にはセレクタ、プロパティ、値を暗記する必要があります。記述の仕方は

『.セレクタ{　プロパティ: 値px;』の様にします。

.works { width: 400px;
        margin-left: auto;

この場合『works』と言うクラスに対して幅（width）を400pxにし、要素の外側左の空白をオート（画面幅に最適化）と言った指示を出しています。

セレクタやプロパティは非常に多くの種類があり、意味やルールを覚えるのは大変なので都度下記の様なサイトを見て確認していきましょう。

HTMLクイックリファレンス │ スタイルシートリファレンス（目的別）

原色大辞典

例文

↓HTMLの記述↓

<!DOCTYPE html>
<html lang="ja">
<head>
     <title>CSSの書き方</title>
     <link rel="stylesheet" href="css/styles.css">
</head>
<body>
   <div class="class01">
        <h1>CSSの書き方</h1>
             <p>まずクラス名を作成します。</p>
             <img src="img/Photo01.jpg">
</body>
</html>

HTMLのみの見え方は下の様。

↓CSSの記述↓

.class01 {
     color: #ff0000;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     background-color:#4169e1; 
}
h1 {
     color: #000000
}
img {
     border-radius: 50%;
     border-width: 4px;
     border-style: solid;
     border-color: white;
}

CSSが加わった見え方は下の様。