
スタイルシート (Style Sheet) とは、ドキュメント文書において表示形式を制御する概念のです。
見栄えと構造を分離するという目的で提唱されました。HTMLやXML、SGMLといったマークアップ文書や、
オフィスソフトにおいて広く使用されています。Web上で広く使われているHTML文書にスタイルシートを
適用させる場合には、一般的にCSSが利用されます。こうした現状からCSSが圧倒的な普及度を誇っているために、
単にスタイルシートといえばCSSを指すことがあります。
1.サイズ・背景 width: ***; height: ***; ボックスの大きさを指定する max-width: ***; min-width: ***; ボックスの最大幅と最小幅を指定するスタイルシートする max-height: ***; min-height: ***; ボックスの最大の高さと最小の高さを指定する background-color: ***; ボックスの背景色を指定する background-image: url(***); ボックスの背景に画像を使う background-repeat: ***; 背景画像の並び方を指定する background-position: ***; 背景画像の表示位置を指定するスタイルシートする background-attachment: fixed; 背景画像をスクロールさせない background: ***; 背景の設定をひとまとめに行う |
2.表全体の指定 width: ***; height: ***; 表の大きさを指定する border: ***; 表の境界線を指定する border-collapse: ***; 境界線の表示方法を指定する border-spacing: ***; 境界線の間隔を指定する table-layout: ***; 表のレイアウト方法を指定する empty-cells: ***; 空セルの境界線の表示・非表示を指定する caption-side: ***; 表タイトルの位置を指定する text-align: ***; 表タイトルの位置(水平方向)を指定する visibility: collapse; 表の行または列を詰める |
3.間隔・表示位置 text-align: ***; 水平方向の表示位置を指定する text-justify: ***; 均等割付の形式を指定する line-height: ***; 行の高さを指定する text-indent: ***; 1行目の字下げを指定する letter-spacing: ***; 文字の間隔を指定する word-spacing: ***; 単語の間隔を指定する text-autospace: ***; 日本語とアルファベットの間にスペースを入れる vertical-align: ***; 上付文字と下付文字 |
4.配置 float: ***; ボックスのフロート(浮動化)を指定する clear: ***; 回り込みを解除する position: ***; ボックスの配置方法を指定する top: ***; right: ***; bottom: ***; left: ***; ボックスの配置位置を指定する z-index: ***; 重なりの順序を指定する |
5.罫線・マーカー width: ***; height: ***; 水平線のサイズを指定する text-align: ***; margin-***: ***; 水平線の表示位置を指定する background-color: ***; 水平線に色を付ける background-image: url(***); 水平線の背景に画像を使う border: ***; 水平線の境界線を指定する list-style-type: ***; マーカーの種類を指定する list-style-position: ***; マーカーの表示位置を指定する list-style-image: url(***); マーカーを画像で表示する list-style: ***; マーカーの設定をひとまとめに行う |
6.セル・背景の指定 text-align: ***; vertical-align: ***; セル内の文字の位置を指定する width: ***; height: ***; セルの大きさを指定する padding: ***; セル内の余白を指定する white-space: nowrap; セル内で自動改行させない background-color: ***; 表の背景色を指定する background-image: url(***); 表の背景に画像を使う float: ***; 表のフロート(浮動化)を指定する margin: ***; 表の周囲にマージンを入れる clear: ***; 回り込みを解除する |
スタイルシート言語(Style sheet language)とは、構造化文書の見た目を記述するコンピュータ言語です。
構造化文書とは、節や段落が明確に定義・分類された文書のことです。内容が明確に分類されているので、
その文書を表示するプログラムは任意の表示スタイルを設定できます。広く使われているスタイルシート言語
としてはCSS (Cascading Style Sheets) があり、HTML、XHTML、SVG、XUL、その他のマークアップ言語で書かれた
文書のスタイルを指定するのに使われます。構造化文書の利点として、内容を様々な状況で再利用でき、
様々な方法で表示可能という点が挙げられます。構造化文書の論理構造に異なるスタイルシートを付与することで、
異なる表示が得られます。
7.背景色・背景画像 ページの背景色を指定する background-image: url(***); ページの背景に画像を使う background-repeat: ***; 背景画像の並び方を指定する background-position: ***; 背景画像の表示位置を指定するスタイルシートする background-attachment: fixed; 背景画像をスクロールさせない background: ***; 背景の設定をひとまとめに行う |
8.表示方法 overflow: ***; ボックスからはみ出た部分の表示方法を指定する overflow-***: ***; overflowの縦横の処理を個別に指定する scrollbar-***-color: ***; スクロールバーの色を変える display: ***; 表示形式(インライン・ブロック・リスト・非表示)を指定する visibility: ***; 表示・非表示を指定する |
9.マージン・スクロールバー・カーソル margin: ***; ブラウザの枠とのマージンを指定する margin-***: ***; 上下左右のマージンを個別に指定する scrollbar-***-color: ***; スクロールバーの色を変える cursor: ***; カーソルの形を変更する |
10.インラインフレーム width: ***; height: ***; インラインフレームの大きさを指定する border: ***; インラインフレームの境界線を指定する vertical-align: ***; インラインフレームに並ぶテキストの位置(垂直方向)を指定する float: ***; インラインフレームのフロート(浮動化)を指定する margin: ***; インラインフレームの周囲にマージンを入れる clear: ***; 回り込みを解除する background-color: ***; インラインフレームの背景色を指定する background-image: url(***); インラインフレームの背景に画像を使う background-color: transparent; インラインフレームの背景を透過する scrollbar-***-color: ***; スクロールバーの色を変える |
11.マージン・パディング margin: ***; ボックスのマージン(外側の余白)を指定する margin-***: ***; 上下左右のマージンを個別に指定する padding: ***; ボックスのパディング(内側の余白)を指定する padding-***: ***; 上下左右のパディングを個別に指定する |
12.境界線 border-width: ***; border-***-width: ***; 境界線の太さを指定する border-color: ***; border-***-color: ***; 境界線の色を指定する border-style: ***; border-***-style: ***; 境界線のスタイルを指定する border: ***; border-***: ***; 境界線の設定をひとまとめに行う |
13.文字の色・サイズ・スタイル color: ***; 文字色を指定する font-size: ***; 文字サイズを指定する font-weight: ***; 文字の太さを指定する font-style: ***; イタリック体にする font-family: ***; フォントを指定する font-variant: small-caps; スモールキャピタルを指定する font: ***; フォントの設定をひとまとめに行う text-decoration: ***; 文字の装飾を指定する text-underline-position: ***; 下線の位置を指定する text-transform: ***; 大文字と小文字を変換する ruby-align: ***; ruby-overhang: ***; ruby-position: ***; ルビ(ふりがな)の位置を指定する zoom: ***; 文字を拡大する |
14.改行 white-space: ***; 改行・スペース・タブの扱いを指定する word-break: ***; 改行の仕方を指定する word-wrap: ***; 長い英単語の折り返しを指定する line-break: ***; 禁則処理を指定する |