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サイトが作れるので、「効率的」と言えると思います。
作って学ぶ HTML&CSSモダンコーディング
Flexbox や CSS Grid など、今のCSSの書き方をサンプルサイトを作りながら学べる本です。
Amazonのアソシエイトとして、当ブログは適格販売により収入を得ています。
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」であり、困ったらそのサイトを参照しよう！
こんな感じの記事内容でした！
ではまた！！！
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］
HTMLとCSSを、Webサイトを1つ作りながら基礎から通して学びたい方向けの入門書です。
Amazonのアソシエイトとして、当ブログは適格販売により収入を得ています。
＼ めちゃくちゃ便利です ／
毎日の新着を、通知で受け取る
最新の技術の動きを1分で読める記事にして、毎日お届けします。登録は無料で、いつでもやめられます。
iPhone は「ホーム画面に追加」すると通知を受け取れます
iPhone では、Safari で開いたままだと通知を出せない決まりになっています。このブログをホーム画面に置くと、アプリのように通知が届くようになります。下の5つを順番に行ってください。1分ほどで終わり、料金はかかりません。
-
共有ボタンを押す
いま見ているこのページのまま、画面のいちばん下を見てください。真ん中にある四角から上向きの矢印が出ているマークが共有ボタンです。これを1回タップします。
下のバーが見えないときは、画面を指で少し下に動かすと出てきます。
-
「ホーム画面に追加」を選ぶ
画面の下からメニューが出てきます。メニューを指で上に動かして下のほうを表示し、「ホーム画面に追加」（＋のマーク）を探してタップします。
見当たらないときは、メニューの中の「その他」や「…」を押すと出てきます。
-
右上の「追加」を押す
「ホーム画面に追加」という画面に変わります。名前は「皇帝ペンギン」のままで大丈夫です。右上の「追加」をタップします。
-
ホーム画面のアイコンから開く
Safari を閉じてホーム画面に戻ると、ペンギンの絵の「皇帝ペンギン」というアイコンが増えています。これをタップして開きます。
ここが大事です。Safari からではなく、必ずこのアイコンから開いてください。
-
「通知をオンにする」→「許可」
開くと、画面の下に「通知をオンにする」という黄色いボタンが出ます。タップすると確認が出るので、「許可」を選びます。「通知をオンにしました」と出たら完了です。
次の日から、新しい記事が出るたびに通知が届きます。やめたいときは、記事の下の「この端末の通知をやめる」を押すか、アイコンを削除してください。
LINE や X のアプリ内で開いている場合は、先に右下や右上のメニューから「Safari で開く」を選んでください。
動画でじっくり学びたい方は YouTube メンバーシップ へ。