Infinity web schoolCascading Style Sheet:カスケーディングスタイルシート
（滝のような性質をもった）見た目を定義する紙
スタイルシートの正式名称は「Cascading Style Sheet」といい、それぞれの頭文字を取って「CSS」と呼ばれています。CSSとは見た目を定義する記述を意味します。
スタイルシートが登場する前は、デザインに関する定義をHTMLファイル内に記述していました。
すると、文書構造とデザインの定義が一つのファイル内に混在し、読みづらく、ファイルサイズも大きくなりがちでした。
しかしスタイルシートが登場した後は、
スタイルシートはデザインを定義することを目的に作られた記述法です。そのため、様々な要素を細かくデザインすることができます。新しい企画である「CSS3」を使えば、アニメーションやシャドウなどの定義をすることも可能です。
スタイルシートに定義したデザインを一つのHTMLファイル内で繰り返し使用できます。また、一つのCSSファイルを複数のHTMLに読み込ませることで、デザインを一括管理できます。こうすることでデザインの修正を簡単に行うことができ、運用管理を効率化できます。
デバイスごとのスタイルシートを用意することで、一つのHTMLファイルをいろいろなデザインで表示させることができます。
パソコン向けのデザイン、スマートフォン向けのデザイン、印刷用のデザインなど必要に応じた見せ方をさせることができます。
セレクタ｛プロパティ：値；｝
半角英数字を使って記述します。また、見やすさを考慮してセレクタやプロパティ、値以外の場所に半角スペースや改行を記述することができます。 全角文字での記述やセミコロンを忘れてしまうとエラーになるので注意しましょう。
一つのセレクタに複数のスタイルを定義する場合「｛」と「｝」の間に連続でスタイルを記述します。
CSSの場合、一つのセレクタに対して多くのスタイルを定義するので、一定義ごとに改行して見やすくきじゅつすることが多いです。中括弧の中は字下げして見やすくします。CSSは以下の３つの方式を使用して適用させます。
HTML内の要素にsyyle属性を追記して直接適用させる方法
HTMLのhead要素内にstyleタグを使って記述し適用させる方法
HTMLとは別にCSSファイルを作成し、HTMLファイルからのCSSファイルをリンクさせて適用させる方法
CSSの適用方式は90％以上「外部リンク方式」で行い、例外部分だけ「インライン方式」や「埋め込み方式」を使用します。
ピンポイントにスタイルを適用させたいときに使用します。
※インライン方式の場合は対象要素が決まっているためセレクタと「｛ ｝」を記述しない
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>無題</title> </head> <body> <h2 style="color: red;">見出し</h2> </body> </html>
そのページでのみスタイルを適用させたい時に使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無題</title>
</head>
<body>
<style>
h2 {
color: red;
font-size: 50px;
}
</style>
</body>
</html>
サイト全体で共有するスタイルを記述する場合に使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無題</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>見出し</h2>
</body>
</html>
※style.css(外部CSSファイル)
@charaset "utf-8";
h2 {
color:red;
font-size:50px;
}
Terapad(エディター)で外部CSSファイルを作成します。
@charaset"文字コード";
HTMLの時と同様に、CSSファイルでも文字コードを指定します。ファイルの先頭に「@charaset"文字コード";」と記述します。
名前の由来：link(つなぐ、連結する)
<link href="css/style.css" rel="stylesheet" type="text/css">
外部ファイルの読み込みを定義するのがlinkタグです。link要素は空要素（要素内に対象の文字列を持たない）のため、文書型宣言により記述法が変わります。
href属性はlink要素の必須属性です。外部CSSファイルの場所を相対パス、もしくは絶対パスで記述します。href属性の名前の由来は「HypertextREFerence（参照元）」です。
rel属性はlink要素の必須属性です。読み込む外部ファイルとの関係性を記述し、外部CSSを読み込む場合は値に「stylesheet」と記述します。rel属性の名前の由来は「relative(関連性がある、関係がある)」です。
読み込むファイルの種類（MIMEタイプ）を指定します。外部CSSを読み込む場合は値に「text/css」と記述します。
読み込む外部CSSを適用する媒体を指定します。値は「,(カンマ)で区切りながら順不同で複数並べることもできます。
color:red;
文字の色を定義するにはcolorプロパティを使用します。
| 値 | 記述例 |
|---|---|
| カラーキーワード | color:red; |
| 色番号（16進数） | color:#FF0000; color:#F00; |
| 色番号（10進数） | color:rgb(255,0,0); |
| 色番号（パーセント） | color:rgb(100%,0%,0%); |
| 色番号（透明度あり） | color:rgba(255,0,0,1); |
値を色の名前で指定します。代表的な色名は以下の通りです。
| 色名 | ||||
|---|---|---|---|---|
| 赤系 | 黄色系 | 緑系 | 青系 | モノクロ系 |
| pink | khaki | lightgreen | skyblue | white |
| magente | yellow | green | aqua | gray |
| red | gold | lime | blue | silver |
| purple | orange | olive | navy | black |
光の三原色R(RED),G(GREEN),B(BLUE)の強さを0～255で指定します。新しいブラウザではA(Alpha:透明度)を0～1で指定することもできます。
16進数の場合「＃FF0000」のように「＃」と6桁の数字で記述します。前から2桁区切りでRGBを意味し、00（暗い）～FF（明るい）で表します。また「＃F30」のように省略形で記述することもできます。この場合「＃FF3300」を意味します。
10進数の場合は「rgb(255,0,0)」のように記述し、それぞれ前からRGBの値を0（暗い）～255（明るい）で指定します。
パーセントの場合は「rgb(100%,0%,0%)」のように記述し、それぞれ前からRGBの値を0％（暗い）～100％（明るい）で指定します。
透明度を指定する場合は「rgba(255,0,0,1)」のようにrgbの後にaを記述し、4番目の値に透明度を0（透明）～１（不透明）で指定します。半透明の場合は「rgba(255,0,0,0.5)」のように指定します。尚、1の位の0を省略して「rgba(255,0,0,.5)」と書くこともあります。
font-size: 20px;
文字の大きさを定義するにはfont-sizeプロパティを使用します。
| 値 | 内容 |
|---|---|
| 単位付きの数値 | 単位付きの数値で大きさを指定 |
| mキーワード | 決められたキーワードで指定 |
数値と単位の間にスペースを入れないようにしましょう。値が０の場合には単位をつけなくても構いません。これらの単位はfont-sizeプロパティ以外にも使用することができます。
| 単位 | 内容 |
|---|---|
| px | ピクセル：ディスプレイの1画像を1pxとした単位 |
| em | エム：基準となる文字の高さを1とする単位 |
| rem | ルートエム：ルート要素（html要素）の文字の高さを1とする単位 |
| ex | エックス：小文字のxの高さを1とする単位（日本語ではあまり使わない） |
| ％ | パーセント：親要素の大きさに対する割合をパーセントで指定した単位 |
| 単位 | 内容 |
|---|---|
| in | インチ：1in=2.54cm |
| pt | ポイント：72pt=1in |
| pc | パイカ：1pc=12pt |
| mm | ミリメートル |
| cm | センチメートル |
font-sizeプロパティに使用できる代表的なキーワードは以下のとおりです。ただし、ブラウザによっては同じキーワードでもサイズが違ったり、対応していない古いブラウザがあるので、キーワードでの指定はおすすめしません。
| キーワード | xx-small,x-small,small,medium,large,x-large,xx-large |
|---|
color:red;
文字の書体を定義するにはfont-familyプロパティを使用します。
ただし、font-familyプロパティで指定した書体が閲覧者のPCに存在する場合にのみ適用されます。それを想定して、複数の書体を「,(カンマ)」区切りで指定します。最後にフォントのキーワードを指定することをおすすめします。
また、フォント名にスぺ―スがある場合は「”」か「’」で囲みます。
| フォント名 | 説明 |
|---|---|
| MS Pゴシック | Ｗindows標準ゴシック系フォント |
| メイリオ | Ｗindows標準ゴシック系フォント |
| ヒラギノ角ゴ Pro W3 | MacＯＳ標準ゴシック系フォント |
| Osaka | MacＯＳ標準ゴシック系フォント |
| MS P明朝 | Ｗindows標準明朝系フォント/td> |
| ヒラギノ明朝 Pro W3 | MacＯＳ標準明朝系フォント |
| フォント名 | 説明 |
|---|---|
| sans-serif | ゴシック体、サンセリフ体 |
| serif | 明朝体、セリフ体 |
| monospace | 等幅フォント |
| cursive | 手書き風フォント |
| fantasy | 装飾的フォント |
文字の太さを定義するにはfont-weightプロパティを使用します。
数値は細かく太さを指定できるように作られた数値ですが、現在は主に400（標準）と700（太字）が使われ、それ以外の数値を使うことはあまりありません。細かな太さ表示にブラウザが対応するまで400，700以外の数値を使わないようにしましょう。
| 値 | 内容 |
|---|---|
| bold | 太字にする |
| nomal | 標準の太さにする |
| 数値 | 太さを100刻みで指定 よく使われる値：400（標準）、700（太字） |
font-style:normal;
文字の斜体、非斜体を定義するにはfont-styleプロパティを使用します。ただし、日本語フォントを斜体にすると読みづらくなるためあまりおすすめできません。
主な使いどころはem要素やcite要素などブラウザの初期設定で斜体になるものを非斜体にする時に使用します。
text-decoration:none;
文字を装飾するにはtext-decorationプロパティを使用します。
リンクの下線を非表示にする時によく使います。点滅させる値もありますが、読みやすさを考えるとあまりおすすめできません。
また、青い文字色や下線の表示はリンクと間違えやすいため、使用するのはあまりおすすめできません。閲覧者の使い勝手を考えてスタイルを定義するようにしましょう。
| 値 | 内容 |
|---|---|
| underline | 下線をつける |
| overline | 上線をつける |
| line-through | 取り消し線をつける |
| blink | 点滅させる |
| none | テキストの装飾を解除 |
text-decoration:none;
行の高さを定義するにはline-heightプロパティを使用します。読みやすさを考慮して値を記述しましょう。
| 値 | 内容 |
|---|---|
| normal（初期値） | ブラウザが判断して高さを指定 |
| 単位付きの数値 | 単位に応じた数値で高さを指定 |
| 単位なしの数値 | 数値にフォントサイズを掛けた値で高さを指定 |
text-align:center;
ブロックレベル要素内の文章を、左揃え、右揃え、中央揃えにすることができます。
text-alignプロパティは要素内の行揃えを定義するプロパティであり、定義した要素自体の表示位置を変更するわけではないので注意しましょう。
| 値 | 内容 |
|---|---|
| left | 左揃え |
| right | 右揃え |
| center | 中央揃え |
text-indent:1em;
ブロックレベル要素内にある1行目のインデントを指定します。紙媒体では段落の最初をインデントすることが多いのですが、webではインデントしないことの方が多いようです。
| 値 | 内容 |
|---|---|
| 単位付きの数値 | 単位に応じた数値で高さを指定 |
background-color:#F0F0F0;
背景色を定義するにはbackground-colorプロパティを使用します。
| 値 | 記述例 |
|---|---|
| transparent(初期値) | 透明 |
| カラーキーワード | red,blue,yellow,pink,olive,green,skayblue,silver,gray |
| 色番号 | #FF0000 #F00 rgb(255,0,0) rgb(100%,0%,0%) |
| 色番号(透明度あり) | rgb(255,0,0,1) |
background-image:url(img/bg.gif);
背景に画像を表示させるにはbackground-imageプロパティを使用します。値には「url(画像の場所)」を記述します。
尚、指定された画像は要素の背景にタイル状に敷き詰められて表示されます。背景画像の繰り返し表示の設定は次のbackground-repeatプロパティで行います。
| 値 | 記述例 |
|---|---|
| url(画像の場所) | 画像の場所を絶対パスか相対パスで指定 |
background-repeat:repeat-x;
background-imageで指定した背景画像の繰り返し表示設定を定義します。
| 値 | 記述例 |
|---|---|
| repeat(初期値) | 透明 |
| repeat-x | red,blue,yellow,pink,olive,green,skayblue,silver,gray |
| repeat-y | #FF0000 #F00 rgb(255,0,0) rgb(100%,0%,0%) |
| no-repeat | rgb(255,0,0,1) |
background-position:right top;
background-imageで指定した背景画像の表示位置の調整をおこないます。２つの値を指定する場合は半角スペースで区切ります。
background-position:right top;
background-position:right top;
background-position: 10px 20px; background-position:-10px -20px;
| 値 | 内容 |
|---|---|
| left | 左寄せ |
| right | 右寄せ |
| top | 上寄せ |
| bottom | 下寄せ |
| center | 中央寄せ |
| 単位付きの数値 | 左上基準点からの距離（横方向 縦方向の順に記述） |
background-attachment:fixed;
背景画像を指定位置に固定するか、スクロールと共に移動するか定義
| 値 | 内容 |
|---|---|
| scroll(初期値) | スクロールと共に背景がそうも移動 |
| fixed | 背景画像が固定され、スクロールしても動かない |
background:F0F0F0 url(img/bg.gif) repeat-x right top fixed;
backgroundプロパティは今まで定義して来た背景画像に関する定義を半角スペースで区切りながら一括指定することができます。
指定する順番は自由で定義する必要もない値を省略することも可能です。
| プロパティ | 値 |
|---|---|
| background-color | #F0F0F0 |
| background-image | url(img/bg.gif) |
| background-repeat | repeat-x |
| background-position | right top |
| background-attachment | fixed |
HTMLの要素は長方形の箱を生成します。この表示領域群をボックスとよびます。ボックスは下の図のような領域をもっています。
要素内にあるテキストや画像などのコンテンツを表示する領域です。widthプロパティで幅、heightプロパティで高さを指定することができます。
枠線の内側にある余白のことを指し、内余白と呼ばれます。パディング領域には要素に指定した背景色や背景画像が適用されます。
枠線を表示する領域です。線の種類や、太さ、色を定義することができます。
枠線の外側にある余白のことを指し、外余白と呼ばれます。マージン領域には要素で指定した背景色や背景画像が適用されず、親要素の背景を透過して表示されます。
ブロックレベル要素は、要素全体を１つの長方形として表示されます。
ブロックボックスは、要素全体を１つの長方形として表示されます。
インラインボックスは、要素を１行づつ行ボックスにして折り返して表示されます。
width:600px;
widthプロパティはコンテンツ領域の幅を定義します。このプロパティはブロックレベル要素と置換インライン要素に適用できます。
| 値 | 内容 |
|---|---|
| auto(初期値) | 状況に応じて幅を設定 |
| 単位付きの数値 | 単位に応じた数値で幅を設定 |
| パーセント | 親要素の横幅に対する割合 |
padding:20px 30px 40px 0;
paddingプロパティは枠線の内側にある余白を定義します。paddingプロパティで指定した余白には対象要素の背景色や背景画像が適用されます。
また、値は１つから４つまで定義でき、半角スペースで区切って記述します。「0」の時は単位を省略して記述することができます。これはpadding以外のプロパティ以外のプロパティでも適用される共通のルールです。
| 値 | 内容 |
|---|---|
| 単位付きの数値 | 単位に応じた数値で余白を設定 |
以下のプロパティを利用することで位置を指定してパディング領域の値を定義できます。
padding-left:20px;
左内余白を定義
padding-right:20px;
右内余白を定義
padding-top:20px;
上内余白を定義
padding-bottom:20px;
下内余白を定義
border-style:solid;
border-styleプロパティはボーダー領域に表示する枠線の種類を定義することができます。尚、枠線を表示するにはあこのプロパティの定義が必須になります。忘れると枠線が表示されませんので注意しましょう。
また、ブラウザの種類によっては枠線の見え方が違ったり、正しく表示されない値があります。必ずブラウザ表示して確認しましょう。
border-width:10px;
border-widthプロパティはボーダー領域に表示する枠線の幅を定義することができます。 このプロパティは省略することができます。省略させ場合は初期値「medium」が適用されます。
また、値は1つから４つまで定義でき、半角スペースで区切って記述します。「0」の時は単位を省略して記述することができます。
コメントの記述法
/*コメント*/
コメントは制作時のメモ書きなどに使用されます。 CSSのコメントの記述法は「/*」でコメントが開始され、コメント終了を意味する「*/」がでてくるまでをコメントの対象文字列とします。
記述例