CSSとは？その役割と必要性を分かりやすく解説。
この記事はこの様な、超初心者に向けて書いています。
プログラマじゃなくても、IT知識をしることで何か世界が広がるかもしれませんし、会話で使えるので勉強するといいかもしれません。
では、内容へ入ります。
CSSとは？
CSSとは「Cascading Style Sheets」の略で、webサイトの装飾を指定するための「プログラミング言語」のようなものです。
CSSで書かれたファイルの拡張子は、「～～～.css」となります。
役割は？
cssの役割は、「webサイトの見た目の指定」です。
例えば、
- 文字の色
- 文字の大きさ
- 余白
などなど、挙げていくときりがないほど、色々と指定できます。
この様に下線を引くのもCSSという言語で指定しました！
文字を大きくしてみたらこんなに感じですね。
厳密に言えばプログラミング言語ではない。
厳密にはプログラミング言語ではなく、「スタイルシート」と呼ばれます。
CSS3というバージョンなんかじゃCSSアニメーションなど「webサイトに動きをつける」こともできるので、プログラミング言語って読んでもＯＫなんじゃないかなとも思いますが、あくまで役割は「装飾を指定する」ことだけなので、区別され「スタイルシート」と分類されます。
簡単なwebサイトは、htmlとcssで作られています。
初心者がまず、htmlを学んだ後に、次に学習するのがcssというのが一般的かと思います。
「htmlって何？？」という方は、下記の記事をどうぞ。
htmlとは？全くの初心者に向けて専門的な知識を解説。
HTMLとCSSの違い
世の中の多くのwebサイトはHTMLで記述されていると思います。
そのhtmlとcssは役割が違います。
それぞれの役割とは？
- HTMLは文書構造を示す。
- cssは装飾を指定する。
上記のような役割があります。
HTMLの役割は、「文章構造を示すこと」なのでつまり、検索エンジン側に、「ここは見出しですよ」など意味を伝えることです。
それとは別に、「CSSは装飾だけを指定」します。
HTMLとCSSは、なぜ分かれているのか？
HTMLとCSSがなぜ分かれているのか？は大きく分けて２つです。
HTMLとCSSが分かれるメリット
- 変更が容易になる。
- 装飾の為に、文章の意味を崩さないため。
上記の２つがあるので、HTMLとCSSは独立できるように設計されました。
実際はHTMLの中にはCSSを埋め込む形で、ひとつのファイルでwebページも作れますが、ファイルごと分けるのが一般的ですね。
詳しく理由を解説します。
例えば、100ページからなる大規模なwebサイトがあった場合、そのサイトの管理者が「見た目を変更したい！」と思った時に、100ページ分のHTMLでできたページを変更する手間がかかります。
ですが、HTMLとCSSを独立したファイルにして、役割を分けることによって、cssファイルを変更するだけで100ページ分が一気に変更されるので、後から修正が容易になります。
また、ユーザーの端末の画面幅によって、文字サイズを変更したい場合もあると思います。
この時、必要なページ数は、 100 × 3 のように、何倍ものHTMLファイルを用意する必要が出てきます。
ですが、HTMLとCSSを独立したファイルにして、役割を分けることによって、ベースの100ページ + CSSファイルを用意するだけでwebサイトが作れるので、「効率的」と言えると思います。
CSSはw3cによって標準化されている。
CSSはw3cによって標準化されています。なので厳密な書き方が分からなかった時は、w3cのwebサイトで調べるとOKです。
webブラウザを作るベンダー側も、国際的に標準化されたルール沿う形でwebブラウザを作るので、迷ったら参照しましょう！
W3Cのルールに沿った見やすいドキュメントを作る団体。
また、そのw3cが標準化しているルールにそった見やすいドキュメントを作っている「MDN」という団体を紹介します。
https://developer.mozilla.org/ja/docs/Web
上記のサイトが信頼できるとされていて、日本でも「MDN」で検索する人は多いと思います。活用してみて下さい！細かいルールが確認できて面白いですよ。
まとめ
CSSはwebサイトの見た目を整える言語で、CSSで書かれたファイルの拡張子は「～～～.css」
標準化している団体は「W3C」である。
そのルールを簡単にまとめているドキュメントを提供している団体が「MDN」であり、困ったらそのサイトを参照しよう！
こんな感じの記事内容でした！
ではまた！！！