CSSとは? 簡単解説!マンガでわかるCSS入門

公開日: : CSS

CSS解説マンガ1

CSSとは?

CSSとは、Webページの見た目を担当する言語です。
「カスケーディングスタイルシート」の頭文字をとって、CSSと名付けられました。

CSSを使うと何ができるの?

CSSを使うと画像のレイアウトをしたり、文字や背景に色を付けたり等、思い通りにデザインすることができます。

CSSとHTMLは役割が違う

  • HTML:文書の意味や構造を定義するもの
  • CSS :Webページのデザインやレイアウトを定義するもの

HTMLは、見出しや段落などを定義するタグを使って、ページ内のコンテンツの構造をブラウザ等に知らせるための言語です。

HTMLは、そもそもデザインをするための言語ではないのですが、Web環境の発展に伴い、色やフォントの指定、画像のレイアウトといったデザイン要素までもが求められるようになり、HTMLに定義されるようになってきました。

HTML

文章の構造を知らせるためのHTMLコードに、見た目を定義するコードが入ってきたら、コードが読みづらくなっちゃうよね。コードを編集する人間にとっても、ブラウザやロボットなどにとっても不親切だね。


HTML

そうそう、だからW3Cという機関が、「文書構造の指定はHTMLに」「デザインの指定はCSSに」と役割を切り分けてくれたんだ。


HTML

(ふーん、だからHTMLちゃんは飾り気がないのか)


HTML

何かじろじろ見られている気がする…。
ちなみにHTMLって何?という方はこちらの記事をどうぞ。
HTMLって何?簡単解説!マンガでわかるHTML入門


※W3C(ダブリュースリーシー)とは、Webページの言語や標準規格を決めている非営利団体のことです。

CSSがあるときとないときを比較してみた

HTML

まぁ百聞は一見にしかずって言うし、CSSをくっつけた場合とCSSをとりはずした場合のWebページを比較してみようか


CSSがあるとき

css_on

HTML

おー!かっこいいページ!


CSSがないとき

css_off

HTML

え!?これさっきと同じページなの…?随分統一感がなくなっちゃったけど


HTML

そうだよ〜。CSSとHTMLを完全に分離させているから、CSSだけ取り外すことが可能なんだ。ほとんどのWebページはそうやってるんじゃないかな。CSSの書き方やくっつけ方についてはまた今度の記事で解説するよ


Thanks!
画像キャプチャのためにお借りしたフリーWebテンプレート:Obscura

記事作成:湊川 あい
マンガ・イラスト:湊川 あい


The following two tabs change content below.

湊川 あい

湊川あい(みなとがわ あい) 絵を描くWebデザイナー。2014年より「マンガでわかるWebデザイン」をインターネット上に公開していたところ、出版社より声がかかる。 著書「わかばちゃんと学ぶWebサイト制作の基本」 Web連載「マンガでわかるGit」「わかばちゃんが行くオフィス訪問マンガ
  • Pocket       
  • このエントリーをはてなブックマークに追加

関連記事

manga_CSS3_resize

CSS外付けのメリットとは?マンガでわかるCSS入門

CSSは外付けのメリットって? CSS外付けのメリットはこんなかんじ 1 メンテ

記事を読む

image

Web制作で使う言語たちを図解してみた HTML,CSS,JavaScript,PHP

HTML CSS JavaScript PHPの関係を図解してみた HTML 「HTML

記事を読む

image

HTMLちゃんとCSSちゃんを擬人化するとこんな感じ

  ちょっとラクガキ。 HTMLちゃんとCSSちゃんの日常を描いてみました。

記事を読む

CSSは外付け?直書き?

CSSは外付け?直書き? マンガでわかるCSS入門

CSSは外付けがテッパン! CSSでWebページを装飾するとき、CSSは外部ファイル化

記事を読む

manga_cssmakefile

CSSファイルの作り方 マンガでわかるCSS入門

CSSファイルってどうやって作るの? Webデザインに初めて挑戦するとき、「CSSっていう

記事を読む

image

マンガでわかるWebデザインが書籍化!全国の書店・アマゾンで発売

マンガでわかるWebデザインが本になりました! 「わかばちゃんと学ぶWebサイト制作の基本」 出

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

dakkou
マンガでわかるGitが書籍化!2017年4月21日 書店にて発売予定

マンガでわかるGitが書籍になります Web連載中の「マンガでわかる

tax_001
マンガでわかる確定申告 第1話 源泉徴収ってなあに?

第1話 源泉徴収ってなあに? 書籍「わかばちゃんと学ぶWebサイト制

HTMLちゃん
2016年ふり返り:本を出して会社を辞めてフリーランスになってました

湊川あいです。 Webデザイナーの傍ら、マンガや図解を取り入れた技術書

Gitコラボ漫画
【コラボマンガ】怖くない!黒い画面入門【 #シス管系女子 + #マンガでわかるGit 】

こんにちは!絵を描くWebデザイナーの湊川あいです。 普段 マンガでわ

emojigit_catch01
絵文字でわかるGit🍣 マージとリベースの違い・リセットとリバートの違い

こんにちは。絵を描くWebデザイナーの湊川あいです。 絵文字 / Em

→もっと見る

PAGE TOP