HTMLを学ぶ場合、必ず一緒に学ぶことになるCSS（カスケーディング・スタイルシート）。CSSは上手く活用することで、ウェブ構築作業の効率化、そしてSEO効果などが期待されています。どうせ、学ぶならしっかりと基本やメリットを理解したうえで、学びたいですよね？今回は、初心者にも分りやすいようにCSSの基本についてご紹介いたします！
CSSの歴史
CSSは、1994年にノルウェー人のコンピューター・サイエンティスト、ホーコン・ウィウム・リー氏により提唱されました。リー氏は、当時www（World Wide Web）を世に生み出した欧州原子核研究機構（CERN） の職員で、現在はオペラ・ソフトウェアの最高技術責任者 (CTO)に就任しています。
wwwやCERNの歴史については、以下の記事でも詳しく紹介しています。
【HTMLって何！？用途から歴史まで徹底解剖】
https://webtre-plus.com/archives/2015
CSSとは？CSSの特徴
HTMLがウェブサイトの構造（骨組み）であるのに対して、CSSはウェブサイトの体裁を定義するものです。これらを、別々に定義づけるために提唱されたのが、CSSなのです。CSSの登場によって、ウェブサイトの内用に合わせてスタイルシート切り替えが可能になりました。
カスケードとは、もともとは、「岩場を段になって流れる滝」という意味で、そこから派生して「庭園などにつくられる、階段状に連続した滝。水階段」「段々になっているもの。段階的に連なっているもの。」という意味をもつようになりました。（参考:『カスケード【cascade】』｜weblio辞書 https://www.weblio.jp/content/cascade）
IT用語では、カスケードは「カスケード表示」などの例に挙げられるように、「重なり合う、重ね合わせる」というような意味で使われています。CSSは、ウェブサイト制作者、ユーザーがそれぞれ定義した体裁の内用を重ね合わせられる特徴があるのです。
HTMLの基本について知りたい方は、こちらも合わせて読みましょう！
【保存版】HTML初心者の疑問を解決！HTMLの基本とは？
https://webtre-plus.com/archives/1933
CSSの使い方
CSSを活用すると、HTML内にデザイン内容を毎回書き込まずに済みます。
＜h1＞大見出し・サブタイトル＜/h1＞
この大見出しに対して、CSSを定義づけるときは、
文字の色を変更する場合
h1{color:#FFFFFF;}
文字の色は、カラーコード一覧表を参考にしましょう。CSSでは、基本的には16色から構成されるHTML 4と同じカラー数を定義しています。CSS 2.1では、これらの基本色に”orange”が追加されました。
文字の大きさの変更の場合
h1 {font-size:値の指定;}
文字の大きさを変更する方法は、いくつかあります。
pxを使用して文字の大きさを12pxに変更する場合
h1 {font-size:14px;}
%を使用して文字の大きさを20％大きくしたい場合は
h1 { font-size:120％;}
キーワードの指定により文字の大きさを変更する場合は
h1 { font-size:small;}
h1 { font-size: xx-large;}
ページ全体の文字の大きさを変更する場合
body { font-size: 大きさの値 }
ページ全体の文字の大きさを変更したい場合は、セレクタの部分をbodyに変えます。
段落ごとの文字の大きさを変える場合
p { font-size: 大きさの値 }
パラグラフ全体の文字の大きさを変更する場合は、セレクタの部分をpに変えます。
クラスごと文字の大きさを変える場合
.クラス名{ font-size: 大きさの値 }
クラス名の前には必ずピリオド（.）を打つようにします。クラスは、一度スタイルを定義づければ、何度も宣言を書く必要がなくなるので、手間が省けます。
id名の文字の大きさを変える
# id名{ font-size: 大きさの値 }
id名の前には必ずシャープ（#）を入れるようにします。クラスが同じHTML内で何度も同じスタイルを定義づけられるのに対して、idは一度しか定義づけする事ができません。
CSSを積極的に活用しよう！
今回は、CSSの歴史や使い方などを、初心者向けに分りやすく解説しました。CSSは、極力簡潔に書く事でSEO効果を上げたり、デザインを統一したりすることができます。HTMLでウェブサイトを構築する際には、CSSを積極的に活用して、よりユーザー・フレンドリーなウェブサイトを作りましょう！
