CSSとは?|CSSとは何か、HTMLとCSSの役割の違いなどについて3分でわかりやすく解説

用語解説

こんちには。キノコードです。
このレッスンでは、 CSSについて説明をします。

▼ YouTube動画はこちらからどうぞ。

この記事の執筆・監修

キノコード
キノコード

テクノロジーアンドデザインカンパニー合同会社のCEO。
日本最大級のプログラミング教育のYouTubeチャンネル「キノコード」や、プログラミング学習サービス「キノクエスト」を運営。
著書「あなたの仕事が一瞬で片付くPythonによる自動化仕事術」や、雑誌「日経ソフトウエア」や「シェルスクリプトマガジン」への寄稿など実績多数。

CSSとは?

CSSとは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略で、スタイルシート言語の1つです。
スタイルシート言語とは、構造化された文章のデザインを変更する言語のことです。
つまり、CSSは、Webページのデザインをつくる言語です。
CSSでは具体的に、文字の太さや色を変えたり、背景色を変更したり、余白を調整したりといったことができます。

そのため、CSSが使えるようになると、Webページを自由にデザインできるようになります。
ちなみに、スタイルシート言語にはCSSの他に、XML用のスタイルシート言語のXSLがあります。

CSS

HTMLとCSSの役割の違い

CSSはHTMLと組み合わせて使います。役割はどのようになっているのでしょうか?
HTMLとは、Webページなどの文章を構造化する言語です。
一方、CSSは、HTMLで作った文章のデザインを変更する言語です。
そして、プログラミング言語のJavaScriptを使うと、ページを更新しなくても画像が切り替わったり、入力中に検索候補がでてきたりと、動きのあるWebページを作ることができます。
普段私たちがよく見ているWebサイトは、HTMLで文章、CSSでデザイン、JavaScriptで動きをつけるといった役割分担でできています。

HTMLとCSSの役割の違い

CSSが必要な理由

次に、CSSが必要な理由を説明します。
文字の太さを変えたり、色を変更したりなどの文章を修飾するといったデザイン変更は、HTMLだけでもある程度は可能です。
しかし、CSSを使うと、webページをよりきめ細やかにデザインできるようになります。
例えば、他の文字や画像との間隔を広げて見やすくしたり、画像やボタンを均等に並べたりといったことができます。
また、HTMLは文章、CSSはデザインを記述するといった役割分担すると、Webページのソースコードが読みやすくなります。
ソースコードが読みやすいと、Webサイトの修正が楽になります。
反対に、ソースコードが読みにくいと、読むだけで大変になります。
ソースコードを読みやすくすることにより、Webサイトの修正や改善のスピードをあげることができます。

HTML、JavaScriptについては別で解説します。

ぜひご参考ください。

KinoCode チャンネル

YouTubeで毎日動画配信しています。
動画は3分間なので、
 ・通勤時間
 ・お昼休み
 ・お手すきのとき
 ・寝る前
など手軽に視聴できます。
 
ちょっとしたインプットにどうぞ!
 
▼チャンネル登録はこちらからどうぞ。
未経験からはじめるPython学習「キノクエスト」 キノクエスト
  • スキルアップしたいけど何からはじめればよいかわからない…
  • プログラミングスクールに入りたいけど料金が高い…
  • プログラミングを学んでも業務やキャリアに活かせるか不安…

キノクエストは、このような悩みを持つ方にぴったりのプログラミング学習サービスです。
国内最大級のプログラミング学習系YouTubeチャンネル「キノコード」が提供しているから、未経験者にもわかりやすく質の高い学習体験を実感していただけます。

キノクエスト