この記事では、プログラミング初心者の方に向けて約1分間ですぐに理解できる『CSS』び基本的な書き方をご説明いたします。
htmlの書き方については以下から。
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の記述↓
<!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が加わった見え方は下の様。
↓読み込むファイル↓
ファイル内は下の様。
解説
①『link rel=”stylesheet” href=”css/styles.css』で、『index.html』と同じファイル内の『css』と言うファイルの『styles.css』を読み込む様に指示。
②HTML記述に『div class=”class01″』の要素で囲って『class01』のクラスを作成し文書を作成。
③CSS内で、『class01』にカラー（color）を#ff0000（赤）と指定。さらにフォントをFranklin Gothic Mediumに指定。また背景カラー（background-color）を#4169e1（青）にしています。
④見出しのh1タグには、color: #000000を指定。
⑤img（写真）には丸く型抜きするスタイルと、4pxのボーダー線を作成しその色は白と指定。
この様にHTML内の要素やクラスにスタイルを適応させることが出来ます。
繰り返しになりますが、セレクタやプロパティは膨大な数があり、様々なスタイルを適応させる事が出来ます。
上記の例文はそのほんの一部を紹介した程度なので、ご自身でセレクタとプロパティを調べながら色々なスタイルを試し、勉強していきましょう。
