【初心者向け】CSSとは？CSSってどう書くの？

こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！

みなさんは、「CSS」という言葉をお聞きしたことはないでしょうか？

• 聞いた事はあるけど、実際に何ができるのかわからない…
• CSSってなんだろう…
• 専門知識がないと書けないのでは？…

上記のように、疑問に思っていることを解決できる記事となっています。

僕は、フロントエンドエンジニア・マークアップエンジニアとして、主にHTML、CSS、JavaScript、jQueryなどを書いてサイトのコーディング業務をしています。

そもそもCSSとは何か、具体的に何ができるのか、実際にどのように書くのか、この記事でお伝えします。

※エンジニアについては、こちらの記事「エンジニアって実際どんなお仕事なの？」を読んでみてください。

1 CSSとは？初心者でもわかりやすく解説！

これからWebサイトを作成していこうと思っている方、まだ全くCSSを理解できていない方、HTMLを勉強し終え次はCSSを勉強しようと思っている方にわかりやすく解説していきたいと思います。

Webサイトを作成するために、最初はHTMLでサイトの骨組みを作成し、次にデザイン部分のCSSを書いていくのが一般的です。

ここではCSSの基本的な知識を解説していきます。

HTMLとは書き方が全く異なるので、CSSの役割と仕組みを理解した上で実際に書かないと様々な問題が生じてきますので、ぜひ参考にしてください！

1.そもそもCSSって何？

そもそもCSSとは、カスケーディング・スタイル・シート（Cascading Style Sheets）の略語でスタイルシート言語と言われています。HTMLで作成した文字や画像などの配置や色、大きさなどを指定するための言語となります。なので、デザインに特化した言語になります。

※HTMLについては、こちらの記事「【初心者向け】HTMLとは？HTMLの書き方」を読んでみてください。

2.CSSで実際に何ができるの？

CSSで実際に何ができるのかと言いますと、大まかに見た目を整えることができます。

例えば、Webサイト上に表示させたい文字を「赤色にしたい！」や、「もう少し文字を大きくしたい！」など、デザイン面で細かく調整することが可能になっています。もちろん、デザイン面なので文字配置の微調整も可能になります。

また、文字だけではなく表示させたい画像にも適用することができ、「画像の大きさを変えたい！」や、「画像の位置を調整したい！」なども可能です。

もう一つ例をあげますと、Webサイト上にある詳細を見るためや、決定するなど動作をさせるためのクリックできるボタンもCSSで作られていることが多いです。

ボタンの形を丸くしたり、四角いボタンにしたり、マウスホバーと言って、マウスカーソルをボタンの上に乗せた瞬間に色が変わったりなどもCSSで設定が可能になっています。

現在主流になっている、CSS3という種類のCSSが使用されており、今まではアニメーションを実装するために難しいプログラミング言語を必要としておりましたが、CSSのみでアニメーションの一部も簡単に実装できるようになっています。

2 CSSの構造

ここまで簡単にですがCSSとは何か？CSSで実際に何ができるのかを理解できたと思います。

それでは次にCSSの構造をご説明していきます。HTMLとセットの言語と言われていますが、構造は全く違う構造になっています。

まずは、CSSを実際に書く前に基本構造を理解しおきましょう！

1.セレクター、プロパティ、値

CSSの構造は、「セレクター」、「プロパティ」、「値」のこの3つでできています。

下記の図を参考に、一つずつ簡単にご説明していきます。

「セレクター」とは、CSSを適用させたいHTML要素を指定するものです。

まず、「そもそもCSSをHTMLで書いたどの要素に反映させたいのか？」を定義するものがセレクターになります。なので、上記の図ではp要素に対してCSSを反映させたいのでpがセレクターとなります。

次に「プロパティ」です。「プロパティ」とは、セレクターに対して実際にどんなスタイル（プロパティ）を適用させるのかを指定するものです。例えば、p要素に対して、文字色を変えたいや、文字の大きさを変えたいなど、何をさせたいのかです。

最後に「値」です。「値」とは、セレクターに対して適用させたいスタイル（プロパティ）をどれくらいの値で適用させたいのか指定するものです。例えば、p要素に対して、文字の色を変えたい場合は、具体的にどんな色にさせたいのかです。

上記の3つをわかりやすくまとめますと、「何に対して」、「どんなことを」、「どれくらい」のこの3つの構造になっており、デザインに関する言語ですが、根本的な構造はロジカルになっていることが分かりますね。

3 CSSの基本的なルール

ここまで簡単にですがCSSの構造を解説してきました。ここでは、実際にCSSを書くために必要な準備や、基本気的な書き方・ルールをご説明していきます。

1.CSSを書くための準備

実際にCSSを書いていこう！しかし、何に書いていけばいいのか…

方法としては、下記の2つあります。

• CSSファイルを作成する。
• HTMLファイルに直接書く。

大体の方は、HTMLファイルとは別にCSSファイルを作成し、そこにCSSを書いていきます。

理由としては、HTMLとCSSを分けることによって、後々に追加したいページがある場合などに、メンテナンスしやすいなど様々なメリットがあります。僕個人的な意見になりますが、CSSファイルをHTMLファイルとは別で用意することをお勧めします。

ファイルの準備ができましたら、テキストエディターや、メモ帳など、コードを書くツールで実際に書いていきます。ちなみに、僕は「Visual Studio Code」を使用しています！

2.CSSの基本的な書き方とルール

CSSの基本的な書き方としては、構造部分でご説明しましたイメージのような書き方のように決まっています。

今回は、p要素をセレクターとして例をあげましたが、セレクター部分をclass属性にした場合や、id属性にした場合は、セレクターの書き方が変わってきます。

class属性に対してとid属性に対してセレクターを書く場合は、以下の図になります。

class属性の場合は、「.」が先頭に入ります。id属性の場合は、「#」が先頭に入ります。また、プロパティと値はセットで「{}」（波括弧）で囲います。

値の後に「;」（セミコロン）をつけて区切りましょう。これを付与することにより、次のから複数のプロパティを指定することができます。

CSSコードの間に、「半角スペース」や「改行」を入れても、スタイルの指定内容が変わることはありません。CSSはメンテナンスが必須になりますので、自分が見やすいようにコードを綺麗に並べて作業しましょう。ただし、全角スペースは絶対に使わないようにしましょう。

4 まとめ

CSS初心者向けに、「CSSとは何か？」、「CSSの基本的な書き方やルール」についてなどの観点から解説してきました。

CSSを勉強しようと思っている方、これからCSSを書いていこう思っている方々で、まずは基本となる文法を覚えた上で書く必要があるので、こちらの記事を参考にしていただければと思います！

CSS3では、色を変えたり、大きさを変えるだけではなく、CSSだけでアニメーションを作成できたりも可能になっています。ご興味がある方は、今後こちらの記事でCSSでできることを更に深掘りしていきますので、ぜひ見てみてください！