シリーズ記事「初心者もできる!プログラミング基礎講座」の第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ファイルによりオレンジ色に変えられ表示されます。イメージができたでしょうか。
まとめ
シリーズ記事 初心者もできる!プログラミング基礎講座【第3回】はいかがでしたか。CSSとは何か、CSSファイルやその記述方法について解説しました。
次回はCSSのプロパティのいくつかを紹介します。文字の大きさやフォント、幅や高さを変える方法についてお伝えします。
次回をお楽しみに!