HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

★今すぐ仕事に結びつく稼げる資格!スキルアップガイド無料進呈中 Click Here![PR]

● 文字・・・その他

ただ、こちらのは少々難ありのものです。思ったように表示されていない人がいるかもしれないとの覚悟を・・・。
煩雑になるのを防ぐために隔離してこちらで紹介しております。

○ルビ文字 IE仕様
文字にルビをふるには、<RUBY>・<RB>・<RT>・<RP>の4つのタグを使用します。
<RB>タグはルビをふる対象となる文字
<RT>タグはルビとなる文字
<RP>タグルビとなる文字を囲む括弧等の記号
これら3つを<RUBY>タグで囲います。
<RUBY><RB>対象文字</RB><RP>(</RP><RT>ルビの文字</RT><RP>)</RP></RUBY>
<RUBY>タグに対応していないブラウザでは、対象文字(ルビの文字)のように表示されます。

○ルビ文字の配置場所を設定(ruby-position) IE仕様
<RUBY>タグ(IE仕様)にstyle属性を用いてルビの配置を設定します。
属性無しぞくせいなし
style="ruby-position:above"(規定値:上に配置)ルビ文字
style="ruby-position:inline"(横に配置)ルビ文字

○ルビ文字の横配置を設定(ruby-align) IE仕様
<RUBY>タグ(IE仕様)にstyle属性を用いてルビの配置を設定します。
style="ruby-align:auto"(規定値:自動)ルビ文字
style="ruby-align:left"(左寄せ)ルビ文字
style="ruby-align:center"(中央)ルビ文字
style="ruby-align:right"(右寄せ)ルビ文字
style="ruby-align:distribute-letter"(両端揃え)ルビ文字
style="ruby-align:distribute-space"(両端揃えスペース付き)ルビ文字
style="ruby-align:line-edge"(改行対応の中央)対象文字よりルビ文字が長くなったときにこうなります
style="ruby-align:line-edge"(改行対応の中央)対象文字よりルビ文字が長くなったときにこうなります後が改行でなければ中央に

○ルビ文字の縦配置を設定(ruby-overhang) IE仕様
<RUBY>タグ(IE仕様)にstyle属性を用いてルビの配置を設定します。
style="ruby-overhang:auto"(規定値:自動)ルビ文字、この文字の位置を調整
style="ruby-overhang:none"(無し)ルビ文字、この文字の位置を調整
style="ruby-overhang:whitespace"(無し)ルビ文字、この文字の位置を調整
タグに対してルビの張り出しかたを設定するのですが、変化がない・・・?
色々調べてみると
auto(規定値:自動)は対象文字の前後の文字の上までせり出して表示ってことだけど・・・既定値でそうじゃない見たいですけど・・・。
noneは対象文字の上だけにルビが来るよう調整??
whitespaceは対象文字とその前後にスペースを取って表示・・・これが既定値になってるみたい・・・?

○文字方向の設定(writing-mode) IE仕様
style="writing-mode:tb-rl"が 縦方向で、
style="writing-mode:lr-tb"が横方向の表示です。
レイアウトが難しいです。

縦書きになります。
margin-right:3emによって右側を少しあけています。
半角文字は『abc123』こうなり、
全角なら『abc123』となります。
text-alignは左(left)が上で、 『行頭』って事でしょう。

○自動改行の抑制を設定(line-break)IE仕様
style="line-break:normal" 改行の制御を行います。通常、句点『。』読点『、』は行頭に来ないように設定されていますが、これをstrictの値では、よう音『ゃゅょ』と促音『っ』の付く文字(きゃきゅうきょ、しゃしゅしょ、など)でも改行させないように設定します
style="line-break:strict" 改行の制御を行います。通常、句点『。』読点『、』は行頭に来ないように設定されていますが、これをstrictの値では、よう音『ゃゅょ』と促音『っ』の付く文字(きゃきゅうきょ、しゃしゅしょ、など)でも改行させないように設定します
ウィンドウの左右の幅を調整して上下の文中の『きゃきゅうきょ、しゃしゅしょ』の改行の仕方に注目してください。

○自動改行の位置を設定(word-break)IE仕様
style="word-break:normal" 改行位置を制御します。英文は単語の切れ目(半角スペース『Internet Explorer for windows』や−など『word-break』の位置)で 優先的 に 改行 されます が、keep-allを設定すると、これが日本語でも適用されるようになります。
style="word-break:keep-all" 改行位置を制御します。英文は単語の切れ目(半角スペース『Internet Explorer for windows』や−など『word-break』の位置)で 優先的 に 改行 されます が、keep-allを設定すると、これが日本語でも適用されるようになります。
ウィンドウの左右の幅を調整して上下の括弧内のアルファベットと半角スペースの箇所の改行の仕方に注目してください。
『優先的』、『改行』、『されます』の前後に半角スペースがあり、下の文ではこれらの単語は2行に渡ることがありません。

○改行の許可を設定(word-wrap)IE仕様
幅を設定された時も基本的に単語の途中では改行しないようになっていますが、break-wordを設定するとその規則を無視して単語の途中でも改行します。
style="word-wrap:normal"
<DIV style="width:40px ; background-color:#FFFFFF ; word-wrap:normal">

Internet Explorer for windows

style="word-wrap:break-word"

Internet Explorer for windows

○特定の文字の間隔を設定(text-autospace) IE仕様
style="text-autospace:normal"(規定値)特に隙間を入れない。
style="text-autospace:ideograph-numeric"(表意文字と半角数字等の間に隙間を創る)
アルファベットabcや括弧()数字123などの間に隙間(スペースではない)を入れるためのスタイル設定です。

style="text-autospace:ideograph-alpha"(表意文字と非表意文字の間に隙間を創る)
アルファベットabcや括弧()数字123などの間に隙間(スペースではない)を入れるためのスタイル設定です。

style="text-autospace:ideograph-parenthesis"(表意文字と半角丸括弧の間に隙間を創る)
アルファベットabcや括弧()数字123などの間に隙間(スペースではない)を入れるためのスタイル設定です。

style="text-autospace:ideograph-space"(表意文字の位置に適合するよう隙間を創る)
アルファベットabcや括弧()数字123などの間に隙間(スペースではない)を入れるためのスタイル設定です。

隙間あるか・・・?何か間違ってる?

○グリッドの設定(layout-grid) IE仕様
グリッド(文字の間隔や行間などの配置)を設定するもので、mode / type / line / charの4つ設定があります。
mode には none(無効)、both(有効)、line(lineを有効)、char(charを有効)の4つの値があります。
type には、loose(通常)、strict(全角に適用)、fixed(固定)の4つの値があります。
linechar には、行間隔、文字間隔をnone(設定無し)、auto(自動)、数値や割合(%)の値を設定します。

style="layout-grid:both loose 0.3em 10px"
グリッド(文字の間隔や行間などの配置)を設定するもので、mode type line charの4つ設定があり、『layout-grid:mode type line char』と値を半角スペース事に区切ることで一括設定が可能です。

style="layout-grid:both strict 0.3em 10px"
グリッド(文字の間隔や行間などの配置)を設定するもので、mode type line charの4つ設定があり、『layout-grid:mode type line char』と値を半角スペース事に区切ることで一括設定が可能です。

style="layout-grid:both fixed 0.3em 10px"
グリッド(文字の間隔や行間などの配置)を設定するもので、mode type line charの4つ設定があり、『layout-grid:mode type line char』と値を半角スペース事に区切ることで一括設定が可能です。

mode / type / line / charの4つ設定は layout-grid-mode / layout-grid-type / layout-grid-char / layout-grid-line で、個別に設定することも可能です。

○文字の均等割付を設定(text-justify)-IE仕様です
text-align:justifyとくみ合わせて使用します。『text-align:justify ; text-justify:値』となります。
改行の際に右側(行末)に隙間が空くのを防ぎます。
style="text-align:justify ; text-justify:auto"  ブラウザ依存で自動的に均等割付を行います。text-align : justifyとくみ合わせて『text-align : justify ; text-justify : 値』となります。
style="text-align:justify ; text-justify:distribute"  単語間隔と文字間隔を調整して均等割付を行います。text-align-justify とくみ合わせて『text-align : justify ; text-justify : 値』となります。

style="text-align:justify ; text-justify:distribute-all-lines"  単語間隔と文字間隔を調整して均等割付を行いますが、文字数が一行に満たない行も均等に割り付けます。text-align : justifyとくみ合わせて『text-align : justify ; text-justify : 値』となります。

style="text-align:justify ; text-justify:inter-cluster"  文字間隔のみ調整して均等割付を行います。日本語向け? text-align : justifyとくみ合わせて『text-align : justify ; text-justify : 値』となります。

style="text-align:justify ; text-justify:inter-ideograph"  全角文字の文字間隔を調整して均等割付を行います。日本語に適切?text-align : justifyとくみ合わせて『text-align : justify ; text-justify : 値』となります。

style="text-align:justify ; text-justify:inter-word"  単語間隔を調整して均等割付を行います。text-align : justifyとくみ合わせて『text-align : justify ; text-justify : 値』となります。

style="text-align:justify ; text-justify:kashida"  アラビア語用の均等割付。 text-align : justifyとくみ合わせて『text-align : justify ; text-justify : 値』となります。

style="text-align:justify ; text-justify:newspaper"  単語間隔と文字間隔を調整して均等割付を行います。text-align : justifyとくみ合わせて『text-align : justify ; text-justify : 値』となります。

distribute-all-lines は特徴が出ていますが、他はちょっと・・・。
:と;の間に半角スペースが空いていますので、その辺が着目点?ウィンドウの広さを変えてみてご確認ください。

○文字の配置の最適化量を設定(text-kashida-space)IE仕様
『text-align:justify』で『text-justify:kashida』の時に使用します。

style="text-align:justify ; text-justify:kashida ; text-kashida-space:inherit"  『text-align:justify』で『text-justify:kashida』の時に使用します。アラビア語などの均等配置を最善化する際に用いられるらしい。
style="text-align:justify ; text-justify:kashida ; text-kashida-space:80%"  『text-align:justify』で『text-justify:kashida』の時に使用します。アラビア語などの均等配置を最善化する際に用いられるらしい。
style="text-align:justify ; text-justify:kashida ; text-kashida-space:30%"  『text-align:justify』で『text-justify:kashida』の時に使用します。アラビア語などの均等配置を最善化する際に用いられるらしい。

パーセントか、inherit を設定します。私には違いが分りませんが・・・?

○文字の線を設定(text-underline-position)IE仕様
<U style="text-underline-position:below"> アンダーライン(既定)
<U style="text-underline-position:above"> オーバーライン
アンダーライン設定タグ<U>に装飾するものです。アンダーラインタグなのにオーバーライン・・・?
FONT要素同様U要素も装飾に当たるのでスタイルシートを使用するようにします。(text-decorationの使用)

<<前へ  |上へ|  次へ>>
1234567891011121314151617

今すぐ仕事に結びつく資格&技能完全ガイド【情報満載のガイド無料進呈】

‥…━★ 通信教育80年の実績!がくぶん総合教育センター ★━…‥

TOP] [HOME

更新日時:2014/08/09