このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSの書き方

記事Sep.9th, 2021
CSS3とは何か?CSS3がこれまでのCSSとどう違うのかを紹介

CSSスタイルシートの記述方法

CSSの書式の基本

CSSによって記述されるスタイルシートは主に以下の2つのパーツを組み合わせて構成され、それぞれ必要な数だけ配置することができます。

スタイル・ルール
スタイルシートの中心となる部分で、それぞれのスタイル・ルールは特定の要素がどのように描画されるべきかを設定する“宣言”の集まりです。
@ルール
@ルールはスタイル・ルールでは表すことができない特殊な設定を行うためのものです。@ルールの書式はさまざまで、スタイル・ルールや他の@ルールを内包できるものもあります。
@import url(stylesheet-2.css) ;

h1 {
background: #006e54;
color: #bed3ca;
font-weight: bold;
}

p {
background: #c8d5bb;
color: #0d0015;
}

@supports (display: flex) {
#sample {
width: 100%;
display: flex;
}
}

@ルールの@charset”ルール@import”ルール@namespace”ルールを使用する場合にはCSSの先頭に記述されなければなりません。他のスタイル・ルールと@ルールを記述する順序は基本的には自由ですが、スタイルの指定が重複した場合にはどちらの記述した順序によってどちらの指定が優先されるかが変わることがあります。

CSSには他に“<!--”と“-->”を含むことができます。これはHTMLのstyle”要素に対応していないブラウザでその中に記述されたスタイルシートがウェブページに表示されてしまうのを防ぐためのもので、HTMLにおけるコメントと同じです。CSSでは特別な意味を持たず、無視されます。

スタイル・ルール

スタイル・ルール(Style Rules)”ブラウザが要素をどのような見た目で描画するべきかを表すかについての情報を内包します。

スタイル・ルールはセレクタと宣言ブロックの2つの部分から構成されます。

CSSのスタイル・ルール

セレクタ(Selector)”はそのスタイル・ルールが対象とする要素を選択するための部分で、要素名、要素がつけられたクラス名やID名、要素の親子関係などから1個、もしくは複数の要素を選択します。

宣言ブロックはセレクタの後に続く“{”と“}”に囲まれたブロックで、ブロックの中にはスタイルを設定する“宣言(Declaration)”を内包します。CSSの宣言には“プロパティ(Property)”と“ディスクリプタ(Descriptor)”の2種類がありますが、スタイル・ルールの宣言ブロックに内包されるのはプロパティです。

ホワイトスペース

ホワイトスペース(Whitespace)”は一般的にコード自体の見栄えを整えるために挿入されるスペースやタブ文字、改行のことです。

CSSではコードに含まれる以下の文字がホワイトスペースとして扱われます。

ユニコード 名称 説明
U+0009 CHARACTER TABULATION タブ文字
U+000A LINE FEED 行送り
U+0020 SPACE 半角スペース

また、以下の文字もCSSがブラウザに読み取られる際には行送り(CR、U+000A)に置き換えられるため、結果的にホワイトスペースとして扱われます。

ユニコード 名称 説明
U+000C FORM FEED 頁送り
U+000D CARRIAGE RETURN 復帰

CSSではプロパティ名やキーワードなどの1個の塊でなければならないコードの途中でなければ多くの場所でホワイトスペースの挿入が認められています。

多くのホワイトスペースはコード自体の見栄えを整えるためだけのもので、制作者の利便性のためだけに挿入されます。しかし、ホワイトスペースは複数の値を隔てるために使用されたり、セレクタの子孫結合子など、ホワイトスペースが特別な意味を持つ場合もあり、そのような場面ではホワイトスペースは必須です。

ホワイトスペースを挿入できる箇所

コメント

/*”と“*/”で囲まれたコードは“コメント(Comment)”を表します。

コメントはブラウザには無視され、ブラウザからCSSの一部を隠したり、制作者の利便性のためのメモを記述するために使用することができます。

/* ここからサンプルコード */
div.sample {
background: rgb(252,241,209);
border-radius: 25px 10px 10px 25px;
/*
font-size: 18px;
color: rgb(18,14,10);
*/
line-height: 1.3;
}
/* ここまでサンプルコード */

コメントの内容にはコメントの終わりとして誤認されるため、連続するアスタリスク(“*”)とスラッシュ(“/”)を含んではいけません。

コメントはホワイトスペースの挿入が認められる場所であればどこにでも挿入することができます。

CSSのプロパティ

プロパティ

プロパティ(Property)”は宣言が何についての設定をするのかを表すプロパティ名と具体的な設定内容を表す“(Value)”をコロン(“:”)を挟んで記述します。

CSSのプロパティ

プロパティが受け付ける値の種類やその記述方法はプロパティごとに決められています。受け付けられない種類の値や記述方法が誤っている値が含まれる宣言は無効となり、無視されます。

宣言ブロックの中には同じ要素を対象とした宣言を複数含めることができ、それぞれの宣言はセミコロン(“;”)で区切って記述します。宣言ブロックの中で最後の宣言の後のセミコロンは必須ではありませんが、後で宣言を追加したり、並べ替えたりした時のつけ忘れを防ぐためにすべての宣言の最後にセミコロンが付けるのが一般的です。

一括指定プロパティ

いくつかのプロパティは“一括指定プロパティ(Shorthand Property)”と呼ばれ、他のいくつかの“個別指定プロパティ(Longhand Sub-property)”による設定を一括して行うことができます。

多くの一括指定プロパティは対象とする個別指定プロパティの値を列挙することで個別指定プロパティの代わりにスタイルを指定します。一括指定プロパティは同じ場所に対象とする個別指定プロパティを全て並べて記述した場合と同じ意味合いを持ちます。

一括指定プロパティ
text-decoration: underline 2px wavy rgb(204,153,204);

同じ意味の個別指定プロパティ
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-decoration-style: wavy;
text-decoration-color: rgb(204,153,204);

一括指定プロパティを使用する場合、必ずしも個別指定プロパティのすべての値を記述する必要はなく、一部の値を省略することが可能です。ただし、その場合は省略した値が対象とする個別指定プロパティを初期値に設定した場合と同じ意味を持ちます。

一括指定プロパティ
text-decoration: underline;

同じ意味の個別指定プロパティ
text-decoration-line: underline;
text-decoration-thickness: auto; /* プロパティの初期値 */
text-decoration-style: solid; /* プロパティの初期値 */
text-decoration-color: currentColor; /* プロパティの初期値 */

一括指定プロパティの中には対象となる個別指定プロパティの初期化だけを行い、細かい値の指定ができないものもあります。例えば、font”プロパティには値が設定可能なfont-family”プロパティなど以外にもfont-kerning”プロパティなどの多くの個別指定プロパティがあり、font”プロパティを使用すると自動的にこれらのプロパティも初期値に設定されます。

HTML文書への適用

CSSをHTML文書に適用する方法

CSSによるスタイルシートをHTML文書に適用する方法は以下の3通りがあります。

link”要素による適用が最も一般的ですが、それぞれ利点と欠点があり、使い分けることができます。

CSSの特徴であるのが、一つの要素に適用されるスタイルは複数のCSSスタイルシートに由来することで、スタイルの宣言は競合することがあります。競合するスタイルは“カスケード”によってどのスタイルを適用するかが決定されますが、その過程でスタイルシートの適用方法や順序は影響することがあります。

また、それぞれの要素にはユーザー・エージェントが適用する既定のスタイルシートであるUAスタイルシートが制作者が定義したスタイルシートと同時に適用されることも留意する必要があります。

link”要素

rel”属性の値がstylesheetであるlink”要素はHTML文書とHTML文書からは別れたCSSファイル(.css)に記述された外部スタイルシートを読み込みます。外部スタイルシートは複数のHTML文書で共有することができます。

もっとも一般的なスタイルシートの適用方法であり、スタイルシートが長大である場合や同じスタイルシートを複数の文書に適用する場合にはスタイルシートを外部スタイルシートとして記述してlink”要素で読み込むと効率的で管理が容易です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>黄色いフルーツバナナ - 果物を食べる</title>
<link rel="stylesheet" href="css/stylesheet-sp.css" media="( max-width: 640px )">
<link rel="stylesheet" href="css/stylesheet-tab.css" media="( min-width: 640px ) and ( max-width: 1280px )">
<link rel="stylesheet" href="css/stylesheet-pc.css" media="( min-width: 1280px )">
</head>
<body>
...

style”要素

style”要素はHTML文書の文書内にスタイルシートを記述するための要素です。

スタイルシートが短く、他の文書に使用されるものではない場合はstyle”要素にスタイルシートを記述するのが手軽です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>黄色いフルーツバナナ - 果物を食べる</title>
<style>
p.sample {
color: rgb(0,0,0);
font-size: 1.5em;
font-family: sans-serif;
text-align: justify;
}
</style>
</head>
<body>
...

style”属性

style”属性は要素に直接スタイルシートを記述するための属性です。グローバル属性なのですべての要素に使用することができます。

スタイルの情報が短く、繰り返し使用されるものではない場合にはstyle”属性にスタイルシートを記述するのが手軽です。

style”属性の中にはスタイル・ルールの宣言ブロックの中身のみ記述することができ、@ルールは使用できません。

<p style=" background-color: rgb(215,206,202); border-radius: 20px; padding: 20px 10px;">
冬はつとめて<br>
雪の降りたるは、いふべきにもあらず<br>
霜のいと白きも、また さらでもいと寒きに、火など急ぎおこして、炭もてわたるも、いとつきづきし<br>
昼になりて、ぬるくゆるびもていけば、火桶の火も白き灰がちになりてわろし<br>
</p>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク