Webクリエイター【初級/前編】,  ◎ CSSの基礎

スタイルシートとは

CSS(Cascading Style Sheets)
スタイルシートは、CSS(シーエスエス)とよばれています。
HTMLにスタイル機能を提供し表示を制御するための言語です。CSSを使用すると、Webページのレイアウトを整えることができます。Webページの余白や文字の大きさ、色などを指定することもできるので、Webサイトの見栄えが大きく変わります。Webデザインには欠かせないファイルです。
拡張子は、「.css」【例:style.css】

CSSの歴史

CSSには、CSS1・CSS2・CSS3という3つのバージョンがあります。
W3Cによって「草案」→「最終草案」→「勧告候補」→「勧告案」→「勧告」という段階を経て使用が決定しています。現在の最新バージョンは「CSS3」です。現在は、CSS3に対応しているブラウザのバージョンが少しずつユーザーへ浸透し始めている状況です。
よって現在は、CSS2とCSS3とを組み合わせて構成されているところが多くCSSアニメーションなど多彩なスタイルが少しずつ広がり始めています。また、スマートフォン用のブラウザは、ほぼCSS3に対応しており、変形や角を丸くするなどは多く見られるスタイルです。(2018年現在)

CSSの記述場所

CSSの記述場所は、主に次の2つがあります。
● htmlファイルに記述する
● 外部CSSファイルに記述する

● HTML内に記述する場合、さらに次の2通りの記述場所があります。
head内に記述:
【例】<style>ここに記述</style>
部分的スタイル:
【例】<p style="color:red">こんにちわ</p>
● 外部CSSファイルに記述する
【例】style.css
HTMLファイルとCSSファイルを関連付けることにより、Webページ全体にスタイルが適用されます。

本来スタイルシートは別ファイル(style.css)に記述するようにしましょう。

CSSファイルに記述する

CSSの注意点

CSSを記述する際には、次のような点に注意します。

  • 半角英数で入力する(「MS」など例外を除く)
  • 大文字小文字(半角)使用可
  • ブラウザやOSのバージョン、メディアによって見え方が異なる。

CSSの記述

エディタの冒頭に以下の記述をします。(文字コードを指定)

@charset "utf-8";

[code]@charset "utf-8";[/code]
(utf-8は、大文字でも小文字でもよい)
拡張子をCSSとして保存します。

外部CSSの読み込み

※relとhrefの順番は、どちらでも構いません。
<title>の直下辺りに記述するのがよいでしょう。

cssフォルダー内にstyle.cssを置く場合

ファイルのパスを間違わないようにしましょう。

コメントの書き方

CSSドキュメントにコメントを残すことができます。コメント文は、メモ書き(注意書き)のような役割をします。/**/内に書かれたコメントは、CSSスタイルとは認識されず、表示に影響を与えません。それぞれのスタイルが混乱しないよう整理するために、コメントを残します。

スタイルシートの記述

CSSの書式

セレクタ { プロパティ [属性]: 値 [プロパティ値];}
上記は、h1の文字の色を「赤」にする、といったスタイルの記述です。
セレクタは、「どこの」という意味を持ち、
プロパティは「何を」値は「どうする」という意味合いを
それぞれ持っていると考えると覚えやすいです。
プロパティと値は「:(コロン)」で区切り、
ひとつのスタイルが終了するごとに「;(セミコロン)」で区切ります。