スタイルシート「CSS」

はじめてCSSの学習をされる初心者の方向けにCSSの概要について解説しています。

CSSとは(Cascading Style Sheets)の略で、Webページのデザインを詳細に設定するための記述をするものです。

Webページは、HTMLとCSSをセットとしてデザインしていきます。

「HTMLには文書構造のみを記述する。」
「CSSでデザイン・レイアウトに関する記述をする。」

というようにキッチリと分けて考えましょう。

概要

  • スタイルシートの基本
  • スタイルシートをHTML文書に適用させる3つの方法
  • スタイルシートの書き方を覚えよう

HTMLとCSSの関係

HTMLは、見出しや段落などの文書構造を記述するためのものでした。

CSSは、このHTML文書に対して、文字の大きさやカラー、配置等のデザイン・レイアウトを指定するためのものです。

HTML文書内の「どんな要素に対して、どういったスタイルを適用するのか」を記述します。
css001-06
複数のHTMLページを一括で管理できることがスタイルシートの魅力の一つです。

スタイルシートでHTML文書の要素をデザインしておけば、それを必要な箇所に何度も繰り返して適用することができます。
css001-07

スタイルシートをHTML文書に適用させる3つの方法

インライン式

css001-02
body要素の中にある個別のタグに対して、直接スタイルを適用させる方法です。

文書構造のみの記述であるHTMLが複雑になるため、最近はこの方法はあまり推奨されていません。

埋め込み式

css001-03
head要素内にstyle要素を記述し、その中にスタイルシートを記述する方法です。

埋め込み方式は、そのページ独自のスタイルを指定したい時などに利用されます。

外部リンク式

css001-01
HTMLファイルとは別にスタイルシートのファイルを用意して、HTMLファイルからスタイルシートのファイルにリンクする方法です。

head要素内にlink要素を記述して、スタイルシートファイルを読み込み、HTMLファイル全体に適用させます。

スタイルシートの指定には、link要素のhref属性の値としてスタイルシートファイルへのパスを記述します。

Webサイトが複数ページで構成されている場合には、とても便利な方法で、この外部リンク方式で制作されることが多いです。
head内でのスタイルシートの指定

スタイルシートの書き方を覚えよう

css001-04
スタイルシートでは、「セレクタ」というスタイルを適用する対象にスタイルの種類を表す「プロパティ」を指定しその「値」を記述することで定義します。

プロパティが複数の場合は、以下のような記述になります。

セレクタの範囲を { } で、

プロパティと値の対応を : で、

プロパティの指定の終了を ;

で記述します。

 

よく使うCSSプロパティ
レイアウトやボックス制御
height 要素の高さを指定する
width ボックス領域の幅を指定する
padding 要素の内側の余白を指定する
margin 要素の外側の余白(マージン)を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
position 要素の配置方法について相対的か絶対的にするかを指定する
top positionに従って要素を配置する際に、上辺からの距離を指定する
right/td>

positionに従って要素を配置する際に、右辺からの距離を指定する
bottom positionに従って要素を配置する際に、底辺からの距離を指定する
left positionに従って要素を配置する際に、左辺からの距離を指定する
z-index 要素の重なり順序を指定する
要素の装飾
border 要素の周囲にボーダー(枠線)を付ける
background 背景に関する指定をまとめて行う
テキスト関連
color 文字の色を指定する
text-align 内包する要素に対して横位置の揃え方を指定する
line-height 行の高さを指定する
font-size 文字フォントのサイズ(大きさ)を指定する
font-weight 文字フォントの太さを指定する
font-family 文字フォントファミリー(フォントの種類)を指定する
text-decoration 文字列に装飾線や点滅を指定する