CSS3の基礎

CSS3の基礎

CSS3とは

CSS(Cascading Style Sheets)は、スタイルシートとも呼ばれ、サイト(Webページ)の見た目を制御します。
HTMLと組み合わせて、HTMLの要素ごとに、そのレイアウト・サイズ・色・背景・ボーダー・テキストの書式などを指定します。

 

CSSは、一般的にはHTMLファイルとは別に独立してCSSファイルを作成して、それをHTMLファイルの中のlink要素によって読み込んで使います。
HTMLの style要素の中に書く方法、各要素の style属性 に書く方法もありますが、HTMLファイルと独立してメンテナンスできるため、普通はHTMLファイルとは別にCSSファイルを作り、HTMLファイルのlink要素で呼び出す方法が一般的になっています。
Cascading(カスケーティング)の意味は、段階上のがけを流れ落ちる滝というイメージから、ルールセットを段階的にチェックしながらスタイルを選び出すしくみということになっています。

CSS3のバージョンアップについて

CSSも、HYMLがHTML1.0からバージョンアップしてHTML5.0になってきたように、CSS2.0、CSS2.1とバージョンアップして、CSS3となっています。
CSS3は、以前のCSSを踏まえて新しい機能を追加した使用の総称となっていて、CSS2.1の仕様の大半がそのまま引き継がれています。
CSS3となったことにより、サイト(Webページ)に画像にたよらずCSSだけでボタンを作ることもできるようになり、レイアウトも非常に簡単にできるようになりました。
以前ならば画像を使ったり、JavaScriptを使っていたことが、CSSファイルをいじるだけでできるようになています。

CSS3をHTML5で使う

CSS3のスタイルシートをHTML5で書かれたWebページに反映させるには、スタイルシートを link要素 を使って呼び出す必要があります。
その場合、HTMLファイルに次のように記載します。

<link rel="stylesheet" href="CSSファイルのパス">

こうすることで、HTML文書にスタイルシートが適用されることになります。

CSSの基礎

CSSのルールは非常にシンプルです。

 

セレクタプロパティ:値;

 

これをわかりやすく言いかえると、次のような感じになります。

どこのなにを:どうする;

 

例えば、次のようなボタンを作りたいとき

サイト作成1

もちろん画像を貼るという方法もありますが、CSSで文字の長さに合わせたボタンを設置することができます。

 

実際のHTML5とCSS3

まずは、HTML文書のボタンを入れたい場面に、次のように記載します。

<div class="btntest001">CSSの基礎について</div>

そして、CSSには次のような記載をします。

.btntest001{
display: inline-block;
border-radius: 8px;
border: solid 1px blue;
padding: 4px;
box-shadow: 1px 1px 4px #888
}

サイト作成1

 

※参考:ボーダー(ボックスの境界線)

 

CSS3はレイアウトにも威力を発揮

CSS3は、文字やボックスの修飾に役立ちますが、ホームページ全体のレイアウトの指定にも威力を発揮します。

 

例えば、ヘッダの高さや、メインカラムの幅の変更・背景の配置などはCSS3によって行われます。
さらに、表示する画面が変化することによって、レイアウトを変えるという部分についてもCSS3が威力を発揮します。