Infinity web school

スタイルシートとは

Cascading Style Sheet

Cascading Style Sheet:カスケーディングスタイルシート

(滝のような性質をもった)見た目を定義する紙

スタイルシートの正式名称は「Cascading Style Sheet」といい、それぞれの頭文字を取って「CSS」と呼ばれています。CSSとは見た目を定義する記述を意味します。

スタイルシートのメリット

CSSの記述法

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

半角英数字を使って記述します。また、見やすさを考慮してセレクタやプロパティ、値以外の場所に半角スペースや改行を記述することができます。 全角文字での記述やセミコロンを忘れてしまうとエラーになるので注意しましょう。

記述例

複数のスタイルを定義する

一つのセレクタに複数のスタイルを定義する場合「{」と「}」の間に連続でスタイルを記述します。

CSSの場合、一つのセレクタに対して多くのスタイルを定義するので、一定義ごとに改行して見やすくきじゅつすることが多いです。中括弧の中は字下げして見やすくします。

記述例

コメントの記述法

/*コメント*/

コメントは制作時のメモ書きなどに使用されます。 CSSのコメントの記述法は「/*」でコメントが開始され、コメント終了を意味する「*/」がでてくるまでをコメントの対象文字列とします。

記述例

CSSの適用方法

CSSは以下の3つの方式を使用して適用させます。

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;
 }

外部CSSファイルの作成

Terapad(エディター)で外部CSSファイルを作成します。

外部CSSファイルの文字コード指定

@charaset"文字コード";

HTMLの時と同様に、CSSファイルでも文字コードを指定します。ファイルの先頭に「@charaset"文字コード";」と記述します。

外部CSSファイルを読み込む

link要素

名前の由来:link(つなぐ、連結する)

<link href="css/style.css" rel="stylesheet" type="text/css">

外部ファイルの読み込みを定義するのがlinkタグです。link要素は空要素(要素内に対象の文字列を持たない)のため、文書型宣言により記述法が変わります。

外部CSSのパスを記述する属性(必須):link要素にhref属性

href属性はlink要素の必須属性です。外部CSSファイルの場所を相対パス、もしくは絶対パスで記述します。href属性の名前の由来は「HypertextREFerence(参照元)」です。

関係性を記述する属性(必須):link要素にrel属性

rel属性はlink要素の必須属性です。読み込む外部ファイルとの関係性を記述し、外部CSSを読み込む場合は値に「stylesheet」と記述します。rel属性の名前の由来は「relative(関連性がある、関係がある)」です。

ファイルの種類を指定する属性:link要素にtype属性

読み込むファイルの種類(MIMEタイプ)を指定します。外部CSSを読み込む場合は値に「text/css」と記述します。

対象メディアを指定する属性:link要素にmedia属性

読み込む外部CSSを適用する媒体を指定します。値は「,(カンマ)で区切りながら順不同で複数並べることもできます。

media属性の代表的な属性値

※表の挿入

文字や文章のスタイルを定義

文字の色を定義する

colorプロパティ

color:red;

文字の色を定義するにはcolorプロパティを使用します。

colorプロパティの代表的な値

HTMLで意味を持つ記号

記述例
カラーキーワード
color:red;
色番号(16進数)
color:#FF0000; color:#F00;
色番号(10進数)
color:rgb(255,0,0);
色番号(パーセント)
color:rgb(100%,0%,0%);
色番号(透明度あり)
color:rgba(255,0,0,1);

カラーキーワード

値を色の名前で指定します。代表的な色名は以下の通りです。

色名
赤系黄色系緑系青系モノクロ系
pinkkhakilightgreenskybluewhite
magenteyellowgreenaquagray
redgoldlimebluesilver
purpleorangeolivenavyblack

色番号

光の三原色R(RED),G(GREEN),B(BLUE)の強さを0~255で指定します。新しいブラウザではA(Alpha:透明度)を0~1で指定することもできます。

16進数

16進数の場合「#FF0000」のように「#」と6桁の数字で記述します。前から2桁区切りでRGBを意味し、00(暗い)~FF(明るい)で表します。また「#F30」のように省略形で記述することもできます。この場合「#FF3300」を意味します。

10進数

10進数の場合は「rgb(255,0,0)」のように記述し、それぞれ前からRGBの値を0(暗い)~255(明るい)で指定します。

パーセント

パーセントの場合は「rgb(100%,0%,0%)」のように記述し、それぞれ前からRGBの値を0%(暗い)~100%(明るい)で指定します。

透明度

透明度を指定する場合は「rgba(255,0,0,1)」のようにrgbの後にaを記述し、4番目の値に透明度を0(透明)~1(不透明)で指定します。半透明の場合は「rgba(255,0,0,0.5)」のように指定します。尚、1の位の0を省略して「rgba(255,0,0,.5)」と書くこともあります。

文字の大きさを定義する

font-sizeプロパティ

font-size: 20px;

文字の大きさを定義するにはfont-sizeプロパティを使用します。

font-sizeプロパティ

内容
単位付きの数値単位付きの数値で大きさを指定
mキーワード決められたキーワードで指定

数値で使用する代表的な単位

数値と単位の間にスペースを入れないようにしましょう。値が0の場合には単位をつけなくても構いません。これらの単位は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

文字の書体を定義する

font-familyプロパティ

color:red;

文字の書体を定義するにはfont-familyプロパティを使用します。
ただし、font-familyプロパティで指定した書体が閲覧者のPCに存在する場合にのみ適用されます。それを想定して、複数の書体を「,(カンマ)」区切りで指定します。最後にフォントのキーワードを指定することをおすすめします。
また、フォント名にスぺ―スがある場合は「”」か「’」で囲みます。

font-familyプロパティで指定できる代表的なフォント名

フォント名説明
MS PゴシックWindows標準ゴシック系フォント
メイリオWindows標準ゴシック系フォント
ヒラギノ角ゴ Pro W3MacOS標準ゴシック系フォント
OsakaMacOS標準ゴシック系フォント
MS P明朝Windows標準明朝系フォント/td>
ヒラギノ明朝 Pro W3MacOS標準明朝系フォント

font-familyプロパティで指定できる代表的なフォントキーワード

フォント名説明
sans-serifゴシック体、サンセリフ体
serif明朝体、セリフ体
monospace等幅フォント
cursive手書き風フォント
fantasy装飾的フォント

文字の太さを定義する

font-weightプロパティ

文字の太さを定義するにはfont-weightプロパティを使用します。
数値は細かく太さを指定できるように作られた数値ですが、現在は主に400(標準)と700(太字)が使われ、それ以外の数値を使うことはあまりありません。細かな太さ表示にブラウザが対応するまで400,700以外の数値を使わないようにしましょう。

font-weightプロパティの代表的な値

内容
bold太字にする
nomal標準の太さにする
数値太さを100刻みで指定
よく使われる値:400(標準)、700(太字)

文字のスタイルを定義する

font-styleプロパティ

font-style:normal;

文字の斜体、非斜体を定義するにはfont-styleプロパティを使用します。ただし、日本語フォントを斜体にすると読みづらくなるためあまりおすすめできません。
主な使いどころはem要素やcite要素などブラウザの初期設定で斜体になるものを非斜体にする時に使用します。

文章の装飾を定義する

text-decorationプロパティ

text-decoration:none;

文字を装飾するにはtext-decorationプロパティを使用します。
リンクの下線を非表示にする時によく使います。点滅させる値もありますが、読みやすさを考えるとあまりおすすめできません。
また、青い文字色や下線の表示はリンクと間違えやすいため、使用するのはあまりおすすめできません。閲覧者の使い勝手を考えてスタイルを定義するようにしましょう。

text-decorationプロパティの代表的な値

内容
underline下線をつける
overline上線をつける
line-through取り消し線をつける
blink点滅させる
noneテキストの装飾を解除

行の高さを定義する

line-hightプロパティ

text-decoration:none;

行の高さを定義するにはline-heightプロパティを使用します。読みやすさを考慮して値を記述しましょう。

line-hightプロパティの代表的な値

内容
normal(初期値)ブラウザが判断して高さを指定
単位付きの数値単位に応じた数値で高さを指定
単位なしの数値数値にフォントサイズを掛けた値で高さを指定

行揃えを定義する

text-alignプロパティ

text-align:center;

ブロックレベル要素内の文章を、左揃え、右揃え、中央揃えにすることができます。

text-alignプロパティは要素内の行揃えを定義するプロパティであり、定義した要素自体の表示位置を変更するわけではないので注意しましょう。

内容
left左揃え
right右揃え
center中央揃え

インデントを定義する

text-indentプロパティ

text-indent:1em;

ブロックレベル要素内にある1行目のインデントを指定します。紙媒体では段落の最初をインデントすることが多いのですが、webではインデントしないことの方が多いようです。

text-indentプロパティの代表的な値

内容
単位付きの数値単位に応じた数値で高さを指定

ボックスのスタイルを定義

背景色を定義する

background-colorプロパティ

background-color:#F0F0F0;

背景色を定義するにはbackground-colorプロパティを使用します。

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プロパティ

background-image:url(img/bg.gif);

背景に画像を表示させるにはbackground-imageプロパティを使用します。値には「url(画像の場所)」を記述します。
尚、指定された画像は要素の背景にタイル状に敷き詰められて表示されます。背景画像の繰り返し表示の設定は次のbackground-repeatプロパティで行います。

background-imageプロパティの代表的な値

記述例
url(画像の場所)画像の場所を絶対パスか相対パスで指定

背景の繰り返しを定義する

background-repeatプロパティ

background-repeat:repeat-x;

background-imageで指定した背景画像の繰り返し表示設定を定義します。

background-repeatプロパティの代表的な値

記述例
repeat(初期値)透明
repeat-xred,blue,yellow,pink,olive,green,skayblue,silver,gray
repeat-y#FF0000 #F00 rgb(255,0,0) rgb(100%,0%,0%)
no-repeatrgb(255,0,0,1)

背景画像の表示開始位置を定義する

background-positionプロパティ

background-position:right top;

background-imageで指定した背景画像の表示位置の調整をおこないます。2つの値を指定する場合は半角スペースで区切ります。

x軸方向の値とy軸方向の値の2つ記述します。

background-position:right top;

縦方向横方向ともに中央寄せのような時は値が1つでも構いません。

background-position:right top;

数値で指定する時は、最初の値がx軸方向、2番目の値がy軸方向を意味し、マイナス方向に移動させることもできます。
background-position: 10px 20px;
background-position:-10px -20px;

background-positionプロパティの代表的な値

内容
left左寄せ
right右寄せ
top上寄せ
bottom下寄せ
center中央寄せ
単位付きの数値左上基準点からの距離(横方向 縦方向の順に記述)

背景画像の固定・移動を定義する

background-attachmentプロパティ

background-attachment:fixed;

背景画像を指定位置に固定するか、スクロールと共に移動するか定義

background-attachmentプロパティの代表的な値

内容
scroll(初期値)スクロールと共に背景がそうも移動
fixed背景画像が固定され、スクロールしても動かない

背景のスタイルを一括定義する

backgroundプロパティ

background:F0F0F0 url(img/bg.gif) repeat-x right top fixed;

backgroundプロパティは今まで定義して来た背景画像に関する定義を半角スペースで区切りながら一括指定することができます。
指定する順番は自由で定義する必要もない値を省略することも可能です。

記述例の値と対応するプロパティ

プロパティ
background-color#F0F0F0
background-imageurl(img/bg.gif)
background-repeatrepeat-x
background-positionright top
background-attachmentfixed

ボックス構造を理解する

HTMLの要素は長方形の箱を生成します。この表示領域群をボックスとよびます。ボックスは下の図のような領域をもっています。

コンテンツ領域

要素内にあるテキストや画像などのコンテンツを表示する領域です。widthプロパティで幅、heightプロパティで高さを指定することができます。

パディング領域

枠線の内側にある余白のことを指し、内余白と呼ばれます。パディング領域には要素に指定した背景色や背景画像が適用されます。

ボーダー領域

枠線を表示する領域です。線の種類や、太さ、色を定義することができます。

マージン領域

枠線の外側にある余白のことを指し、外余白と呼ばれます。マージン領域には要素で指定した背景色や背景画像が適用されず、親要素の背景を透過して表示されます。

イメージ

ブロックボックスとインラインボックス

ブロックレベル要素は、要素全体を1つの長方形として表示されます。

ブロックボックス

ブロックボックスは、要素全体を1つの長方形として表示されます。

インラインボックス

インラインボックスは、要素を1行づつ行ボックスにして折り返して表示されます。

コンテンツ領域の幅を定義する

widthプロパティ

width:600px;

widthプロパティはコンテンツ領域の幅を定義します。このプロパティはブロックレベル要素と置換インライン要素に適用できます。

widthプロパティの代表的な値

内容
auto(初期値)状況に応じて幅を設定
単位付きの数値単位に応じた数値で幅を設定
パーセント親要素の横幅に対する割合

パディング領域(内余白)を定義する

paddingプロパティ

padding:20px 30px 40px 0;

paddingプロパティは枠線の内側にある余白を定義します。paddingプロパティで指定した余白には対象要素の背景色や背景画像が適用されます。

また、値は1つから4つまで定義でき、半角スペースで区切って記述します。「0」の時は単位を省略して記述することができます。これはpadding以外のプロパティ以外のプロパティでも適用される共通のルールです。

paddingプロパティの代表的な値

内容
単位付きの数値単位に応じた数値で余白を設定

個別に値を指定するプロパティ

以下のプロパティを利用することで位置を指定してパディング領域の値を定義できます。

padding-leftプロパティ

padding-left:20px;

左内余白を定義

padding-rightプロパティ

padding-right:20px;

右内余白を定義

padding-topプロパティ

padding-top:20px;

上内余白を定義

padding-bottomプロパティ

padding-bottom:20px;

下内余白を定義

ボーダー領域の線種を定義する

border-styleプロパティ(必須)

border-style:solid;

border-styleプロパティはボーダー領域に表示する枠線の種類を定義することができます。尚、枠線を表示するにはあこのプロパティの定義が必須になります。忘れると枠線が表示されませんので注意しましょう。

また、ブラウザの種類によっては枠線の見え方が違ったり、正しく表示されない値があります。必ずブラウザ表示して確認しましょう。

ボーダー領域の線幅を定義する

border-widthプロパティ(必須)

border-width:10px;

border-widthプロパティはボーダー領域に表示する枠線の幅を定義することができます。 このプロパティは省略することができます。省略させ場合は初期値「medium」が適用されます。

また、値は1つから4つまで定義でき、半角スペースで区切って記述します。「0」の時は単位を省略して記述することができます。