CSSでできることとは？ 洗練されたWebデザインに必須の言語！

Webプログラミングをこれから始めたいと考えている方にとって、CSSは学習必須の言語。まずはHTML、次にCSSと順を追って学習するのが一般的です。

ただ、「CSSって、Webサイトのデザインをコーディングするのに役立つらしい」というレベルの漠然としたイメージを持っている方も多いと思います。

今回はCSSの基本的な概要から、サンプルコーディング、Bootstrapに代表されるCSSを使ったWebフレームワークなどについて解説します。

CSSとは？

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略称で、Webページのスタイル（見た目）を指定するために使用されるスタイルシート言語です。

スタイルシート言語と聞くと、あまり聞きなれないかもしれませんが、厳密に言えばプログラミング言語ではありません。CSSはスタイルを指定するための言語で、プログラミング言語のように動作を処理するための言語ではないからです。また、HTMLに代表されるマークアップ言語（コンピューターに文章構造を伝えるための言語）でもありません。

スタイルには、レイアウトや色、サイズなどの表示スタイル、印刷などの出力スタイル、音声読み上げなどの再生スタイルといった種類があり、CSSを使えばこれらを変えられます。

HTMLにもWebアプリにデザインを加えるスタイルはありますが、仮にCSSを使わずHTMLだけでスタイルを調整すると、コードがかなり長くなり、サイトのパフォーマンスやSEO対策にも影響してしまいます。そのため、可能な限りCSSでスタイルをコーディングすることが推奨されています。

CSSの基本構造

CSSの基本構造は、「セレクタ」「プロパティ」「値」から成り立ち、最後に「;」（セミコロン）を定義することによって、ひとつの構造の終了を宣言します。

つまり、「;」がない場合、まだ構造定義が続いていると認識されるので、値の最後には必ず「;」を入れるよう注意しましょう。

【用語解説】

• セレクタ：
  CSSを指定したい箇所を定義する部分（例：h1のタグ名、class名など）。
• プロパティ：
  セレクタで指定した範囲に対して、何を変更したいかを定義する部分（例：文字色を変える、横幅を変えるなど）。
• 値：
  どういう変化を加えたいかを定義する部分（例：文字色を赤に変える、横幅を100pxにするなど）。

CSSでできること

CSSでできることについて、実際のコーディングとセットで確認します。

できること1. 文字色、文字サイズの変更

文字色、文字サイズの変更は、CSSのよくある使いみちのひとつです。

「セレクタ」「プロパティ」「値」をそれぞれ以下のような形にします。（「/*」から始まる部分は、この記述をすることでどんな変化が生じるかを日本語で解説している部分です）

.h1test {
    color: #ff0000; /* 文字の色 = 赤 */
    font-size: small;  /* 文字のサイズ小さく */
}

できること2. 背景色の変更

背景色の変更もよく行います。

h1やh2などのタイトル／見出しを指定して、背景色を変更する場合が多いでしょう。

.h2test {
    background-color: #00ff0d; /* 背景色の色 = 緑 */
}

できること3. アニメーションをつける

Webサイトにアニメーションをつけるためには、JavaScriptを使う必要があると思われがち。

しかし、CSSを応用すれば動きをつけることもできます。

.box {
    width: 100px;
    height: 100px;
    background: #000;
}
/* マウスオーバーで変更する */
.box:hover {
    background: #ccc;
    width: 300px;
}

CSSの強化版「Sass」とは？

CSSをある程度マスターできれば、Sassと呼ばれるCSSのメタ言語についても学習してみるのもいいかもしれません。

Sassとは、Syntactically Awesome StyleSheetの略称で、直訳すると「文法的に素晴らしいスタイルシート」となります。Sassはメタ言語（今回はCSSに別のルールを定義するために使われる言語）に該当し、拡張言語とも呼ばれます。要はCSSの強化版です。

しかし、今でも現役のCSSにはどんな弱点があり、なぜSassが開発されたのでしょうか？

サイトの規模や、関わる人員が増してくると、どうしてもコードが複雑になってきます。JavaScirptの場合だと、フレームワーク（色々な場面に使いまわせるパッケージ）が充実していますが、CSSではJavaScriptのようにコードを使いまわすのが難しい状況にありました。

そこで、コードが無駄に長くなってしまうのを防ぎ、保守・運用性を高めようとSassが開発されました。Sassと同じCSSのメタ言語は他にもあり、LESSやStylusなどが挙げられます。

【Sassでできること（一例）】

• ネスト（入れ子）が使えて構造管理しやすい
• 四則演算ができる
• 変数が使える
• コードの継承ができる
• JavaScriptのように関数が使える

では、実際にCSSと同じコーディングをした場合の違いを見てみましょう。まず、Sassでコーディングした場合（ネストと変数を使う場合）は以下のようになります。

$background-color: #ff0000; /* ←変数定義 */
.text {
    font-size: 30px;

    a {
        #test {
            background-color: $background-color;
        }

        #box {
            background-color: $background-color;
        }
    }
}

一方、CSSでコーディングした場合は以下のようになります。

.text {
  font-size: 30px; }
  .text a #test {
    background-color: #ff0000; }
  .text a #box {
    background-color: #ff0000; }

Sassを使ったほうがコーディングの量が若干減り、シンプルなコードになっています。このくらいの量であればどちらも大差なく感じられるかもしれませんが、大規模かつ複雑なコーディングになると大きな差が生まれます。

CSSを使ったWebアプリケーションフレームワーク

Webアプリケーションフレームワークとは、Webアプリ開発に必要な機能をまとめて提供してくれているパッケージ。

これを上手に活用することで、アプリ開発の工数を削減できたり、メンテナンス性を向上させたりできます。特にWebアプリ開発初心者の方にとって、CSSを一からゴリゴリとコーディングするのは、かなり労力が必要な作業。洗練されたデザイン画面をすぐに作れるものでもありません。そのため、初心者の方こそ積極的にWebアプリケーションフレームワークを導入するべきだと思います。

ここでは代表的なCSSを使ったWebアプリケーションフレームワークについて解説します。

1. Bootstrap

▲出典：Bootstrap公式サイト

Bootstrapとは、Twitter社が開発したWebアプリケーションフレームワークです。よく利用されるスタイルがあらかじめ定義されているので、ルールに沿って使用するだけでデザインが整ったWebページが作れます。

昨今はスマホでWebアプリを見る機会も多くなり、スマホ用のデザイン、パソコン用のデザインとそれぞれを考慮したレスポンシブデザインの設計が必要不可欠です。Bootstrapは、レスポンシブデザインを比較的手軽に実装できるという強みを持っています。

おそらく一番有名なWebアプリケーションフレームワークなので、参考書やWebサイトにアップされている情報も多く、初心者の方がはじめて使うWebアプリケーションフレームワークにはうってつけではないでしょうか。

2. Bulma

▲出典：Bulma公式サイト

Bulmaとは、BootStrapのようにあらかじめ用意されたコンポーネントに対応するクラス名をHTML要素に付け加えることで、スタイリングを行うCSSフレームワークです。BootStrapはJavaScriptの読み込みが必要となりますが、BulmaではJavaScript不要な点が大きな特徴といえます。

また、それぞれのコンポーネントも他のCSSフレームワークと比べるとスマートなデザインとなっているので、デザイン性を比較してBulmaが選ばれるケースもあると思います。

3. Foundation

▲出典：Foundation公式サイト

Foundationとは、BootStrapに次いで知名度が高いCSSフレームワークです。

BootStrapと似ているCSSフレームワークですが、BootStrapよりもカスタマイズ性が高いという特徴があります。

CSSはどんな人が勉強すべき？

• 「在宅ワークできるWebアプリ開発に従事したい」
• 「Webサイトのデザインにこだわりたい」

のように、Web系プログラミングを学びたい、極めたい方にとっては必要不可欠な言語です。

ただ、CSSだけを勉強するといったことはあまり聞きません。CSSは、原則HTMLに付け加える形で活用するため、HTMLの知識があることは前提です。HTMLの知識がない場合、まずはそちらの学習が必要でしょう。

アニメーションなど、CSSも極めればできることは際限なく増えていくものの、Web開発におけるフロントエンド部分は、「HTML」「CSS」「JavaScript」から成り立ちます。この3言語をある程度扱えてこそWebプログラマーとしての道が開けますので、HTMLとCSSをある程度マスターしたら、次はJavaScriptにもチャレンジしていきたいところです。

CSSの勉強方法

ひとりで参考書と向き合うのも悪くはないですが、やはり習得するまでの時間はかなり必要かと思います。しかし、近年はプログラミングを学べる環境が充実してきています。ここでは、効率よくCSSを学べる代表的な勉強方法について解説します。

方法1. Progateを活用する

▲出典：Progate公式サイト

Progateとは、Webブラウザ上でプログラミングを学習できるサイトです。2014年にサービスが開始され、「初めてのプログラミングなら、まずはProgateから」と言われるほど、エンジニア界隈では有名なサイトです。

Progateをおすすめする理由は、開発環境を用意せずに勉強できるからです。Progate無料版の範囲は、全レッスンのうち基礎レベルのレッスンと有料会員レッスンの冒頭までですが、有料会員になると全レッスンを受講できます。

CSSはHTMLと合わせてのレッスンとなりますが、「CSSに触れてみたい」「CSSの基本を学びたい」と考えている方には、うってつけのサービスではないでしょうか。

方法2. Udemyを活用する

▲出典：Udemy公式サイト

『Udemy』とは、プログラミングなどが学べるオンライン動画学習サービスです。Udemyは動画学習サービスなので、実際にWebアプリを作っている様子を見ながら学習できます。本を読んで学習するよりも、実践感覚が身につきやすいのが強みです。

方法3. 自分でWebアプリを作る

CSSの知識を自分のものにするためには、自分でWebアプリを作るのが一番です。参考書を読んでいるだけでは上達しませんし、ProgateやUdemyをせっかく活用しても、学んだ気になって満足してしまう方も多い印象。

そうならないためにも、何か作りたいWebアプリがあるなら、早速プログラミングをしていきましょう。手を動かさないことには、プログラミングの上達はありえません。

しかし、十分な知識がある状態でいざコーディングを始めても、案外手が動かないものです。そういった場合には、すでにデザインされているテンプレートを活用することで、スタートのつまづきをある程度なくせます。

自分でWebアプリを作る場合には、いちからCSSをコーディングしていくよりも、まずは無料で活用できるCSSテンプレートを活用するべきです。また、テンプレートは完成されているCSSのコーディングなので、コーディングの模写もできます。無料で使えるものは、どんどんと使っていきましょう。

おわりに

今回はCSSについて解説しました。CSSを極めれば、アニメーションなど活用してより洗練されたデザインが作れるようになります。そこまでいかなくても、CSSがある程度できればITエンジニアとしての強みになるので、ぜひ学習する機会をつくってみましょう。

（執筆：S-KAYANO　編集：齊藤颯人）