かとのぼのマイコード・マイライフ

エンジニア兼ウェブサービス開発者のプログラミングと雑記ブログ

CSSとは?【入門者向けCSSの基礎知識】

what is Css

CSSの基礎知識についての記事です。この記事は、HTMLの概要がわかっている前提で書いています。もしHTMLが何かわからない方はこちらの記事をお読みください。

CSSとは?

 今回は、CSSがどういったもので、何の目的で使われるかについてわかりやすく書いています。専門知識は必要ないよう初心者向けに書いていますので、プログラミングに関して全く知識がない方も、これから始めようと思っている方も安心してください。

では、CSSがどう言う意味なのかからみていきましょう。

CSSの意味

CSSはCascading Style Sheetsの略です。

ウィキペディアの解説を引用します。

Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

 ちょっとわからないですね。ただ、非常に本質的なことがこの短い文章の中で見事に表現されています。

詳しく読み解きましょう。

第一のキーワードは「修飾(表示)」という部分です。CSSは、HTMLをどのように修飾するか指示するものです。つまり、HTMLがサイトの見た目を作る言語なら、CSSはそのサイトの見栄えをよくする(飾る)ための言語です。ですから、HTMLとCSSはお互い切っても切れない関係です。

第二のキーワードが、「スタイルシート」という部分です。CSSはHTMLを書いているところに直接は書き込みません。ウィペディアにあるようにHTMLには混ぜないで離してコードを書きます。

イメージしやすいよう人間に例えると、HTMLで人間の身体を作り、そこにCSSで洋服を作り着せてあげるような感じです。服(CSS)は身体(HTML)と分離しているので、脱がせたり、違う服を着せたりするのが簡単になります。これが人間の体と服が融合していたら、一々服を変えるのに人間の体をバラさなくちゃいけなくて(!?)メンドくさいですよね?ですから、HTMLとCSSは分離され、CSSはスタイルシートと呼ばれる方法で書かれています。

CSSの構造

では、どのようにCSSはコードを書くのでしょうか?

CSSの目的を思い出してください。CSSがやりたいことは、「HTML」の要素に装飾を加えることです。

ですから、CSSがコンピューターに伝える必要がある情報は、「どのHTML要素に」「どんな装飾を」「どんな風に付けるか」と言う3つの条件になります。

CSSのコードは、まさにこの3つを伝えるための形をしています。

例をみてください。HTMLで「CSSとは?」の見出しの文字を赤くしたいとします。その場合、まずHTMLは次のようになります。

css?

 

このHTMLにCSSを使って文字を赤くするにはこんなコードを書きます。

css color

これで、先ほどの「CSSとは?」の見出しの文字は赤くなります。

cssImage

図からわかるように、これは、HTMLの「h1」の「文字の色」を「赤」にしてね。というコードになります。シンプルでわかりやすいですね。

「まだちょっと慣れないな」と言う方も安心してください。CSSのこのパターンはシンプルなので、何回か書いていくうちに自然と身につきます。

 CSSはこの構造で作られていますので、この形をよく覚えておいてください。

CSSの学習方法

それでは、入門者向けのCSSの学習方法を紹介します。

CSSは、一見シンプルな感じがしますが、実は相当奥が深いので極めるとなると大変です。しかし、初心者はそこまで踏み込んでやりこむ必要はないと思いますので、割り切ってCSSの基本を身につけることに集中しましょう。今回はその観点でオススメの学習サイトを紹介します。

プロゲート

プロゲートの「HTML & CSS 初級編」がオススメです。このレッスンはHTMLの学習でもオススメしました。こちらではHTMLとCSSの両方が学習できるので入門者にピッタリだと思います。まずはこのコースで体験してみると良いと思います。「初級編」とあるコースは無料会員で学習できます。

ドットインストール

プロゲートの次は、ドットインストールの「はじめてのCSS」がオススメです。こちらは1レッスン3分間の動画で学習するプログラミング動画学習サイトです。全17回で、こちらも無料会員で学習することができます。

「CSSってこんな機能があるのか」という感覚で学習すると良いと思います。

まとめ

個人的に、CSSについては初心者がそこまで深く踏み込んで学習する必要はないと思います。プログラミング初心者でCSSをずっと勉強している人がいますが、ウェブデザイナーを目指していないのならそこまでCSSの学習に時間をかけない方が良いと思います。CSSは概要を理解して、基本的な使用方法がわかれば次の学習に進みましょう!

 

関連記事:

 

下のはてなブックマークをしていただけると、より多くのプログラミング初心者の方にこの記事が届けられます。私もとても励みになりますので「ブックマークしても別に良いよ」という方は是非よろしくお願いいたします。