CSS
メインページ > 工学 > 情報技術 > プログラミング > 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 )は、Webページのレイアウトやスタイルを設定するための言語です。HTMLとともにWebページのデザインを制御するために使われます。CSSはHTMLとは別に記述され、HTML文書内に直接記述することもできますが、外部のCSSファイルとして読み込ませることが一般的です。
以下に、CSSの主な特徴や機能について説明します。
- レイアウトの指定: CSSを使うことで、Webページのレイアウトを細かく指定することができます。例えば、ヘッダーやフッターの位置や幅、ページ内の要素の配置などを自由に設定することができます。
- 色やフォントの指定: CSSを使うことで、Webページの色やフォント、サイズなどを自由に指定することができます。これにより、Webページのデザインを統一的に設定することができます。
- 疑似クラスや疑似要素の指定: CSSを使うことで、特定の状態や位置に応じてスタイルを変更することができます。例えば、リンクをクリックしたときの色変化や、要素の先頭や末尾に装飾を追加することができます。
- セレクタの使用: CSSを使うことで、HTMLの要素を指定するセレクタを使って、要素ごとにスタイルを変更することができます。例えば、特定のクラスやIDを持つ要素だけにスタイルを適用することができます。
- カスケードの仕組み: CSSは、複数のスタイル指定がある場合に、優先度の高いものが適用されるようにカスケードの仕組みがあります。このため、Webページのスタイルを効率的に管理することができます。
以上が、CSSの主な特徴や機能についての説明です。CSSはWebページのデザインやレイアウトを制御するために欠かせない言語であり、Web開発において重要な役割を担っています。
CSS（Cascading Style Sheets）は、HTMLに対して、文書のレイアウトや文字色などのさまざまなスタイルを指定するために作られました。
CSSの標準規格とブラウザごとの独自実装[編集]
CSSはW3C( World Wide Web Consortium )によって標準化された規格です。W3CはWeb技術の発展に貢献することを目的としており、Web標準化の推進や、Web技術の改善を行っています。
しかし、実際にWebブラウザでCSSを利用する際には、ブラウザごとに独自の実装があります。これは、W3Cの規格に対して、ブラウザベンダーが独自の機能を追加したり、実装方法を変更したりするためです。そのため、同じCSSコードでも、異なるブラウザでは表示が異なることがあります。
また、最近では、ベンダープレフィックスと呼ばれる接頭辞を付けたCSSプロパティが使用されることがあります。これは、ブラウザベンダーが実験的な機能を提供するために用意したものであり、プレフィックスが付いたプロパティは、異なるブラウザに対して異なる値を指定する必要があります。
また、ブラウザは異なるレンダリングエンジンを使用しています。例えば、Google ChromeはBlinkと呼ばれるレンダリングエンジンを使用しており、FirefoxはGecko、SafariはWebKitを使用しています。これらのエンジンはそれぞれ異なる方法でCSSを解釈し、表示される結果が異なる場合があります。
さらに、フォントのレンダリングにもブラウザごとの差異があります。フォントの種類やフォントサイズ、行間などの設定によって、異なるブラウザで表示が異なる場合があります。
したがって、Web開発者は、W3Cの規格に従いつつ、ブラウザごとの独自実装やプレフィックス、レンダリングエンジンの違いに対応する必要があります。それによって、異なるブラウザでも正確に同じ表示ができるWebページを作ることができます。
CanIUse.COM: ブラウザ対応情報を確認する方法[編集]
Web開発において、特定の機能がブラウザごとにどの程度実装されているか確認することは非常に重要です。 そのために、 https://caniuse.com/ というWebサイトを活用することができます。 たとえば、flexboxの実装状況を知りたい場合は、「flexbox」と検索します。すると、https://caniuse.com/?search=flexbox が返されます。 この結果から、現在廃止されたIEは最後のバージョンまでflexboxをサポートしていなかったこと、その他のモダンなブラウザはすべてサポートしていることがわかります。
この検索機能は、CSSだけでなく、HTML、JavaScript、そしてWeb APIのfetchなど、さまざまな技術に対応しています。
CSS以外のレイアウト[編集]
CSS3は、レイアウトを操作する機能を提供していますが、現実のインターネットには、HTMLのTABLE要素を使用してレイアウトするなど、CSSによらず本来の文章構造と一致しないマークアップをレイアウトのために使用するコンテンツがまだまだ見られます（2023年4月現在）。
このようなマークアップを行うと、視覚障害者の方が使う読み上げブラウザが文章構造を理解できず、適切な読み上げができなくなってしまいます。また、TABLE要素を使用してレイアウトすると、レスポンシブデザインができないため、モバイルデバイスでは、「巨大な表の一部を虫眼鏡で覗く」ようなユーザ体験になってしまいます。
HTML4では、色やサイズのHTML要素により指定する機能（FONT要素が象徴的）は、非推奨でしたが、W3Cの規定するHTML標準の一部でした。しかし、非推奨であるため、標準化の度合いが相対的に低く、HTMLレンダリングエンジンごとの差異をさらに大きくする悪循環に陥っていました。
HTML5では、規格制定主体がW3CからWHATWGに変更され、大幅な仕様改訂が行われました。物理修飾を行う要素であるFONT要素は廃止され、一部は物理修飾を離れた意味に再定義されました。また、FRAMESET要素も廃止されました。DOCTYPEからDTDがなくなり、SGMLに基づいたマークアップ言語でもなくなりました。このため、FONT要素はHTML5の要素ではなくなりました[1][2]。
※ 未分類[編集]
- ※ どこのサブページに入れたらいいか不明な内容を、ここに記述する。
- ある程度、記述が確立したら、サブページ化してください。
[TODO:次に示している例は、floatを使ったり根拠のないマージン見込みを使った悪いコードで、gridや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コメントは主な用途として、ブラウザに表示・解釈させないで、ソースファイルを読んだプログラマーなどに情報提供するために用いられます。 本来、歴史的にはプログラミング業界では同様の技術を「コメントアウト」などと読んでいましたが、現代では単に「コメント」だけで通用します。
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カウンターをインクリメントして、セクション番号、サブセクション番号、サブサブセクション番号を表示しています。
- ^ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
- ^ https://html.spec.whatwg.org/multipage/#toc-semantics には FONT Element はなく Obsolate との言及すらない。