CSSとは？フロントエンド開発における基礎知識

投稿日: 2023.03.29
更新日: 2023.05.12

CSSはHTML,JSとならびWEBの中枢技術で
WEBページの見た目を整えるために必要な基礎知識であり、フロントエンド開発において欠かせない要素です。
初学者の方は基本的なHTMLが書けるようになったら次はCSSについての知識をつけましょう

CSSは略称で正式にはCascading Style Sheetsと言います。単純にCSSと呼ぶ場合も多いですが、「スタイルシート」という呼び方も現場で一般的なので覚えておいても良いと思います。

WEBページの見た目を整える

フロントエンド開発においては、HTMLとCSSを組み合わせてWEBページの見た目を構築します。
HTMLが本文だとすると、その本文であるHTMLの装飾やマークアップした要素をどういった表示にするか等WEBページの見た目を指定するためのスタイルシート言語です。
HTMLで書かれたコンテンツに対して、文字の色や大きさ、背景色や背景画像、余白や位置などのスタイルを指定することができます。
また、JavaScriptとの連携により、動的なWEBページの実現も可能です。
HTMLでページやコンテンツ内の本文等それぞれどういった要素か、というのはマークアップで明示できますが、

〇〇のタイトルの文字サイズは〇〇pxで太字、行間は〇〇ピクセルで、フォントは〇〇を利用。

といった見た目に関する設定はcssで指定します。その他セクションを区切ったり
セクションのマージンやパディング(要素の間隔等)を設定できます。

CSSの構文

CSSの基本的な構文は、プロパティと値の組み合わせからなります。
例えば、以下のようなCSSコードは、文字の色を赤色に指定するためのものです。

css

{
    color: red;
}

CSSセレクタ

CSSには、セレクタという概念があります。
セレクタは、スタイルを適用するHTML要素を指定するためのもので、
クラス名やID名、タグ名などを指定することができます。例えば、以下のようなCSSコードは、クラス名が「box」の要素に対して、幅と高さを指定するものです。

css

.box {
    width: 200px;
    height: 100px;
}

レスポンシブデザインの作成

一昔前はインターネットといえばパソコンで見る物でしたが
現在はスマホやタブレットで見るのがあたり前の時代となっています。
レスポンシブデザインとは異なるデバイスや画面サイズに合わせて、自動的にレイアウトやコンテンツの表示を調整することで、ユーザーにとって最適な表示を提供することを目的としています。

レスポンシブデザインを実現するためには、CSSを使ってメディアクエリを設定することが一般的です。
メディアクエリは、ウェブページの表示領域のサイズに基づいてスタイルシートを適用するための条件式です。下記はスマートフォンに(実際は画面の幅が480px以下のブラウザ)対して適用されるスタイルの例です。

css

@media screen and (max-width: 480px) {
    /* 480px以下の画面サイズに対して適用されるスタイル */
    body {
        font-size: 18px;
    }
}

レスポンシブデザインはSEOにも重要であり、Googleなどの検索エンジンは、レスポンシブデザインを採用しているウェブサイトを優先的に表示する傾向があります。

CSSアニメーション

CSSは見た目を整える言語と説明しましたが
CSS3の登場により要素に動きを与えるいわゆるアニメーションの実装も可能となっています。

CSSアニメーションは、トランジションやキーフレームによって
指定された時間内に要素のスタイルを変更することによって実現されます。

要素が移動したり、フェードイン/フェードアウトしたり、拡大/縮小したりするアニメーションを作成することができます。

アニメーションを加える事でリッチな表現・演出のあるページを実装する事ができます。
CSSアニメーションは、JavaScriptを使用しなくても実装できるため、パフォーマンスが向上し、スムーズなアニメーションを実現することができます。

ただし、CSSに限った話では無いですがアニメーション等を過剰に使用すると、
ページの読み込みや処理が重くなる場合があるため、適切に使用する必要があります。

CSS拡張メタ言語

CSSを学んでいくとScssやSass等といった用語を目にする事が出てくると思いますが、
これらはCSSの機能を拡張するための言語で、CSSを記述するための言語の1つです。
基本的にそのままではブラウザがサポートしていないのでCSSにコンパイルしてからWEBサーバーに配置します。

これらの言語は、CSSの機能を拡張するために、変数、ネスト、ミックスイン、関数などの機能を提供しています。例えば、変数を使用することで、色やフォントサイズなどの値を一箇所で管理し、変更が容易になります。また、ネストを使用することで、親要素と子要素の関係性を明確にし、読みやすいコードを書くことができます。

CSS拡張メタ言語は、プログラマブルなCSSを作成することができるため、大規模なWEBサイトの開発に特に有用です。
(サイト全体のh3のフォントサイズを変えたり、といった変更も変数を利用していれば変数の指定を変更すれば全体に適用される)

ただし、通常のCSSに加え、その拡張言語特有の知識も必要になる事もある為通常のCSSよりも学習コストがかかり、追加のツールやライブラリが必要になることもあります。

最初はScssがおすすめ

CSS拡張メタ言語はSass,Scss,Less,Stylusあたりがメジャーかと思いますが
とりあえず何を使えば良いかわからない場合はscssがおすすめです。

CSSと似た構文を使用することができるので初心者にとってはとっつきやすいですし
(ネストや変数を利用しないければ、CSSそのままの構文でも利用問題ありません。)
CSS拡張言語として一番幅広く使用されています。
開発効率を向上という点で、その他の言語に何かが劣るという事もほとんど無いです。

またフロントエンド案件においては必須のスキルとして挙げられる事も多いです。
まずはScssを覚えるのが個人的にはおすすめです。

JS IN CSS

CSSはHTMLファイル内読み込む形で使用されることが通常ですが
js in css は、JSファイル内でCSSコードを使用することを指します。

最近人気のJSフレームワークであるReactやVue等で利用される事が多く
これらはコンポーネント指向・設計となっています。
js in cssはCSSもJSで書いてしまおう。という物です。

初学者の方ははじめから理解しておく必要はありませんが、
ReactやVue.jsを使う場合は必要になります。
コンポーネント設計に関しては説明は本題とそれてしまうのでざっくりですが、
再利用性、メンテナンスの簡素化、拡張性の向上、テストの簡素化などの点でメリットがあるとされています。

ただし、コードが分散して変更を行う場合にCSSファイルだけでなくJavaScriptファイルも確認する必要があったりと使い方やルール等がしっかり分かっていないと逆にメンテナンス性が低下する可能性もあるので知識がついてからの利用がおすすめです。