Shopify ブログ

ネットショップ開設にチャレンジしてみませんか?

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

CSSCascading 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が読み込まれると、ブラウザはさらなる関連アセットを読み込みます。画像や動画、さらに重要なJavaScriptCSSなどがここに含まれます。

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

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

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

 

CSSの中身をのぞく

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

CSSのルールセットの詳細

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

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

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

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

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

3 継承された値

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

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

知識の確認

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

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

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

1. 四角形のコンセプト

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

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

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

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

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

2. displayプロパティ

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

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

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

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

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

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

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

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-boxborder-box2つの値が使われ、content-boxがすべての要素に対してデフォルトで設定されています。

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

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

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要素のborderoutlineの開始点までの距離

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

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

ボックスモデルの注意点

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

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

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

6. レイアウト

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

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

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

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

関連プロパティ

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

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

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

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

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

gaprowcolumnの間隔を設定する

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

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

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

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

7. スタッキング

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

関連プロパティ

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

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

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

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

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

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

8. マルチメディア

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

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

関連プロパティ

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

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

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

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

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

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

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

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

9. トランスフォーム

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

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

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

関連プロパティ

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

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

transformCSSvisual formatting model座標空間を変更する

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

transform-style3D要素のオーバーラップまたは交差のコントロール

perspective3D要素の表示を有効にし、表示距離を設定する

perspective-origin3D要素の消失点を変更する

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

Noteopacitytransformは、アニメーションにおいて一番使えるプロパティです。より詳細な情報は、レンダリングパフォーマンスの記事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により、ブラウザのウィンドウサイズ、ピクセル数、アスペクト比、デバイスのメディアタイプをチェックできます。

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

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

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

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

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

原文:STyler Childs 翻訳:深津望

 

Shopifyパートナープログラムでビジネスを成長させる
マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう!

今すぐ登録