2020年11月13日

コーディング勉強 初心者むけ【CSSの書き方】

プログラミングを勉強するにあたってまず取り組むのがHTMLとCSSだと思います。これまでの記事ではHTMLのことをざっくりと説明してきましたが、今回はCSSの基本的な文法について記事を書いていきます。

一見暗号のように見えるCSSですが、文法を理解すれば、WEBサイトを思い通りにデザインすることができます!

CSSとは見た目をデザインするもの

CSSはHTML文章のレイアウトや装飾などWebページの見た目を整えるために指定する言語です。

現在の最新バージョンはCSS3です。このCSS3では角丸やグラデーション、ドロップシャドウや、動きのあるアクションなどが表現できるようになりました。

CSSの基本的な文法

CSSの記述は

・セレクタ

・プロパティ

・値

の3つで構成されています。

p {color:red;}

セレクタ{プロパティ:値;}

プロパティと値は{ }でかこみ、そのセットのことをスタイル宣言といいます。

セレクタ(どれ)に対して、プロパティ(なに)を、値の結果にしたいか(どうするか)を設定していきます。

例えば「テキスト」の文字色を赤にしたい場合は以下のようになります。

HTML

<p>テキスト</p>

CSS

p {color:red;} 

文字の {色を:赤にする;}

コードはこのままでも問題はありませんが、スタイルを複数書いていくどうしても醜くなります。

そこで見やすい書き方としは以下のようになります。

p {
  color: red;
}

セレクタとコロン(:)のあとに半角スペースをあけ、プロパティの前は半角を2つあけます。

全角でスペースをあけるとスタイルに影響を与える可能性があるので、半角とスペースで見やすくしていきましょう。

ひとつのセレクタに複数のスタイルを設定する

例えば「テキスト」の文字色を赤、文字サイズを20pxにしたい場合は以下のようになります。

HTML

<p>テキスト</p>

CSS

p {
  color: red;
  font-size: 20px;
}

複数のセレクタに同じスタイルを設定する

例えば「テキスト」と「見出し」の文字色を赤、文字サイズを20pxにしたい場合は以下のようになります。

HTML

<h1>見出し</h1>
<p>テキスト</p>

CSS

p, h1 {
  color: red;
  font-size: 20px;
}

各セレクタをカンマ( , )で区切ってあげると複数のセレクタに同じスタイルを設定することが出来ます。

もちろんセレクタごとにひとつずつ設定しもていいのですが、まとめて設定したほうがコードも長くなりすぎず、見やすくなり、CSSファイルも軽くなります◎

まとめ

セレクタ・プロパティ・値で、何を・どのように・どうするかを指示するだけだと理解すると、簡単なデザインだとCSSも案外難しくないかと思います。

セレクタの部分はHTMLと密に関係があるところなので、セットで勉強していくと効率がいいことが分かりますね。

HTMLとCSSが少しでも理解ができたらどんどん実践していきましょう。見たことも聞いたこともない言語がでてきても、意味さえ理解してしまえばやればやるだけ慣れてきますよ!

今回は見た目のデザインを整えるCSSについてでした。見ている人がサイトに興味を持ってくれたり、ついリンクを押したくなるようなデザインを心がけていきましょう。