今さら聞けない!CSSとは【初心者向け】

「CSS」とは何なのかを超初心者向けに解説した記事です。今さら知らないなんて言えない・・という方はお読みください。技術的な表現はなるべく使わないようにしているので、プログラミングやWebデザインの事前知識は不要です。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

本記事では、これからWebデザインを勉強したいという初心者向けに「CSSとは何か」について解説します。また、HTMLとはの記事もあるので合わせてお読みください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

20160620

 

田島メンター!!CSSは何を行うものなんですか~?

 

20163020-2

 

CSSの役割はサイトの「スタイル」を決定することだよ。音声による読み上げや印刷時に関する設定もあるけれど、一番多いのはデザインやレイアウトなどの「見た目」に関する指定だね。

 

20160620

 

見た目というと文字や画像の大きさ、色などですか?

 

20163020-2

 

そうだね。実際のサイトで、CSSが適用されている場合とそうでない場合の違いを見てみよう。

 

CSSとは

CSSとは、“Cascating Style Sheets” の頭文字をとったものであり、スタイルシートとも呼ばれます。

 

HTMLが、見出しやヘッダ情報などWebページの文書構造を形作るための言語であるのに対し、CSS言語は文書構造にデザインを施し、見栄えを整える役割を担っています。

webページ

 

 

実際に、ブラウザでWebページを表示してみましょう。

(ここでは、例としてキラメックス株式会社のWebサイトを開いています)

キラメックス

 

さきほど述べたように、このページはHTMLとCSSとが合わさって形作られています。試しにここからCSSを除き、文書構造のみを表示させてみましょう。

文書構造

たまに、Webページの読み込みがうまくいかない場合など、このような画面が表示されたことがある人もいるのではないでしょうか。

 

これにCSSがきちんと適応されると、さきほどのようなきれいなデザインのWebページが表示されるのです。

20163020-2

 

CSSを適用していない場合のサイトを見るとどうかな?

 

20160620

 

見出しと文字がただ順番に書かれただけになって、画像の位置や大きさもなんだか変わっちゃいましたね。

 

20163020-2

 

これらのレイアウトやデザインを指定しているのがCSSになるんだ。今見ているのは、HTMLだけで構成された状態の文書だね。

 

20160620

 

見やすいページを作るのに、CSSはとても大事なんですね。

 

CSSファイルの作り方

最後に、CSSファイルの作り方をご紹介しましょう。

ファイル名に拡張子の「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれます。

css

 

CSSの基本的な説明は以上です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

CSSを実際に書く方法

以下、html形式のファイルを用意します。

スクリーンショット 2016-05-30 16.34.11

cssをhtmlファイルに適用する場合、<head></head>内に

<link rel=”stylesheet” href=”style.css”>

といった一文を入れます。こうすることで、「style.css」というファイルを読み込んで書いたCSSファイルを適用してくれます。

例えば、下のような緑色の背景に白色の文字を表示させる方法を書いてみます。

スクリーンショット 2016-05-30 16.54.49

まずは、htmlファイルを用意しましょう。

スクリーンショット 2016-05-30 16.55.34

上で説明したように、cssの適用を<head></head>内に記述し、<body></body>内に表示させる文言を書いていきます。

続いて、CSSファイルの編集です。

スクリーンショット 2016-05-30 16.55.08

「main」と「text」という名前のクラスを用意したので、CSSで幅や配色などを指定していきます。

スクリーンショット 2016-05-30 16.54.49

それぞれ箱分けするとこのような形になっています。

最初はこれがイメージできず、自分のしたいレイアウトに出来ないことが多々ありますが、やっていく中で慣れていくはずです。

 

20163020-2

 

CSSに関する基本的な構造だよ。

 

20160620

 

“main”の部分、”text”の部分それぞれに色や大きさの指定をしているんですね。

 

20163020-2

 

この”.main”,”.text”のようなスタイルを適用させる範囲の指定を「セレクタ」というんだ。まずはこれを覚えておこう。

 

20160620

 

頭に入れておきます。ありがとうございました!

 

CSSを実際に書いてみたい場合は、CSSの書き方の記事も合わせてお読みください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。