CSS
目次編集
大学の教科書
自然科学: 数学 - 物理学; 古典力学 量子力学 - 化学; 無機化学 有機化学 - 生物学; 植物学 研究技術 - 地球科学 - 医学; 解剖学
語学: 日本語 英語 エスペラント 朝鮮語 デンマーク語 ドイツ語 フランス語 ラテン語 ルーマニア語
人文科学: 歴史学; 日本史 中国史 世界史 歴史観 - 心理学 - 哲学 - 芸術; 音楽 美術 - 文学; 古典文学 漢詩
社会科学: 法学 - 経済学 - 地理学 - 教育学; 学校教育 教育史
情報技術: 情報工学; MS-DOS/PC DOS UNIX/Linux TeX/LaTeX CGI - プログラミング; BASIC C言語 C++ D言語 HTML Java JavaScript Lisp Mizar Perl PHP Python Ruby Scheme SVG
小・中・高校の教科書
小学: 国語 社会 算数 理科 英語
中学: 国語 社会 数学 理科 英語
高校: 国語 - 地歴 - 公民 - 数学; 公式集 - 理科; 物理 化学 地学 生物 - 外国語 - 情報
解説書・実用書・参考書
趣味: 料理本 - スポーツ - ゲーム
試験: 資格試験 - 入学試験
その他の本: 防災 - 生活と進路 - ウィキペディアの書き方 - ジョーク集
- はじめに
- 記述
(2008-06-29)：CSSの記述方法 - HTML/フレーム flexbox や CSS grid について解説あり
- フォント (2006-12-18)
- 背景 (2005-09-03)：背景色・背景画像等の指定方法
- カーソル (2009-11-08)：カーソルの指定方法
- ブラウザ
(2005-07-12)：特定のブラウザでのみ有効な指定 - 継承：表示効果の継承と既定値
- ボックス：ボックスの概念と指定方法
- テキスト
- 配置
- リスト
- テーブル
- プリント
- 音声
はじめに編集
CSS（Cascading Style Sheets）は、HTMLに対して、文書のレイアウトや文字色などのさまざまなスタイルを指定するために作られました。
従来、文書に文字色を変えたり、背景画像を追加したりといった限定的な装飾仕様は、HTMLだけで可能でした。しかし、HTMLだけで装飾を行うと文書構造が複雑になり、また、装飾のために誤った意味を付加してしまうケースもあり、閲覧者のアクセシビリティや作成者のメンテナンス性が低下していました。
CSSを用いることで、構造と装飾を分離することができ、HTMLの文書構造をシンプルに保つことができる。また、CSSを使用することで、従来HTMLだけで可能だった限られた装飾仕様に比べ、はるかに豊かな装飾の可能性を得ることができます。
各ブラウザーによる実装編集
ブラウザごとにCSSの実装にはいくつかの違いがあります。
以下にいくつかの例を挙げます。
- プレフィックスの追加 — 一部のブラウザは、新しいCSSプロパティを実装する前に、プレフィックスを追加することがあります。例えば、WebKitブラウザ（Safari、Chrome）は、CSS3のtransform#プロパティを-webkit-transformとして実装しました。これに対し、Firefoxはtransformプロパティを直接サポートしています。
- レイアウトエンジン — ブラウザは、要素を表示するためにレイアウトエンジンを使用します。それぞれのブラウザには独自のレイアウトエンジンがあり、それぞれ異なるアルゴリズムで要素をレンダリングします。そのため、同じCSSを使用しても、異なるブラウザで表示が異なる場合があります。
- フォントのレンダリング — フォントのレンダリング方法もブラウザによって異なります。例えば、Microsoft Edgeは、Windowsのシステムフォントレンダリングエンジンを使用しています。一方、WebKitブラウザは、独自のフォントレンダリングエンジンを使用しています。そのため、同じフォントを使用しても、ブラウザによって表示が異なる場合があります。
これらは、ブラウザごとに異なるCSSの実装の例ですが、他にも様々な違いがあります。Web開発者は、これらの違いを理解して、クロスブラウザのWebサイトやアプリケーションを開発するために、注意が必要です。
各ブラウザーでの機能の対応状況の調べ方編集
具体的には、特定の機能のブラウザ別の実装状況を確認することができます。 たとえば、flexboxの実装状況を知りたい場合は、https://caniuse.com/ で「flexbox」と検索します。 これにより、https://caniuse.com/?search=flexbox が返されます。 これにより、現在廃止されたIEは最後のバージョンまでflexboxをサポートしていなかったこと、その他のモダンなブラウザはすべてサポートしていることがわかります。 この検索は、CSSだけでなく、HTML、JavaScript、そしてfetchのようなさまざまなWeb APIも対象とします。
CSS以外のレイアウト編集
CSS3は、レイアウトを操作する機能を提供していますが、現実のインターネットには、HTMLのTABLE要素を使用してレイアウトするなど、CSSによらず本来の文章構造と一致しないマークアップをレイアウトのために使用するコンテンツがまだまだ見られます（2023年3月現在）。
このようなマークアップを行うと、視覚障害者の方が使う読み上げブラウザが文章構造を理解できず、適切な読み上げができなくなってしまいます。また、TABLE要素を使用してレイアウトすると、レスポンシブデザインができないため、モバイルデバイスでは、「巨大な表の一部を虫眼鏡で覗く」ようなユーザ体験になってしまいます。
HTML4では、色やサイズのHTML要素により指定する機能（FONT要素が象徴的）は、非推奨でしたが、W3Cの規定するHTML標準の一部でした。しかし、非推奨であるため、標準化の度合いが相対的に低く、HTMLレンダリングエンジンごとの差異をさらに大きくする悪循環に陥っていました。
HTML5では、規格制定主体がW3CからWHATWGに変更され、大幅な仕様改訂が行われました。物理修飾を行う要素であるFONT要素は廃止され、一部は物理修飾を離れた意味に再定義されました。また、FRAMESET要素も廃止されました。DOCTYPEからDTDがなくなり、SGMLに基づいたマークアップ言語でもなくなりました。このため、FONT要素はHTML5の要素ではなくなりました[1]。
⇒ ウェブ標準
※ 未分類編集
- ※ どこのサブページに入れたらいいか不明な内容を、ここに記述する。
- ある程度、記述が確立したら、サブページ化してください。
[TODO:次に示している例は、floatを使ったり根拠のないマージン見込みを使った悪いコードで、guridやflexboxを使った良質のコードに置換えるべきです]
たとえばCSSを使って、ページを左右2段組にしたい場合、下記コードのようにすればいい。
典型的な例である。
- コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSによるページ左右分割のコード例</title>
<style type="text/css">
.left {
width: 60%;
float: left;
background-color: #ccccff
}
.right {
width: 30%;
float: right;
background-color: #ffaaaa;
}
.kaigyo1 {
word-break: break-all;
overflow-wrap: anywhere;
}
.kaigyo2 {
word-break: break-all;
overflow-wrap: anywhere;
}
</style>
</head>
<body>
<div class="left">
<div class="kaigyo1">
aaa aaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
<div class="right">
<div class="kaigyo2">
bbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbbbbbbbb bbbbbbbbbbbb
</div>
</div>
</body>
</html>
- 解説
floatの指定がないと、片方のブロックの下の行から、もう片方のブロックの描画を開始してしまう。なので、もし floatが無いと、左右のブロックが斜め気味に配置されてしまい、目的の配置にならない。
とにかく、左右に段組をしたい配置の場合、まず float を検討するのが良いだろう（なお、他にも方法はある）。
CSS 指定の中の word-break: break-all; overflow-wrap: anywhere; は、改行を指定するのに、実用上は、普通は必要になる。
コレが無いと、長い文章などが突き出てしまう。（特に日本語の場合、突き出やすい。）
なお、 word-break: break-all; も overflow-wrap: anywhere; も効果はほぼ同じだが、ブラウザ種類ごとの互換性のため、上記コードでは両方とも記載してある。
width 幅とは横幅のこと。なお 縦幅なら height （ハイト）である。
width や height を指定する際、この場合は % （パーセント）単位でも指定が出来る。(CSS や html で入り組んだ複雑なレイアウトをしたりすると、場合によっては % 指定を受け付けないブラウザもあるが、しかしこのコード例の程度のレイアウトなら、どのブラウザでも(2020年5月4日に Firefox75 および Google Chrome84 で確認)、%表示できる。)
他にもピクセル単位(px)でwidthなどの幅を指定する方法もある。
余談だが、一般にCSSのコードは head タグの中に入れるのが普通である（入れなくても動作する）。
なお、この左右2段組のレイアウトのことを「2カラム」と言います。「カラム」とは柱のことです。
いっぽう、もし 左・中央・右 で3段構成になっていれば「3カラム」と言います。
通常のなんの左右分割もしてない状態なら、「シングルカラム」と言います。
あなたが今読んでいる「なお、この左右2段組のレイアウトのことを「2カラム」と言います。」という文章から「通常のなんの左右分割もしてない状態なら、「シングルカラム」と言います。」の文章までは、パソコン画面では、シングルカラムで表示されているだろうと思います。
CSS関数編集
CSS値関数とは、特別なデータ処理や計算を呼び出し、CSSプロパティの値を返す文です。 CSS値関数には複数の引数を取るものもあり、返り値を計算するために必要です。 例えば、変換関数や色関数、フィルタ関数などがあります。 また、数学関数や比較関数、ステップ値関数、三角関数、指数関数、符号関連関数などもあります。 CSS値関数は、CSSの機能をより高度に拡張することができます。
CSS関数の一覧を以下に示します。
- calc() - 算術演算を行い、サイズ、長さ、角度、時間などの値を計算します。
- var() - カスタムプロパティから値を取得します。
- min() - 与えられた引数の最小値を返します。
- max() - 与えられた引数の最大値を返します。
- clamp() - 与えられた引数に基づいて、最小値と最大値の範囲内で値を制限します。
- attr() - HTML要素の属性値を取得します。
- url() - 画像や他のリソースへのURLを指定します。
- linear-gradient() - 線形グラデーションを定義します。
- radial-gradient() - 放射状グラデーションを定義します。
- repeat() - 背景画像の繰り返しパターンを指定します。
- cubic-bezier() - カスタムキューブベジエ曲線を定義します。
- steps() - ステップ関数を定義します。
- hsl() - HSLカラーモデルを使用して色を指定します。
- rgb() - RGBカラーモデルを使用して色を指定します。
- rgba() - RGBAカラーモデルを使用して色を指定します。
- hsla() - HSLAカラーモデルを使用して色を指定します。
- rotate() - オブジェクトを回転させます。
- translate() - オブジェクトを移動させます。
- scale() - オブジェクトのサイズを拡大または縮小します。
- skew() - オブジェクトを傾けます。
- perspective() - 3D視点を指定します。
- matrix() - 2D変換行列を定義します。
- matrix3d() - 3D変換行列を定義します。
- cross-fade() - 2つの画像の間をフェードイン・アウトさせます。
- grayscale() - オブジェクトのグレースケール値を指定します。
- blur() - オブジェクトのぼかしを指定します。
- brightness() - オブジェクトの明るさを指定します。
- contrast() - オブジェクトのコントラストを指定します。
- drop-shadow() - オブジェクトのドロップシャドウを指定します。
- opacity() - オブジェクトの透明度を指定します。
calc()関数編集
CSSのcalc関数は、算術演算子を使用して値を計算するために使用されます。以下は、使用例の一例です。
幅を計算する編集
例えば、次のような要素があるとします。
<div class="container"></div>
この要素の幅を計算するには、次のようにします。
.container { width: calc(100% - 20px); }
このコードは、コンテナ要素の幅をページ全体の幅から20pxを引いた幅に設定します。
高さを計算する編集
同様に、高さを計算する場合は、次のようにします。
.container { height: calc(100vh - 50px); }
このコードは、コンテナ要素の高さをページの高さから50pxを引いた高さに設定します。
マージンを計算する編集
次の例では、マージンを計算しています。
.container { margin: calc(10% - 5px) calc(20% - 10px); }
このコードは、コンテナ要素の上下のマージンを高さの10％から5pxを引いた値に設定し、左右のマージンを幅の20％から10pxを引いた値に設定します。
フォントサイズを計算する編集
フォントサイズを計算する例は次のようになります。
.container { font-size: calc(16px + 0.5vw); }
このコードは、コンテナ要素内のテキストのフォントサイズを、16pxに0.5vwを加えた値に設定します。これにより、ページの幅が広くなるにつれてフォントサイズが自動的に調整されます。
これらの例を参考にして、calc関数を使って独自のスタイルを作成することができます。
カスタムプロパティ編集
CSSのカスタムプロパティは、ユーザー定義の変数を作成するための機能であり、変数を使用してスタイルを定義することができます。これは、Web開発者にとって非常に便利な機能であり、ページの外観や動作を調整するために使用できます。
- 各ユーザーエージェントの対応状況については、Custom Properties in caniuse.com を参照してください。
カスタムプロパティは、--のプレフィックスで始まる名前を持ち、CSSルールの任意の場所に定義できます。たとえば、以下のようなカスタムプロパティを定義することができます。
:root { --primary-color: #FF5733; }
この場合、--primary-colorという名前のカスタムプロパティを定義しています。このプロパティには、#FF5733という値が割り当てられています。
このプロパティを使用するには、var()関数を使用します。たとえば、次のようなCSSルールを定義することができます。
body { background-color: var(--primary-color); }
このルールは、--primary-colorカスタムプロパティを使用して、背景色を定義しています。var()関数は、定義されたカスタムプロパティの値を取得し、その値を使用してスタイルを適用します。 カスタムプロパティは、動的な値にも使用できます。たとえば、以下のように:hover疑似クラスを使用して、マウスが要素の上にあるときに、カスタムプロパティの値を変更することができます。
:root { --primary-color: #FF5733; --primary-color-hover: #F00; } button { background-color: var(--primary-color); } button:hover { --primary-color: var(--primary-color-hover); }
この場合、ボタンの背景色は、--primary-colorカスタムプロパティの値に基づいて定義されます。しかし、ボタンにマウスが乗っているときに、--primary-colorカスタムプロパティの値が--primary-color-hoverに変更されます。したがって、ボタンの背景色も変更されます。
カスタムプロパティは、CSSの機能として非常に強力であり、Web開発者にとって重要なツールの1つです。それらを使用することにより、スタイルの変更が簡単になり、柔軟性が向上します。
コメント編集
CSSコメントは、コードの説明的なノートを追加したり、スタイルシートの特定の部分をブラウザが解釈しないようにするために使用されます。コメントは、ドキュメントのレイアウトに影響を与えません。
コメントは、スタイルシート内で許容される空白が許される場所に配置できます。単一行または複数行にまたがることができます。
以下は、コメントの例です。
/* 1行コメント */ /* 複数行に渡る コメント */ /* 以下のコメントは、 特定のスタイルを無効にするために使用されます ''/ /'' span { color: blue; font-size: 1.5em; } */
コメントの構文は、単一行および複数行の両方に使用されます。
外部スタイルシートでコメントを指定する他の方法はありません。
ただし、STYLE要素を使用する場合は、古いブラウザからCSSを非表示にするためにを使用できますが、これは推奨されません。
/* */コメント構文を使用するほとんどのプログラミング言語と同様に、コメントは入れ子にすることはできません。
CSSに//形式のコメント構文はありません。
CSSカウンター編集
CSSカウンターは、CSSのプロパティの1つで、HTMLの要素に自動的に番号を割り当てることができます。 CSSカウンターを使用すると、ヘッダー、フッター、注釈、章、節などのセクションを自動的に番号付けできます。
CSSカウンターは、以下のように使用されます。
- カウンターを定義する
counter-reset: <counter-name> <initial-value>;
- カウンターをインクリメントする
counter-increment: <counter-name> <increment-value>;
- カウンターを表示する
content: counter(<counter-name>);
例えば、以下のように使用することができます。
- HTML
<body> <h1>見出し1</h1> <p>これは最初の段落です。</p> <h2>見出し2</h2> <p>これは2番目の段落です。</p> <h3>見出し3</h3> <p>これは3番目の段落です。</p> </body>
- CSS
body { counter-reset: section; } h1 { counter-reset: subsection; counter-increment: section; content: counter(section) ". "; } h2 { counter-reset: subsubsection; counter-increment: subsection; content: counter(section) "." counter(subsection) " "; } h3 { counter-increment: subsubsection; content: counter(section) "." counter(subsection) "." counter(subsubsection) " "; }
- この例では、最初にbody要素でsectionカウンターをリセットしています。
- 次に、h1要素では、subsectionカウンターをリセットして、sectionカウンターをインクリメントし、セクション番号を表示しています。
- 同様に、h2要素では、subsubsectionカウンターをリセットし、subsectionカウンターをインクリメントして、セクション番号とサブセクション番号を表示しています。
- 最後に、h3要素では、subsubsectionカウンターをインクリメントして、セクション番号、サブセクション番号、サブサブセクション番号を表示しています。
図形の描画編集
CSSでは、円や長方形などの基本図形の描画もできる。ただし、あまり使い勝手が良くないので、HTML5で実装されたcanvasタグや、あるいはSVG機能を使って図形描画するのが良い。（SVG描画については wikibooks『SVG』を参照せよ。HTML5のcanvasタグの使い方についてはwikibooks『HTML/HTML5#canvas要素』を参照せよ。）
CSSはもともと、ページ構成などのレイアウトを決めるためのものなので、そもそもCSSは図形描画を目的としたものではない。HTML5以降の現在、SVGやcanvasなど図形描画を目的とした専用の機能があるので、なるべく、それらの専用の機能を用いたほうが将来的なメンテナンスなども安全であろう。
divによる方法編集
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSによる図形</title>
<style type="text/css">
.maru { /* maru の部分は自由に英語で命名できる */
width: 200px;
height: 100px;
background-color: blue;
border-radius: 50%; /* 50%なら円。0%に近づけると四角に近づく */
}
</style>
</head>
<body>
文字 <div class="maru"></div> ああああ
</body>
</html>
表示結果としては、
文字 ※ここに楕円 ああああ
というレイアウトで、楕円（横軸の長さ200px、縦軸の長さ100pxの楕円）が表示される。divによって、改行が強制的に行われるので、このようなレイアウトになります。
なお、プロパティ中に background-color とありますが、このプロパティで指定した色によって円の内部が塗りつぶされます。
spanによる方法編集
span タグとdisplay: inline-block; を使うことで、テキスト中で改行させずに図形表示できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSによる図形</title>
<style type="text/css">
.maru { /* maru の部分は自由に英語で命名できる */
display: inline-block; /* span ではこれを追加する */
width: 200px;
height: 100px;
background-color: rblue;
border-radius: 10%;
}
</style>
</head>
<body>
文字 <span class="maru"></span> ああああ
</body>
</html>
表示結果としては、
文字 （※ここに楕円） ああああ
というレイアウトで、楕円（横軸の長さ200px、縦軸の長さ100pxの楕円）が表示される。divと違い、上記コードでは改行がないので、このような横並びのレイアウトになります。
- ^ https://html.spec.whatwg.org/multipage/#toc-semantics には FONT Element はなく Obsolate との言及すらない。