初心者でも分かる解説。CSSってなんだ? CSS3とは?

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
css3 image

CSSの超入門編です。初心者にも分かりやすく、専門用語を使わずに解説します。

CSSは、HTML, JavaScriptと並んで、Webサイト作成にはなくてはならない技術です。

これを読めば、CSSの役割、CSS3の『3』の意味も分かります。(バージョン番号ではありません。)

『いまさら見直すのは恥ずかしい』という人にもオススメです。

今回は、CSSの書き方とか具体的な手法は一切ありません。ただただ『CSSってなにもの?』だけの話です。

役に立つかと言われれば、雑学に近いです。でも、ウェブサイトの技術の中でのCSSの役割がはっきりと分かりますので、最後までお付き合いください。

HTML, CSS, JavaScriptの立ち位置

最初に、『CSSとは?』から入ると、一部分の話になるのであまり良くありません。ここはあえて、Webの全体像から始めます。

HTML, CSS, JavaScriptは、Webサイト作成では、

  • フロントサイド
  • フロントエンド

と言われます。

Webサイトは、見る側(ブラウザ)と見せる側(Webサーバー)が情報をやり取りすることでページが表示されます。

フロントエンドは見る側、ブラウザの技術になります。

  • ボタンやチェックボックスを表示(HTML)
  • 文字を大きくしたり色を変える(CSS)
  • コンテンツをマウスで動かす(JavaScript)

などできますよね?

これらは全部、ブラウザが処理をしてユーザーに見せています。()内は何が仕事をしているかです。

ブラウザは優秀なんです。HTML, CSS, JavaScriptの3つの仕事をこなしているのだから。

CSSの機能、HTML, JavaScriptとの関係

ブラウザからリクエストを受けて、Webサーバーから送られるデータはすべて文書(文字列)です。それがHTMLです。

(画像や動画などは、文書内のurlから別リクエストで取得します。)

HTMLをそのまま表示すると、分からない人には意味不明なものが表示されるだけです。

HTMLの内容は、ブラウザを右クリックして、『ソースコードを表示』で見ることができます。

HTMLは、『家の土台と骨組み』です。一応、キッチン、リビング、収納、トイレ、バスルームなど決められたところに配置はされてますがそれぞれの姿形は見えません。

HTMLは、コンポーネント(文字・ボタン・テキストボックスなど)の種類と配置を決めています。

一方、家の屋根、外壁、内装など住めるような形に肉付けするのはCSSです。

CSS(Cascading Style Sheets)は、コンポーネントのサイズ・色・形などの装飾を担当します。

たとえば、HTMLは

タイトルサンプル

本文サンプル
本文サンプル
本文サンプル

になります。これにCSSで装飾を加えると、

タイトルサンプル

本文サンプル
本文サンプル
本文サンプル

になります。全然見た目が変わりますね?

まず、構造化された保存文書を、読みやすく整形して表示するツールとしてブラウザは開発されました。
そのときはまだCSSはなく、HTMLに簡単なスタイルを定義して文書を見やすくしていました。
そのあと、画像を表示するなど、『新聞・雑誌みたいに表現したい』という流れができて、リッチな装飾が必要になります。
このとき、『HTMLは構造化文書の枠を超えてはいけない!』という声が強かったため、CSSが開発されました。

そして、家だけ立派にしても豊かな生活はできません。家具・家電など生活の『動き』を用意する必要があります。それがJavaScriptです。

JavaScriptは、コンポーネントに動きをつけて、リッチなWebサイトに仕上げます。

  • クリックしたら色を変える
  • ドラッグ&ドロップでコンポーネントを動かす

など多彩です。最近はWebアプリと言って、Webサイトをアプリケーションとして使うことができます。Webアプリのタッチ(マウス)操作の中核がJavaScriptです。

CSSはレベルが上がるにつれて、JavaScriptが担当していた動的な制御を行えるようになってきています。
またCSSは、コンポーネントの位置を変えることもできます。

CSSはバージョン管理じゃない

CSSは、HTML, JavaScriptとちがって、バージョンで管理されていません。CSS3の『3』は、バージョン番号ではなく『レベル』です。

CSSはW3C が仕様の策定・勧告を行なっています。

W3C (World Wide Web Consortium, ダブリュー・さん・シー)

HTML, CSSの標準化団体。仕様の策定から勧告まで行う。HTML5からは策定は行わず勧告だけを行うようになった。

策定

どのような機能を追加・変更・削除するのか決めること。

勧告

決まった仕様の対応を開発元に促すこと。

CSS3から仕様の策定・勧告の方法が変わる

2018/09の現在、CSSレベルは3で、仕様の策定・勧告が定期的に行われています。

ちまたに『CSS3』がよく出てくるのは、CSS3がCSSの最高スペックだから話題になるのでしょう。

CSS3は、仕様の策定・勧告の方法が変わったことでも話題になりました。

CSS3より前は、レベルごとに仕様を決めて策定・勧告されました。しかし、CSS3からは、モジュール(機能)ごとに策定・勧告されるようになります。

CSS3は、CSS2.1をベースにそれぞれのモジュールが独立して策定・勧告が行なわれているので、CSS3という仕様はありません。CSS3はそれぞれのモジュールの策定・勧告の総称です。

いま、CSS4の策定が始まっていますが、CSS3と同じ方法をとっているので、『CSS4で何が変わるのか分からない』と言われています。

CSS3はレスポンシブデザインの中核

いまのWebサイトは、スマホやタブレットなどいろいろなデバイスに対応することが絶対になっています。

  • レスポンシブWebデザイン(RWD)
  • レスポンシブデザイン
  • レスポンシブ

と言います。

CSSは、レスポンシブデザインの実現の大部分を担当しています。専門性・重要性が高まっているのはそのためです。

CSS3でメディアクエリーという機能が追加されました。これは、デバイスのサイズごとに定義することができる機能です。

レスポンシブデザインが必要になって、『CSS3』という言葉がよく聞かれるようになったのはそのためです。

まとめ

CSSは、Webサイトの中核の技術です。レスポンシブデザインによってますます専門性・重要性が高まっています。

Webデザインに関わる人は習得しなければならないものの1つでしょう。

Webデザイナーを目指す人は必ず習得しなければなりません。

あと、セットでHTMLも覚えたほうが良いです。JavaScriptもあるのですが、これは、がっつりプログラミングになるので、余裕があればチャレンジしても良いでしょう。

よく、『コーダーがいるからデザイナーは書けなくてもいい』という声を聞きます。
これは間違いです。どの世界に自分の表現を形にする方法を一度も習得せずに、他人に丸投げして正当化する人がいるのでしょうか?

  • 料理長は作れないのではなく『作らない』
  • 漫画家は書けないのではなく『書かない』

立派な料理人や大先生の漫画家でもないキャリアの人間が、誰かに仕事を丸投げするほど『何様ですか?』という話です。

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!