未経験者のためのCSS入門ガイド

CSSとは何か？CSSで何ができるのか？CSSはウェブページの見た目を表現するための言語

「HTMLとは何か？」で、HTMLとはウェブページ（Webサイト）を作るための言語という説明をしました。ですが、HTMLだけでは限られた見た目・表現のウェブページしか作る事ができません。ウェブページの見た目を指定するには、CSSが必要になります。

CSSはスタイルシートとも呼ばれていて、ウェブページ上のコンテンツをどのような見た目で表示するかを定義する事ができます。別の言い方をすると、HTMLのタグ要素に装飾（スタイル）を与える事ができます。
例えば、HTMLで書いた文字コンテンツに色をつけたり文字サイズを変更したり、画像コンテンツのサイズを調整したり影をつけたり、また、ページのレイアウトを定義するのがCSSの役割です。

CSSの知識やコーディングスキルは、プログラマ・ウェブデザイナにとって必須

ウェブサイトを作るには、HTMLとCSSの知識とコーディングスキルが必須です。普段みなさんが見ているYouTubeやヤフーなどのサイトも、当たり前のようにHTMLとCSSが使われています（もちろんその他の技術も使われていますが）。

自分で勉強しながらウェブサイトを作ってみたい、ゆくゆくはWebサービスを作りたいと考えている方は、まずはHTMLとCSSを習得するための勉強からチャレンジするのが良いと思います。

CSSの実例、実際のCSSのコード

CSSがどのようなもので、どうやってウェブページを装飾できるかを簡単なコード例で示します。

まず、この3行のコードはHTMLのみです。CSSは使っていません。

<h2>CSSの入門サンプル</h2>
<img src="/itintro/img/sample.jpg" alt="かわいい猫">
<p>CSSはスタイルシート言語です。ウェブページを装飾できます。</p>

そして、このHTMLだけの3行をブラウザで表示するとこうなります。

CSSの入門サンプル

CSSはスタイルシート言語です。ウェブページを装飾できます。

続いて、HTMLだけでなく、CSSも追加します。

<style>
#csssample{
  background-color: #eeeeaa;
}
#csssample h2{ 
  font-size: 13px;
  color: red;
}
#csssample img{
  width: 100px;
  box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
}
</style>
<div id="csssample">
<h2>CSSの入門サンプル</h2>
<img src="/itintro/img/sample.jpg" alt="かわいい猫">
<p>CSSはスタイルシート言語です。ウェブページを装飾できます。</p>
</div>

このHTMLとCSSをブラウザで表示すると、こうなります。

このサンプルコード例では、CSSで文字サイズや画像サイズを縮小したり、画像に影をつけたり、全体の背景色を装飾しています。センスのかけらなんてまったくない装飾ですが、CSSで見た目の変更、ウェブページのデザインの表現ができる事がわかってもらえたと思います。

実際のCSSはもっと様々な表現ができますので、このCSSのサンプルコード例を見て、何だこんなものかと落胆はしないでくださいね。

Javascript、HTMLとCSSの次のステップ

HTMLとCSSを習得した後の次のステップ、もしくは同時に学習する必要があるスキルがJavascriptです。

HTMLがウェブページを作るための言語、そしてCSSがHTMLのタグ要素に装飾（見た目、スタイル）を与える事ができるものでした。このHTMLとCSSで簡単なウェブサイトを制作する事ができますが、少し動きがあるウェブページを作るにはJavascriptが必要になります。

Javasciprtはプログラミング言語です。プログラミング未経験者にとっては、HTMLとCSSよりも少し敷居が高く感じるかもしれません。ですが、プログラミングにチャレンジしたい方、Javascriptを使ったサイトを作ってみたい方、将来Webサービスを作ってみたいと考えている方にとっては、Javascriptは絶好の勉強機会になるし、役に立つスキルになるはずです。

Javascriptはプログラミング言語なので計算やサーバとの通信など多くの事ができますが、まずはウェブページに表現を与える事を目的にJavascriptの習得にチャレンジしてみてるもいいかもしれません。

未経験者のためのJavascript入門ガイド

[広告] CSS入門者向けの本の紹介

世界一わかりやすいHTML&CSSコーディングとサイト制作の教科書[改訂2版] (世界一わかりやすい教科書)
ウェブサイト制作の入門者向けの書籍です。ウェブサイト制作の説明から始まり、メインはHTMLとCSSのコーディングの基本についてです。HTMLとCSSが同時に学習できるのがいいですし、バージョンもHTML5とCSS3なのもいいと思います。

スラスラわかるHTML&CSSのきほん 第3版
ウェブサイト制作の入門者向けの書籍です。自分で初めてHTMLとCSSをコーディングしてウェブサイトを作ってみたいという方にとってはいいと思います。

CSS入門者向けのサイトの紹介

初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！
CSSの書き方について１から説明されています。1ページに簡潔にまとめられていますので、初めてHTMLとCSSを書いてみようとしている方にとって、とてもわかりやすく参考になると思います。

CSS入門
CSSでよく使うタグについて丁寧に説明されています。