Zenn
🐈

CSS基礎-根本から理解しよう

2022/11/26に公開
CSS
初心者
入門
tech

CSSを何となく使ってませんか？

都度ググって、なんとなくCSSを書いてるという人は、この記事が参考になるはずです。

この記事を読むことで、そもそもCSSとは何か、どんなルールがあるのか、どこで仕様を確認すれば良いのか、といった根本的な内容を学ぶことができます。

ぜひ、本記事を参考にして、CSSへの理解を深めていきましょう。

そもそもCSSとは

CSSとは、Cascading Style Sheetsの略になります。

Cascadingは、「連鎖的」といった意味合いがあります。

なので、「連鎖的にスタイリングをするためのファイル」といった感じになります。

「連鎖的」の意味がイマイチ分からないと思いますが、こちらは後ほど詳しく説明します。

要は、HTMLのレイアウトを作ったり、コンポーネントやテキストをスタイリングするための言語になります。

つまり、CSSを使うことで、見栄えの良いWebページを作れるわけです。

CSSは、セレクタ、プロパティ、プロパティ値の3要素から構成されます。

セレクタで、何に対してスタイルを当てるかを指定できます。

そして、プロパティとプロパティ値を使って、どのようなスタイルを付けるかを指定できます。

例えば、h1要素に赤色を付けたいという場合は、以下のような記述になるわけです。

h1{
color: red;
}

この時の「color」がプロパティ、「red」がプロパティ値になります。

ちなみに、プロパティ値にはcalc()などといった関数を入れる場合もあります。

また、CSSのプロパティと値は、大文字と小文字を区別します。

CSSの歴史

Webの世界は、登場当初HTMLのみでスタイリングがされていました。

ただ、それだと表現力に欠けるので、1996年にW3C内の CSS Working Group によりCSSが作られました。

その次に、CSS2が1998年に発表されました。

そして、プロパティなどが増えたこともあり、少し時間を置いて2011年にCSS2.1が発表されました。

このように、全ての仕様を決めてから新しいバージョンを発表するとなると、時間がかかってしまいます。

なので、これ以降はプロパティをグループ分けした「モジュール」ごとに仕様を新しくしていく、という方針に変わりました。

例えば、フォントのためのプロパティをまとめたグループは、「Fonts Module」となります。

ちなみに、CSS2.1以降のバージョンが、一般的にCSS3と呼ばれています。

CSS3の開発は、今も耐えずに行われています。

これらの機能は、実験的に一部のブラウザのみに実装されることもあります。

そして、プロパティごとのモジュールや、モジュールのステータスを知りたい場合は、以下のサイトを参考にすればOKです。

https://www.w3.org/Style/CSS/all-properties.en.html

ステータスは次のような種類があります。

略語 ステータス 説明
ED Editor's Draft 編集者による独自草案
FPWD First Public Working Draft 最初に公開された草案
WD Working Draft 草案
LC Last Call Working Draft 最終草案
CR Candidate Recommendation 勧告候補
PR Proposed Recommendation 勧告案
REC Recommendation 勧告
NOTE Working Group Note ワーキンググループが公開するノート

RECになれば、問題なくほとんどのブラウザで使えます。

W3C は「CR（勧告候補）」まで進んだ仕様を使うように推奨していますが、特に理由がなければRECのものを使用するのが無難です。

CSSにおける主なルール

次に、CSSにおける主なルールについて解説していきます。

CSSのルールを把握する上で、知っておくべき概念は次の3つです。

  • カスケード規則
  • 詳細度
  • 重要度

CSSはこれは元にして、どのようなスタイルを優先して当てるかなどを決めます。

それぞれ具体的に解説していきます。

カスケード規則

先ほども説明したように、カスケードとは「連鎖的」という意味になります。

つまり、CSSは決められた順に沿って、プロパティ値を連鎖的に上書きしていきます。

例えば、CSSファイル内で同じ要素・プロパティに対して、異なるプロパティ値がそれぞれ書かれていたとしましょう。

CSSは上から順にコードを読み込んでいくので、後に書いたスタイルが優先されることになります。


h2{
  color: red;
}
/*blueが後にあるので、こちらが適用される*/
h2{
  color: blue;
}

このように、ある規則に沿ってプロパティ値をカスケーディングしていくのが、CSSの基本的な仕様となります。

そして、カスケーディングされていく優先度は、次のようになります。

重要度が高い > 詳細度が高い > 後に読み込まれる

ちなみに、ブラウザごとに要素に対してスタイルを当てているのが一般的ですが、ブラウザが指定しているスタイルは最も優先度が低くなります。

また、継承と言って、一部のプロパティは親のプロパティ値を引き継ぐことができます。

けれど、この引き継いだプロパティ値は、カスケーディングの優先度が最も低くなります。

詳細度

セレクタごとに、詳細度というものが異なってきます。

この詳細度が高いほど、カスケーディングの優先度が高くなります。

そして、詳しくは次の表の通りとなります。

セレクタ 詳細度
style属性 1000
id属性 100
それ以外の属性,クラス,疑似クラス 10
要素,疑似要素 1

これらの数値が高い順に優先して、スタイルが適用されていきます。

ちなみに、同じ詳細度のものを複数指定した場合は、その数に応じて詳細度が高くなります。

例えば、以下のようになります。

<h2 class="title2" aria-label="title">見出し2</h2>

.title2{
  color: red;
}
/*blueの方が詳細度が高くなるので適用される*/
.title2,[aria-label]{
  color: blue;
}

ただ、値の繰上げは起こりません。

つまり、クラスセレクタを100個指定したところで、id属性の方が優先されるわけです。

重要度

重要度とは、!importantが付いてるかどうかです。

この値が書かれている要素は、重要度が高いと認識されます。

なので、たとえstyle属性でスタイルを指定していても、!importantを使えばプロパティ値を書き換えることが可能です。

ただ、このようにあまりにも威力が大きので、デバッグが困難になる可能性が出てきます。

そのため、この!importantはあまり使わないことが推奨されています。

継承

一応、先ほどに述べた継承についても軽く解説していきます。

まず、プロパティ値には親から引き継がれるものと、そうではないものがあります。

主な継承されるプロパティは次の通りです。

  • border-collapse
  • color
  • cursor
  • font
  • letter-spacing
  • line-height
  • list-style
  • text-align
  • text-shadow
  • visibility
  • word-spacing

また、これらのプロパティは全て以下のプロパティ値を設定できるので、継承するかどうかを細かく決めることができます。

プロパティ値 意味
inherit 引き継ぐ。元々継承しないプロパティでも継承される
unset 親から継承できるプロパティの場合はinherit、継承できないプロパティはinitialの振る舞いになります。
initial ブラウザーのデフォルトスタイルシートを設定するブラウザーのデフォルトのスタイルシートで値が設定されておらず、かつそのプロパティが自然に継承される場合は inherit が代わりにプロパティ値として設定されます。

そこまで意識しなくても、仕事は問題なくこなせると思うので、頭の片隅に置いておけばOKです。

@規則

CSSには、@を使って表現する独自のルールがあります。

これを使用することで、普通とは違った動作をさせることができます。

具体的は、以下のようなものがあります。

  • @import 他のcssファイルをインポートできる
  • @media メディアクエリを指定できる
  • @font-face webフォントなどが使用できる

他にも色々とありますが、こちらは適宜調べればOKです。

ベンダープレフィックス

最後に説明しておくべきこととして、ベンダープレフィックスというものがあります。

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。

例えば、このベンダープレフィックスには種類があり、主に次のものが挙げられます。

  • -moz-: Firefox
  • -webkit-: Google Chrome、Safari
  • -o- : Opera

また、このベンダープレフィックスは、実際に勧告されてからも動くように、ベンダープレフィックス無しのものも一緒に書いておくのが一般的です。

例えば、以下のように書くことになります。

div {
 transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -o-transform: rotate(45deg);
}

これを知っておかないと、最初は混乱すると思うので頭に入れておきましょう。

まとめ

今回は、CSSの基本的な仕様などについてまとめてきました。

これを意識すれば、少しは開発のクオリティが上がるはずです。

ぜひ、参考にしてください。

宣伝

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。
YouTubeのvideoIDが不正ですhttps://www.youtube.com/channel/UCqaBUPxazAcXaGSNbky1y4g

インスタの発信も細々とやっています。
https://www.instagram.com/hinoshin_enginner/

興味がある方は、ぜひリンクをクリックして確認してみてください！

Discussion