CSSとは？－初心者もできる！プログラミング基礎講座【第3回】

シリーズ記事「初心者もできる！プログラミング基礎講座」の第3回は、CSSとは？です。ウェブサイトを制作するためのプログラミングでHTMLとCSSは切っても切れない関係があります。

CSSとは何か、CSSの記述方法や注意点などを解説していきます。

CSSとは？

Cascading Style Sheetsの略で、単純にスタイルシートと呼ばれます。かんたんに言えば、HTMLの要素の大きさ、色、配置などを変えるためのプログラミング言語です。サイトのデザインのための言語と考えると分かりやすかもしれません。HTMLは内容、CSSはデザインというイメージです。

CSSファイル

HTMLとは別のファイルを作ります。HTMLはindex.htmlといったファイルで、拡張子は.htmlです。CSSはstylesheet.cssといった名前で書いていきます。拡張子は.cssです。今後の回で説明しますが、HTMLのHEAD要素内に、”このCSSファイルを読み込んでください”と指定します。そうすることで、CSSと連動してHTMLの各要素の大きさ、色、配置などが変化するというわけです。

CSSの記述方法

ざっくりですが、HTMLの”どこ”の”なに”を”どうするか”を記述していきます。例えば、HTMLの見出し（どこ）の色（なに）をオレンジ色にする（どうする）といった感じです。

HTML：

CSS：

上の画像のように、”どこ”の”なに”を”どうする”かを記述します。見出し「h1」（どこ）の色「color」（なに）をオレンジ色「orange」（どうする）にする場合です。

要素であるセレクタを指定して、｛　｝の間にプロパティを記述します。分かりやすいように、｛ のすぐ後で改行しイデントをつけてプロパティを記述します。さらに改行して、｝で閉じます。

プロパティの末尾に :（コロン）を、行末には ;（セミコロン）をつける決まりです。

これでHTMLの<h1>プログラミング講座</h1>の色が、CSSファイルによりオレンジ色に変えられ表示されます。イメージができたでしょうか。

色は通常カラーコードで記述します。例えば、#000000（真っ黒）や#ffffff（真っ白）などです。基本的に0からfまでの6桁の英数字で表します。主要な色は、redやblueのように指定もできます。詳しく知りたい方は、調べてみると面白いかもしれません。スポイト機能によって、サイトで使われている色のカラーコードが分かるサービスもあります。

まとめ

シリーズ記事 初心者もできる！プログラミング基礎講座【第3回】はいかがでしたか。CSSとは何か、CSSファイルやその記述方法について解説しました。

次回はCSSのプロパティのいくつかを紹介します。文字の大きさやフォント、幅や高さを変える方法についてお伝えします。

次回をお楽しみに！