文字の装飾下線の位置指定 大文字と小文字を変換 ルビの位置文字の拡大 はみ出し処理 文字飾りcss ﾘﾌｧﾚﾝｽ へ
文字の装飾を指定する(CSS)
text-decoration: underline;
　text-decoration は、全てのタグ（要素）に適用できます。
　text-decoration は、文字の装飾（下線、上線、取消し線、点滅）を指定するプロパティです。
　.exam { text-decoration: underline; }
プロパティ名値説　　明
text-decoration none文字飾りなし（初期値）
underline文字（テキスト）に下線を引く
overline文字（テキスト）に上線を引く
line-through文字（テキスト）に取消し線を引く
blink文字（テキスト）を点滅させる
＊ blink（文字の点滅）の指定は、Internet Exp.では対応していません。
複数の文字飾りを同時に指定する場合は、半角スペースで区切ります。
text-decoration: underline overline;
　【 参　考 】
　次のように指定すると、リンク文字（リンクボタン）を下線なしで表示できます。
a { text-decoration: none; }
装飾線の色は、color属性で指定した色になります。
　★ 使用例とブラウザでの表示 (c2-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .c2-1exam1 { text-decoration: overline; } .c2-1exam2 { text-decoration: underline; }
.c2-1exam3 { text-decoration: line-through; } .c2-1exam4 { text-decoration: blink; }
.c2-1exam5 { text-decoration: underline overline; }
使　用　例   ブラウザの表示
<span class=c2-1exam1>文字に上線を引く</span> 文字に上線を引く
<span class=c2-1exam2>文字に下線を引く</span> 文字に下線を引く
<span class=c2-1exam3>文字に取消し線を引く</span> 文字に取消し線を引く
<span class=c2-1exam4>テキストを点滅させる</span> テキストを点滅させる
<span class=c2-1exam5>文字に下線と上線を引く</span> 文字に下線と上線を引く
※ Internet Exp.は、文字の点滅（text-decoration: blink;）に対応していません。
関連するページ
HTML タグページ 取消し線：取消し線を引く
HTML タグページ 抹消文：抹消文を指定する
HTML タグページ ｱﾝﾀﾞｰﾗｲﾝ：文字の下に線を引く
HTML タグページ 追加文：追加文を指定する
HTML タグページ 文字の点滅：文字を点滅させる
文字の装飾下線の位置指定 大文字と小文字を変換 ルビの位置文字の拡大 はみ出し処理 文字飾りcss ﾘﾌｧﾚﾝｽ へ
下線の位置を指定する(CSS)
text-underline-position: above;
　text-underline-position は、全てのタグ（要素）に適用できます。
　text-underline-position は、下線の表示位置を指定するプロパティです。このプロパティの値に above を指定すると、下線を文字の上（縦書きの場合は文字の右側）に表示できます。
　div { text-decoration: underline; text-underline-position: above; }
プロパティ名値説　　明
text-underline-position above文字の上（または右側）に線を表示する
below文字の下（または左側）に線を表示する
このプロパティは、Internet Exp.の独自拡張機能です。
※ このプロパティは、CSS 2 では定義されていません。
　★ 使用例とブラウザでの表示 (c2-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .c2-2 p { text-decoration: underline; margin: 8px 0px; }
.c2-2above { text-underline-position: above; }
.c2-2below { text-underline-position: below; }
使　用　例   ブラウザの表示
<div class=c2-2>
<p class=c2-2above>文字に上線を引く</p>
<p class=c2-2below>文字に下線を引く</p>
</div>

文字に上線を引く

文字に下線を引く

☆ このプロパティは、Internet Exp.の独自拡張機能です。
※ .c2-2 p の "margin: 8px 0px;" は、<p>タグの上下の余白を 8ピクセルにする指定です。
関連するページ
CSS スタイルシートﾏｰｼﾞﾝ指定(Box)：ボックスのマージン（外側の余白）を指定する
文字の装飾下線の位置指定 大文字と小文字を変換ルビの位置 文字の拡大はみ出し処理 文字飾りcss ﾘﾌｧﾚﾝｽ へ
大文字と小文字を変換する(CSS)
text-transform: capitalize;
　text-transform は、全ての要素に適用できます。
　text-transform は、大文字と小文字を変換するプロパティです。
　p { text-transform: capitalize; }
プロパティ名値説　　明
text-transform none変換しない（初期値）
capitalize単語の先頭を大文字に変換
uppercase全ての文字を大文字に変換
lowercase全ての文字を小文字に変換
この指定は、大文字と小文字を持つ言語に対してのみ有効です。日本語（全角文字）などは影響を受けません。
　★ 使用例とブラウザでの表示 (c2-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .c2-3 p { margin: 8px 0px; }   .c2-3cap { text-transform: capitalize; }
.c2-3upp { text-transform: uppercase; }  .c2-3low { text-transform: lowercase; }
使　用　例   ブラウザの表示
<div class=c2-3>
<p class=c2-3cap>text-transform: capitalize;</p>
<p class=c2-3upp>text-transform: uppercase;</p>
<p class=c2-3low>Text-Transform: LowerCase;</p>
</div>

text-transform: capitalize;

text-transform: uppercase;

Text-Transform: LowerCase;

※ .c2-3 p { margin: 8px 0px; } は、<p>タグの上下の余白を 8ピクセルにする指定です。
関連するページ
CSS スタイルシートﾏｰｼﾞﾝ指定(Box)：ボックスのマージン（外側の余白）を指定する
文字の装飾下線の位置指定 大文字と小文字を変換ルビの位置 文字の拡大はみ出し処理 文字飾りcss ﾘﾌｧﾚﾝｽ へ
ルビ（ふりがな）の位置を指定する(CSS)
ruby-align: auto; ruby-overhang: auto; ruby-position: above;
　ruby-align などは、<ruby>タグ（要素）に適用できます。
　ruby-align、ruby-overhang、ruby-position は、ルビの位置などを指定するプロパティです。
ruby-align … ルビの位置を、左寄せ、中央揃えなどに指定します。
ruby-overhang … ルビが長い場合の「はみ出し」方法を指定します。
ruby-position … ルビの位置を、対象テキストの上部か後方で指定します。
　ruby { ruby-align: auto; ruby-overhang: auto; ruby-position: above; }
　以下の表示例は、緑色の文字に対してルビを振っています。
プロパティ名値説　　明表示例
ruby-align auto自動 ルビの対象文字（ふりがな）
left左寄せ ルビの対象文字（ふりがな）
center中央揃え ルビの対象文字（ふりがな）
right右寄せ ルビの対象文字（ふりがな）
distribute-letter両端揃え ルビの対象文字（ふりがな）
distribute-space均等割付 ルビの対象文字（ふりがな）
line-edge行端揃え ルビの（ふりがな・フリガナ）対象文字
ルビの対象文字（ふりがな・フリガナ）
ruby-overhang autoはみ出す ルビの対象（ふりがな・フリガナ）文字
whitespaceｽﾍﾟｰｽまではみ出す ルビの対象（ふりがな・フリガナ）文字
noneはみ出さない ルビの対象（ふりがな・フリガナ）文字
ruby-position above文字の上部に表示 ルビの対象文字（ふりがな）
inline文字の後方に表示 ルビの対象文字（ふりがな）
ruby-overhang プロパティの指定は、値を変更しても変化が見られませんでした。
このプロパティは、Internet Exp.の独自拡張機能です。
※ このプロパティは、CSS 2 では定義されていません。
　★ 使用例とブラウザでの表示 (c2-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .c2-4center { ruby-align: center; }
.c2-4letter { ruby-align: distribute-letter; }
.c2-4inline { ruby-position: inline; }
使　用　例   ブラウザの表示
<ruby class=c2-4center><rb>山田 太郎</rb>
<rp>（</rp><rt>やまだ たろう</rt><rp>）</rp></ruby>		 山田 太郎 （やまだ たろう）
※ 中央寄せ
<ruby class=c2-4letter><rb>太田 花子</rb>
<rp>（</rp><rt>おおた はなこ</rt><rp>）</rp></ruby>		 太田 花子 （おおた はなこ）
※ 両端揃え
<ruby class=c2-4inline><rb>田 幸</rb>
<rp>（</rp><rt>でん さち</rt><rp>）</rp></ruby>		 田 亨（でん さち）
※ 文字の後方に表示
☆ このプロパティは、Internet Exp.の独自拡張機能です。
※ この例は、「中央寄せ」と「両端揃え」の違いを解りやすくするため性と名を纏めて指定しています。
氏名にルビをふる場合は、性と名を個別に指定する方が良いでしょう。
関連するページ
HTML タグページ ルビ：ルビ（ふりがな）を付ける
文字の装飾下線の位置指定 大文字と小文字を変換ルビの位置 文字の拡大はみ出し処理 文字飾りcss ﾘﾌｧﾚﾝｽ へ
文字を拡大（縮小）する(CSS)
zoom: 1.5;
　zoom は、全てのタグ（要素）に適用できます。
　zoom は、文字拡大（縮小）を指定するプロパティです。
　div { zoom: 1.5; }   div { zoom: 80%; }
プロパティ名値説　　明
zoom 数値またはパーセント拡大（縮小）率などを指定
＊ 値には normal（標準）も指定できます。
　【値の指定方法】
数値で指定％で指定表　　示
zoom: 1; zoom: 100%;通常の大きさ
zoom: 1.5; zoom: 150%;1.5倍に拡大
zoom: 0.5; zoom: 50%;半分に縮小
文字サイズを変更する場合は、通常は font-sizeプロパティを使用します。
このプロパティは、Internet Exp.の独自拡張機能です。
※ このプロパティは、CSS 2 では定義されていません。
　★ 使用例とブラウザでの表示 (c2-5)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .c2-5z125p { zoom: 125%; }   .c2-5z75p { zoom: 75%; }
使　用　例   ブラウザの表示
<p class=c2-5z125p>文字サイズを125％に拡大</p>

文字サイズを125％に拡大

<p class=c2-5z75p>文字サイズを75％に縮小</p>

文字サイズを75％に縮小

☆ このプロパティは、Internet Exp.の独自拡張機能です。
関連するページ
CSS スタイルシート文字ｻｲｽﾞ指定：文字サイズを指定する
文字の装飾下線の位置指定 大文字と小文字を変換ルビの位置 文字の拡大はみ出し処理 文字飾りcss ﾘﾌｧﾚﾝｽ へ
領域からはみ出た場合に「...」を表示する(CSS)
text-overflow: ellipsis;
　text-overflow は、ブロックレベルのタグ（要素）に適用できます。
　text-overflow は、文字が領域からはみ出ている場合に、末尾に省略符号（ ... ）を表示するか否かを指定するプロパティです。
　div { text-overflow: ellipsis; }
プロパティ名値説　　明
text-overflow clip省略符号（ ... ）を表示しない
ellipsis省略符号を表示する
このプロパティは、Internet Exp.の独自拡張機能です。
※ このプロパティは、CSS 2 では定義されていません。
　★ 使用例とブラウザでの表示 (c2-6)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .c2-6 p { width: 240px; height: 50px; border: 1px blue solid; overflow: auto;
white-space: noWrap; padding: 4px; margin: 8px 0px; }
.c2-6clip { text-overflow: clip; }   .c2-6ellip { text-overflow: ellipsis; }
使　用　例   ブラウザの表示
<div class=c2-6>
<p class=c2-6clip>
領域からはみ出てても、省略符号を付けません。</p>

<p class=c2-6ellip>
領域からはみ出た場合、省略符号を付けます。</p>
</div>

領域からはみ出てても、省略符号を付けません。

領域からはみ出た場合、省略符号を付けます。

☆ このプロパティは、Internet Exp.の独自拡張機能です。
※ overflow: auto; は、スクロールの自動表示です。white-space: noWrap; は、自動折り返しを禁止する指定です。margin: 8px 0px; は、ボックス間の余白の設定です。
文字の装飾下線の位置指定 大文字と小文字を変換ルビの位置 文字の拡大はみ出し処理 文字飾りcss ﾘﾌｧﾚﾝｽ へ