CSSって何？ビギナー向けのCSS入門ガイド

CSS（Cascading Style Sheetsの略）は、Webデザイナーの主要ツールです。今回のCSSガイドでは、この言語について知っておくべき基本事項をカバーします。しかしその前に、CSSが登場するまで開発者がいかに苦しんでいたかを確認しておきましょう。かつてはアプリケーションのマークアップで直接スタイリングしていたため、メンテナンスがとても大変でした。CSSが解決しようとした最初期の問題点はそこにあります。スタイルシートをコンテンツから切り離すことで、多くのページの見た目を一度に更新するという能力が得られるようになったのです。

初期のCSSは、使いにくく不可解な言語という悪い評判を得ていました。というのも、ブラウザのサポートは個々に異なるうえ、レンダリングエンジンのバグの原因となるCSSの実装には一貫性がなかったからです。

しかし、ようやくCSSの黄金期がやってきました。CSSはすでに成熟した言語となり、なおも成長と改良が進行中です。

今回のCSSガイドでは、WebアプリケーションにおけるCSSの役割を説明します。スタイルの適用方法や、使用頻度の高いプロパティについて、理解が深まるように解説していきます。

CSSを習得するには時間がかかりますが、このガイドをお供にして、マスターへの道を歩み始めましょう。

この記事の内容

・Webアプリケーションの4つのレイヤー

・Webアプリケーションのスタイリングの基礎

・四角形のコンセプト

・ displayプロパティ

・ドキュメントフロー

・タイポグラフィ

・ボックスモデル

・レイアウト

・スタッキング

・マルチメディア

・トランスフォーム

・トランジション＆アニメーション

・条件付きのデザイン

Webアプリケーションの4つのレイヤー

Webアプリケーションは4つのパートで成り立っています。

1 ビジネスロジック

2 コンテンツ（HTML）

3 インタラクション（JavaScript）

4 プレゼンテーション（CSS）

ビジネスロジックはもっとも曖昧な部分なので、このガイド内ではサーバーサイドのコードまたはサーバーとのインタラクションをおこなうコードとみなします。

Webアプリの4つのレイヤー

ブラウザがWebページをリクエストすると、ビジネスロジックがHTMLを送信します。これをコンテンツと呼びましょう。このコンテンツは、スタイリング（装飾）されていない白地に黒のテキストです。

HTMLが読み込まれると、ブラウザはさらなる関連アセットを読み込みます。画像や動画、さらに重要なJavaScriptやCSSなどがここに含まれます。

JavaScriptは汎用プログラミング言語なので、多くのことができます。おもにWebブラウザにおいては、JavaScriptはユーザーインタラクションを担います。たとえば、ユーザーがボタンをクリックすると何かが起こります。この「何か」は、フォームの送信だったり、HTMLドキュメントの変更だったりします。

CSSはHTMLの構造を利用してWebベージの装飾をおこないます。CSSが読み込まれると、白地に黒文字だったテキストは、いろいろなスタイルのコレクションで記述された内容に変更されます。

CSSの素の力を確認するには、CSS Zen Gardenの事例をぜひご覧ください。

 

CSSの中身をのぞく

スケーラブルなCSSの基礎は、ルールセットにあります。ルールセットには複数のセレクタと宣言ブロックが含まれます。宣言ブロックはプロパティと値を組み合わせた構文となっています。

CSSのルールセットの詳細

セレクタは、HTML要素にルールセットを当てはめるためのインターフェイスです。複数のセレクタとルールセットが同一要素に適用されることもあります。そのため、CSSに「Cascade（カスケード＝段階）」が必要になってきます。

カスケードは、要素に対して適用されるプロパティを判定するレフェリーです。判定にはセレクタの特定性と継承される可能性のあるプロパティが考慮されます。CSSでは、ルールが競合したときにどのスタイルが優先されるかを決定するレフェリーが必要なのです。

一般に、カスケードがプロパティを適用する優先順位は以下のようになります。

1 セレクタの特定性のレベル

2 ルールセットのソース順

3 継承された値

カスケードについての情報は、MDNの記事に詳しく記載されています。さらに深掘りしたい場合は、最新のカスケードと継承のスペックをどうぞ。

特定性に関する入り口の情報としては、CSS Tricksに優れた記事があります。

知識の確認

現時点で、CSSのWebアプリケーションにおける役割やブラウザによる要素へのスタイル適用といったCSSの大まかな概要が理解できたと思います。では、実際にどうやってコンテンツにスタイルを適用するのでしょうか。次のセクションで、いくつかのプロパティについて学び、それがWebページのビジュアルをどう構築するのかを見ていきます。

Webアプリケーションのスタイリングの基礎

CSSのコンセプトに肉迫する前に、スタイリングとレンダリングに関するいくつかの基礎事項をおさえておきましょう。

1. 四角形のコンセプト

コンテンツをスタイリングする際、メンタルモデルとしてレンダリングのイメージをもっておくことが有益です。いくつかポイントがあります。

1 すべては四角形で成り立っている。四角形に見えないところでも、四角形で囲まれている。

2 すべての四角形は、ほかの四角形と何らかの関わりをもっている。

3 デフォルトでは、ネストされた四角形（子）はそれを含む四角形（親）の上にある。

以上のガイドラインを念頭においておくと、Webページのレイアウトに役立ちます。

2. displayプロパティ

最初に知っておくべきプロパティは、displayです。displayにはいくつか異なる値があり、そのうち何点かを後述しますが、現時点で注目すべきはblockとinlineの2つです。どのHTMLもデフォルトでこの2つのうちどちらかの値をもっています。

ブロックレベルの要素は、親要素の上から下へレンダリングされ、各ブロックレベルの兄弟要素は前の要素の下から始まります。

ヘッダー、パラグラフ、別のヘッダー、最終パラグラフ、という構成を考えてみましょう。これらの要素は上から下へと見ることができます。

ブロックとインラインの要素

インライン要素は左から右へとレンダリングされます。コンテンツは次の行に折り返され、次のインライン兄弟要素は前のコンテンツの後に続きます。

太字テキスト、下線テキスト、リンク、ノーマルテキスト、という順の構成を考えてみると、左から右へ、そして上から下へと配置されるのがわかります。

ブロックレベル要素とインライン要素についての詳細はMozillaのWebドキュメントで確認できます。各ページの最下部には、これらの値をデフォルトでとる要素のリストがあります。

3. ドキュメントフロー

ドキュメントフローは、ブロックレベル要素とインライン要素のレンダリング方法を基本とします。ここで知っておくべきことは、四角形が個々のディスプレイタイプに応じて、上から下または読み取り方向に配置されるということです。

しかし、コンテンツをそのドキュメントフロー通りに配置したくないこともしばしばあります。そこでCSSはコンテンツを操作するさまざまな方法を提供しています。それらの詳細は後述しますが、今はそういうことが可能だと知っておけば十分です。

ドキュメントフローについて詳しく知りたい方は、こちらの記事をご参照ください。

4. タイポグラフィ

Webの中心はコンテンツであり、もっともシンプルな形式のコンテンツがテキストです。Webでタイポグラフィを扱うとき、デザインを実用的で魅力的なものにするために気を付けるべきことがいくつかあります。

リーダビリティとアクセシビリティを向上させるには、テキストの色と背景の色のコントラスト、それにフォントファミリーに応じたフォントサイズが重要です。ピクセルの細部にまでこだわるなら、font-sizeの調整よりもline-heightでラインスペースをコントロールするほうが効果的かもしれません。

See the Pen Demo: Typography by Tyler Childs (@tylerchilds) on CodePen.

関連プロパティ

精通しておくべき関連プロパティをリストにしました。

・font-family：フォントの優先順リスト（最初に使用可能となるフォントが適用されます）

・color：テキストの色

・text-align：要素内でのテキストの揃え方

・font-size：テキスト自体の高さ

・line-height：テキスト行の高さ（見えないスペースはこの値とfont-sizeを基準とします）

・font-weight：ボールドなどのテキストの太さ

・font-style：イタリックなどのテキストスタイル

・text-decoration：アンダーラインなどのテキストデコレーション

・letter-spacing：文字間のスペース

・word-spacing：単語間のスペース

・text-shadow：テキストに適用されるシャドウ効果

Note：これらのタイポグラフィ関連のプロパティは継承されます。つまり、親要素のルールセットは、子孫要素に引き継がれて適用されます。

5. ボックスモデル

四角形のスタイリングの基盤はボックスモデルです。各四角形に関連付けられたプロパティが影響しています。ボックスモデルの中心にコンテンツがあり、これは子要素としての四角形または空白の四角形を指します。コンテンツの周囲にpaddingがあり、borderによって囲まれ、その外側にmarginがあります。四角形がいくつも内包されている感じです。このモデルについて詳しく見ていきましょう。

box-sizing

box-sizingプロパティはボックスモデルの計算方法を管理します。おもにcontent-boxとborder-boxの2つの値が使われ、content-boxがすべての要素に対してデフォルトで設定されています。

content-boxは、コンテンツの幅と高さにpaddingとborderを加えてボックスのサイズを計算します。これは問題になりやすい落とし穴です。というのも、要素に100%の幅を設定すると、paddingとborderとmarginによって100%より大きいボックスになってしまうからです。

border-boxは、要素の幅と高さにpaddingとborderを含めてボックスを計算します。そのため、100%幅の要素はpaddingとborderを含めても100%幅のままです。しかしmarginの分だけ100%より大きな要素となり得ます。marginのために要素がオーバーフローする場合には、代わりに親要素にpaddingかmarginを設定することを検討しましょう。

See the Pen Demo: Box Model by Tyler Childs (@tylerchilds) on CodePen.

関連プロパティ

ボックスモデル関連のプロパティは以下になります。

・width：要素の幅*

・height：要素の高さ*

・max-width：要素の最大の幅*

・max-height：要素の最大の高さ*

・padding：要素のコンテンツの周囲のスペース（Note：背景を設定すると要素のpaddingスペースが色付けされます）

・border：要素のスペースを囲む線

・border-radius：要素の角を丸さ

・margin：要素の外側のスペース

・outline：追加のborderのようプロパティで、ドキュメントフローやボックスモデルに影響しない

・outline-offset：要素のborderとoutlineの開始点までの距離

・box-shadow：要素周りのシャドウ効果

* ボックスサイズに関するもの

ボックスモデルの注意点

ボックスモデル関連のプロパティを更新する場合に気を付けるべき注意点があります。

1 インライン要素はmarginを無視する

2 隣接する要素間でtopとbottomのmarginが共有される場合、片方が吸収されて値の大きいほうだけが適用される

6. レイアウト

ボックスモデルを理解したら、次のステップはレイアウトの構築です。レイアウトのもっとも実用的なアプローチはFlexbox（Flex）とGridを使用することで、両方ともdisplayプロパティの値になります。flexとgridはともに子要素の配置に影響を及ぼし、両者に類似点もありますがそれぞれ異なる目的をもっています。

これらはかなり深いテーマになってくるので、実際に触りながら理解するのが一番いいでしょう。Flexbox Froggyは、葉っぱの上にカエルを配置してFlexboxを学ぶゲームです。Grid Gardenは、ガーデニングでCSS Gridを教えてくれるゲームになります。

GridとFlexのほかに、directionとwriting modeについても言及しておきましょう。directionはテキストの方向を「左から右」または「右から左」へとコントロールします。これはインラインの方向です。writing modeは一歩進んでブロックの方向とインラインの方向をコントロールします。CSS Writing Modesの記事でもっと詳しく知ることができます。

こちらも参考にしてください： HTMLとCSSでローカライズと多言語コンテンツを実現する

関連プロパティ

レイアウトに関する重要なプロパティはこちら。

・display：要素とその子要素に対してblock formatting contextを決定する

・place-content：コンテンツの間と周囲のスペースを設定する

・place-items：直接の子要素に対してplace-selfの設定をする

・place-self：軸に対してコンテンツを配置する

・gap：rowとcolumnの間隔を設定する

・overflow：要素より大きなコンテンツの扱いをコントロールする

・direction：左から右（LTR）または右から左（RTL）というようにテキストの方向を設定する

・writing-mode：ブロックとインラインコンテンツの方向をコントロールする

・Note：place-*のプロパティはFlexとGridで使えますが、ほかのdisplayの値を使用しているときは無視されます。

7. スタッキング

通常のドキュメントフローに従うレイアウトの枠を超えて、要素を互いに積み重ねることも可能です。基礎となるのはStacking Contextで、これは要素に特定のプロパティが与えられた場合に構成されます（positionの値、gridの子要素、flexコンテナなど）。

関連プロパティ

スタッキングに関する重要なプロパティはこちらです。

・position：要素が配置されるコンテクストを決定する

・top/right/bottom/left：現状のstacking contextに相対的なポジション調整を適用する

・z-index：Z軸に沿ったレイヤーのスタッキングを特定し、高い値のほうが低い値の要素よりも前に来る

・mix-blend-mode：スタックされたレイヤーを複合的なライティング効果でミックスする

Note:：z-indexの値の影響範囲は相対的なstacking contextのみです。異なるstacking contextに属している場合、z-indexの値が高い要素が、値の低い要素よりも後ろになることがあります。

8. マルチメディア

<img>タグや<video>タグを使って画像や動画をWebページに挿入すると、デフォルトではインライン表示されます。フロートによって要素をほかのコンテンツの周囲に配置可能です。要素のコンテンツをフロート要素の周囲にラップさせたくないときは、クリアにすることができます。

コンテナに合わせて画像や動画のサイズを変更するために、object-fitを使用すると、background-sizeと同じような値を提供します。一方、coverとcontainは両方ともアスペクト比を維持します。coverは、より大きなサイズに合わせてクリップすることでコンテナをオブジェクトで埋めます。containはオプジェクト全体を空白スペースとともに小さいサイズに合わせて表示します。

関連プロパティ

マルチメディアに関する重要プロパティは以下になります。

・float：要素をドキュメントフローから削除し、コンテンツを要素の周囲に配置する

・clear：事前に設定されているフロートを無視する

・object-fit：コンテナ要素にメディアオブジェクトをどうフィットさせるか決定する

・background：要素に背景画像や色を設定する

・background-size：要素に背景をどうフィットさせるかを決定する

・clip-path：要素のコンテンツをマスクする

・shape-outside：要素を回り込む形状をカスタマイズできる

9. トランスフォーム

レイアウトとスタッキングを理解したら、次のステップとして有益なのはトランスフォームです。ドキュメントフローのポジションを変更することなく、コンテンツをさまざまな方法で操作できます。たとえば、ある要素を隠したいときにopacityを0に変更すると、要素自体はなくなっていないものの完全に見えなくなります。

transformは要素に変更を加え、translate、skew、rotale、scaleを可能にします。3Dに変容させることもできます。この場合には親要素にperspectiveの設定が必要で、これによりviewportに3D空間がうまれます。

See the Pen Demo: Transform by Tyler Childs (@tylerchilds) on CodePen.

関連プロパティ

トランスフォームに関する主要なプロパティがこちらです。

・opacity：要素とその子要素の透明度をコントロールする

・transform：CSSのvisual formatting model座標空間を変更する

・transform-origin：トランスフォームを適用する開始地点を設定する

・transform-style：3D要素のオーバーラップまたは交差のコントロール

・perspective：3D要素の表示を有効にし、表示距離を設定する

・perspective-origin：3D要素の消失点を変更する

・backface-visibility：要素の背面の表示とミラーイメージを実現する

Note：opacityとtransformは、アニメーションにおいて一番使えるプロパティです。より詳細な情報は、レンダリングパフォーマンスの記事とCSS Triggersのチートシートで見ることができます。

10. トランジション＆アニメーション

アニメーションを使うと繊細で洗練されたニュアンスをWebサイトに付加することができ、なめらかなユーザーエクスペリエンスが実現できます。アニメーションのために複数のさまざまなプロパティを組み合わせることが可能なので、コンテンツの動きやフェードを調和させられます。

一方、トランジションはプロパティの値を変更する際に便利で、たとえばユーザーがカーソルをホバーさせたときにボタンの色を若干暗くするような動作を実行できます。

パーセンテージを使ったルールセットを設定する@keyframe構文により、アニメーションの実装が可能です。animateプロパティによってアニメーションが適用されると、設定した時間に応じて個々のルールセットが順に働きます。

See the Pen Demo: Animations by Tyler Childs (@tylerchilds) on CodePen.

関連プロパティ

トランジションとアニメーションに関する重要プロパティです。

・transition：値が更新されたときのプロパティの変更方法を指定する

・transition-delay：トランジションがスタートするまでのディレイをコントロール

・transition-duration：トランジションにかかる時間をコントロール

・transition-property：トランジションのプロパティをコントロール

・transition-timing-function：トランジションのために使うeasing functionをコントロール

・animation：ルールセットに微調整されたキーフレームアニメーションを適用する

・animation-delay：アニメーションがスタートするまでのディレイをコントロール

・animation-direction：アニメーションが行き来する方法を指定する

・animation-duration：アニメーションにかかる時間をコントロール

・animation-fill-mode：アニメーションが完了したときのリセット方法を指定する

・animation-iteration-count：アニメーションのリピート回数をコントロール

・animation-name： @keyframeで宣言されたアニメーションの名前を指定する

・animation-play-state：アニメーションの一時停止や実行をコントロール

・animation-timing-function： アニメーションのeasingをコントロール

11. 条件付きのデザイン

CSSにはほかのプログラミング言語のような典型的なコントロールフローはありませんが、条件のルールを設定する方法がいくつかあります。これを設定することで、ネストされたCSSのルールセットが所与の条件に応じて適用されるようになります。2つの例を挙げましょう。

・@media：レスポンシブデザインのために使用します。@mediaにより、ブラウザのウィンドウサイズ、ピクセル数、アスペクト比、デバイスのメディアタイプをチェックできます。

・@supports：CSSは現在進行形で改良が続いているため、ブラウザによっては最新のCSS機能をサポートしていない場合があります。ブラウザが読み込めなければ新しいプロパティがCSSを壊すことはないわけですが、@supportsで関連するルールセットをラップしておけば、コードがより明示的で整理されたものになります。

基礎から始めてマスターへ

ここまでお付き合いいただき、ありがとうございました。テクニカルな要素が詰め込まれていたと思いますが、CSSの基礎が理解できたのではないでしょうか。Webアプリをスタイリングする一般的なプロパティと、スタイリングによってできることを今回はカバーしました。

プロパティはほかにもいろいろあり、多様なツールやイノベーションがコンスタントに開発されています。CSSのコアトピックについて、何かわからないことが出てきたら、またこの記事に戻ってきてもらえればと思います。

CSSを使って自分のプロジェクトに取り組み、今回記載したコンセプトを実践的に理解していけば、CSSのプロになる日も遠くはありません！