スタイルシート学習辞典(ロゴ)

<< | 辞典の1ページ目 |リンク集 |ヘルプ | >>

辞典の索引優先度11の例外優先度2優先度3優先度4>優先度5


優先度5(ブラウザには対応しているけれども、標準化されていない)

警告お読み下さい

ここで紹介しているスタイルシートのプロパティは、CSS2(http://www.w3.org/TR/REC-CSS2)には定められていないものです。よって、標準ではなく、推奨されるものではありません。使うのは個人の勝手ですが、できるだけ、配慮をお願います。

情報が乏しいので、紹介にとどめておきます。ほとんど空白です(未完部分が多い)。標準化(普及)のめどが立てば、詳しく解説することにします。

つぎのページが参考になるかも知れません。たたき台の段階ですが。
>>「W3CのCSS3 module:text(英語)」(http://www.w3.org/TR/css3-text/)

優先度6の索引一覧

{writing-mode : ? ;}

日本語の縦書きが出来る

インターネットエクスプローラー5.5以降で対応。ネットスケープは非対応。

参考資料として、日本語の「msdn online Web Workshop(Internet Explore5.5における縦書きレイアウトの使用)」(http://www.microsoft.com/japan/developer/workshop/author/css/verticaltext/verticaltext.asp)がある。

どうやって設定するの?

?の中に横書きの「lr-tb」、縦書きの「tb-rl」のいずれかを入れる。

縦書きになっているでしょうか。このスタイルシートは便利なのですけれども。標準化されていません。うーむ、残念。What'is this?

{layout-grid-char : ? ;}

行ではなくて、一文字一字を縦(横書きの場合)でそろえていく。その際、文字の幅を定めることが出来る。一見、letter-spacingに似ている。

インターネットエクスプローラー5.0以降で対応。

grid(以下、グリッドと称す)とは、格子のこと。日本の原稿用紙にみられるように、文字を横、縦に丁寧にそろえる。線は見えない。

このページの文字をじっくり見ると、不ぞろいであることが分かるだろう。

どうやって設定するの?

?の中に「none」か、「auto」、または長さを入れる。

表示例:「layout-grid-char:none;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-char:auto;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-char:2em;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-char:20%;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

{layout-grid-line : ? ;}

行をそろえていく。その際、行間を定めることが出来る。一見、line-heightに似ている。

インターネットエクスプローラー5.0以降で対応。

grid(以下、グリッドと称す)とは、格子のこと。日本の原稿用紙にみられるように、文字を横、縦に丁寧にそろえる。線は見えない。

このページの文字をじっくり見ると、不ぞろいであることが分かるだろう。

どうやって設定するの?

?の中に「none」か、「auto」、または長さを入れる。ちなみに、パーセント(%)は、見ている領域(ブラウザ)の幅が100パーセントになっているようだ。

表示例:「layout-grid-char:none;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-char:auto;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-char:2em;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-char:20%;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

{layout-grid-mode : ? ;}

縦、横のグリッドをそろえさせるかどうか、選択できる。ここでは、横書きと想定して、横のグリッドを行、縦のグリッドを、文字と文字の間にあるものと考える。

インターネットエクスプローラー5.0以降で対応。

grid(以下、グリッドと称す)とは、格子のこと。日本の原稿用紙にみられるように、文字を横、縦に丁寧にそろえる。線は見えない。

このページの文字をじっくり見ると、不ぞろいであることが分かるだろう。

どうやって設定するの?

?の中に縦横ともにそろわない「none」、行間をそろえる「line」、文字間をそろえる「char」、「line」、「char」の効果を合わせたような「both」のいずれかを入れる。

表示例:「layout-grid-mode:none;layout-grid-line:1em;layout-grid-char:2em;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-mode:line;layout-grid-line:1em;layout-grid-char:2em;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-mode:char;layout-grid-line:1em;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-mode:both;layout-grid-type:fixed;layout-grid-line:1em;layout-grid-char:2em;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

:賢明な読者はお気づきだろうが、「char」と設定すると、「layout-grid-line」の設定が、また、「line」と設定すると、「layout-grid-char」の設定が無視されるだろう。

{layout-grid-type : ? ;}

日本語だけではなく、アルファベットの扱いについても、そろえさせるかどうかを決めるプロパティ。

インターネットエクスプローラー5.0以降で対応。

grid(以下、グリッドと称す)とは、格子のこと。日本の原稿用紙にみられるように、文字を横、縦に丁寧にそろえる。線は見えない。

このページの文字をじっくり見ると、不ぞろいであることが分かるだろう。

どうやって設定するの?

?の中にアルファベットまでは、そろえさせない「strict」、全てをそろえさせる「fixed」、あいまいな「loose」のいずれかを入れる。

表示例:「layout-grid-type:strict;layout-grid-mode:both;layout-grid-line:1em;layout-grid-char:2em;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-type:fixed;layout-grid-mode:both;layout-grid-line:1em;layout-grid-char:2em;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

表示例:「layout-grid-type:loose;layout-grid-mode:both;layout-grid-line:1em;layout-grid-char:2em;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。What's this?

:見た感じが似ている「fixed」と「loose」の決定的な違いは、「layout-grid-char」の効果である。「fixed」には適用されず、「loose」には、日本語部分だけ効果があるようだ。

{layout-grid : ? ;}

layout-grid-mode」「layout-grid-type」「layout-grid-line」「layout-grid-char」をまとめて設定できる。

インターネットエクスプローラー5.0以降で対応。

どうやって設定するの?

?の中に「layout-grid-mode」「layout-grid-type」「layout-grid-line」「layout-grid-char」の順に設定を入れる。なお、

表示例:「layout-grid:both fixed 1em 10%;」と設定。英語と日本語が混在するとき、スタイルシートの効果を確認することが出来るかも知れない。縦横の文字がそろった文章がどれだけ必要なのかは分からないけれど。What's this?

{text-justify : ? ;}

ただいま調査中。おって報告する。

どうやって設定するの?

?の中に「auto」、「distribute」、「distribute-all-lines」、「inter-cluster」、「inter-ideograph」、「inter-word」。「newspaper」

表示例:「auto」

表示例:「distribute」

表示例:「distribute-all-lines」

表示例:「inter-cluster」

表示例:「inter-ideograph」

表示例:「inter-word」

表示例:「newspaper」

{text-underline-position : ? ;}

下線の位置を決めることが出来る。必ず、「text-decoration」と一緒に用いる。

インターネットエクスプローラー5.5で対応。ネットスケープは非対応。

どうやって設定するの?

?の中に、線を上に設定できる「above」、下にできる「below」のいずれかを入れる。

表示例:「above」

表示例:「below」

注意text-decorationでは、「overline」を値として入れると、上に線が付く。ところが、ネットスケープでは、未対応であるため、すぐには使えない。
上に線を付けたいときに、text-underline-positionを使えば、何とか、インターネットエクスプローラーでも、ネットスケープでも、どちらでも線を表示できる。ネットスケープでは下線になってしまうが。

しかしながら、やはり、このプロパティは使われるべきではないように思われる。冒頭で述べた、標準の「overline」がある以上、それを使うべきである。

{ruby-align : ? ;}

ふりがなの配置関係を決める。ふりがなを英語でルビ(ruby)と言う。ruby要素に用いる。

インターネットエクスプローラー5.0以降で対応。ネットスケープは非対応。

どうやって設定するの?

?の中に、もし、ふりがなが下の文字よりも短い場合(以下、下長)ふりがなを振られた文字の上右側に置くか、もし、ふりがなが下の文字よりも長い場合(以下、上長)振られた文字が右側に寄る「right」、下長の場合、上左側に置き、上長の場合、振られた文字が左側に寄る「left」、下長の場合、上長上中心に添えられ、上長の場合、振られた下文字が中心に寄る「center」、「distribute-letter」、「distribute-space」、「line-edge」、通常設定の「auto」のいずれかを入れる。

表示例:現在(いま)(ひいらぎ)center現在(いま)(ひいらぎ)right現在(いま)(ひいらぎ)left現在(いま)(ひいらぎ)distribute-letter現在(いま)(ひいらぎ)distribute-space現在(いま)(ひいらぎ)line-edge現在(いま)(ひいらぎ)auto

{ruby-position : ? ;}

ふりがなの位置に関する設定。ふりがなを英語でルビ(ruby)と言う。ruby要素に用いる。

インターネットエクスプローラー5.0以降で対応。ネットスケープは非対応。

どうやって設定するの?

?の中に、「above」、「in-line」

現在(いま)(ひいらぎ)above現在(いま)(ひいらぎ)in-line

{ruby-overhang : ? ;}

ふりがなが他の文字にかかるかどうかを調整できる。ふりがなを英語でルビ(ruby)と言う。ruby要素に用いる。

インターネットエクスプローラー5.0以降で対応。ネットスケープは非対応。

どうやって設定するの?

?の中に「none」、「auto」、「white-space」のいずれかを入れる。

表示例:現在(いま)(ひいらぎ)none、 現在(いま)(ひいらぎ)auto、 現在(いま)(ひいらぎ)

white-space

{ime-mode : ? ;}

文字の入力設定を行うIMEを設定させることが出来る。

どうやって設定するの?

?の中に、通常設定の「auto」、普段使っているモード(日本語入力になる?)になる「active」、それとは逆に無効になる(例えば、日本語入力が英語入力になる)「inactive」、何もしない、IMEを無能にさせる(?)「deactivated」のいずれかを入れる。

auto;
active;
inactive;
deactivated

{word-wrap : ? ;}

改行のときに、単語を途切れないようにさせるかどうかを設定する。単語を途中で切らせることで、定められた幅、境界を越えさせないように出来る。日本語には関係のない話。

widthなどで、幅を定めないと、効果が出ない。幅を定める必要がない「word-break」と言うスタイルシートもある。

インターネットエクスプローラー5.5で対応している。ネットスケープは非対応。

どうやって設定するの?

?の中に、単語を途切れないようにさせる「normal」、単語が途切れてもいいから、決められた幅を守る「break-word」のいずれかを入れる。

表示例:どちらにも、width:3emを適用して、幅が、3em(3文字分)の長さになるようにした。一番目が「word-wrap:normal;」、二番目が「word-wrap:break-word;」である。

This is applied to [normal]. To be, or not to be. That is the problem.

This is applied to [break-word]. To be, or not to be. That is the problem.

上の例では、「normal」を適用したら、widthの設定が無視され、単語が途切れないようにしてあるのがお分かりだろう。

{word-break : ? ;}

英語などの単語を途中で切らせるかどうかを設定する。word-wrapと同じような効果を得られる。ただ、こちらは、幅を定める必要はない。

インターネットエクスプローラー5.0以降で対応。ネットスケープは非対応。

どうやって設定するの?

?の中に通常設定の「normal」、日本語が多いのであれば単語が途切れる「break-all」、日本語が少なく、英語が多いのならば途切れない「keep-all」のいずれかを入れる。

表示例:This is apllied to "normal". It is useful in cases where multiple languages are used within an element.

表示例:This is apllied to "break-all". It is useful in cases where multiple languages are used within an element.

表示例:This is apllied to "keep-all". It is useful in cases where multiple languages are used within an element.

以下は、右にあるスクロールバーの色などを変えることが出来ます。

警告

個人的な意見として、スクロールバーの色はむやみに変えないでください。スクロールバーは普段使っている道具です。この色を変えると、違和感を感じて、作業しづらくなります。私は以下のスタイルシートについては、断固、拒否の姿勢を示します。

使い慣れている道具の色が変化するというのは、例えば、お使いになられている携帯電話が別の色になったのを思い浮かべてみてください。しかも、それが自分の承諾なく、他人の手によって。

{scrollbar-face-color : ? ;}

インターネットエクスプローラー5.5以降で対応。ネットスケープは非対応。

つぎのページが実用的で大変、役に立つ。
>>「マイクロソフトのMSDN内にある、スクロールバー自動生成ページ(http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm)

どうやって設定するの?

?の中に色を入れる

{scrollbar-arrow-color : ? ;}

インターネットエクスプローラー5.5以降で対応。ネットスケープは非対応。

つぎのページが実用的で大変、役に立つ。
>>「マイクロソフトのMSDN内にある、スクロールバー自動生成ページ(http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm)

どうやって設定するの?

?の中に色を入れる。

{scrollbar-base-color : ? ;}

インターネットエクスプローラー5.5以降で対応。ネットスケープは非対応。

つぎのページが実用的で大変、役に立つ。
>>「マイクロソフトのMSDN内にある、スクロールバー自動生成ページ(http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm)

どうやって設定するの?

?の中に色を入れる。

{scrollbar-shadow-color : ? ;}

インターネットエクスプローラー5.5以降で対応。ネットスケープは非対応。

つぎのページが実用的で大変、役に立つ。
>>「マイクロソフトのMSDN内にある、スクロールバー自動生成ページ(http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm)

どうやって設定するの?

?の中に色を入れる。

{scrollbar-dark-shadow-color : ? ;}

インターネットエクスプローラー5.5以降で対応。ネットスケープは非対応。

つぎのページが実用的で大変、役に立つ。
>>「マイクロソフトのMSDN内にある、スクロールバー自動生成ページ(http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm)

どうやって設定するの?

?の中に色を入れる。

{scrollbar-highlight-color : ? ;}

インターネットエクスプローラー5.5以降で対応。ネットスケープは非対応。

つぎのページが実用的で大変、役に立つ。
>>「マイクロソフトのMSDN内にある、スクロールバー自動生成ページ(http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm)

どうやって設定するの?

?の中に色を入れる。

{scrollbar-3d-light-color : ? ;}

インターネットエクスプローラー5.5以降で対応。ネットスケープは非対応。

つぎのページが実用的で大変、役に立つ。
>>「マイクロソフトのMSDN内にある、スクロールバー自動生成ページ(http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm)

どうやって設定するの?

?の中に色を入れる。

インターネットエクスプローラー独自のスタイルシートについては、次のサイトを参考にしてください。>>MSDNの「CSS Atributes Refernce(英語)」(http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp)

モジラ(mozilla)の独自拡張。

以下のプロパティは、「-moz-」と頭についている。これは、mozilla(以下、モジラと称す)の略であり、独自拡張を示すものらしい。モジラとは、オープンソースのブラウザである(詳しくはこちら>>mozilla.org(英語))。なお、このプロパティは、モジラを基にしたネットスケープ6でも対応している。

注意点として、ホームページには使うべきではない。ブラウザの外観を決めるのだけに使うとよい。

参考リンク「mozilla.jpの中にあるMozillaの独自プロパティ」や「Mozillaの独自拡張CSSは使わないでくださいーWEB標準普及プロジェクト

{-moz-opacity: ? ;}

背景や文字などを、透明にする。

どうやって設定するの?

?の中にパーセントの数値を入れる。

表示例:
90%に設定。背景が透明になったでしょうか。

注:span要素には適用されないようだ。

{-moz-border-radius: ? ;}

線の角を丸める

どうやって設定するの?

?の中にパーセントの数値を入れる。100%で円となる。

表示例:100%
back (6/6)

 (辞典の索引優先度11の例外優先度2優先度3優先度4>優先度5)

シンプル

>>辞典の1ページ目へいく

>>この章の関連リンク集が見たい

simple by dhr(Eメールでdhrname@mail.goo.ne.jp