ホームページ作成の基礎からご提供するホームページ作成Space | |
![]() |
|
![]() | |
|
|
CSS テキスト
◆ text-indent: indent (C1/e3/N4)テキストの最初の 1行のインデント(字下げ)を 1em のような単位付きの数値、10% のようなパーセント、inherit(継承)のいずれかで指定します。下記の例では、すべての段落(<p>~</p>)の先頭を 1文字分字下げします。 P { text-indent: 1em; }
◆ text-align: talign (C1/e3/N4)テキストの配置を left(既定値:左寄せ)、right(右寄せ)、center(センタリング)、justify(両端揃え)、inherit(継承)のいずれかで指定します。ブロック要素に対して有効です。justify は、IE5.0 や Netscape 6 から対応しています。IE の場合は、text-align のみだと、空白調整による両端揃え、text-justify とくみ合わせると文字間調整による両端そろえを実現するようです。CSS2 ではテーブルにおけるセルの各要素を指定文字で揃える(数値を小数点の位置でそろえるなど)機能もサポートされましたが、大半のブラウザではまだサポートされていないようです。 P { text-align: center; }
◆ text-justify: justify (e5)text-align: justify; と組み合わせて使用します。単語間や文字間のスペースを調整して、文章の表示上の右端あわせを行います。justify には、auto(既定値)、newspaper(英文向け)、inter-word(単語間のみによる調整)、distribute-all-lines(最後の行も調整)、inter-ideograph(単語間と文字間による調整)、inter-cluster(アジア言語向け)、distribute(タイ言語向け)、kashida(アラビア語向け)などを指定します。 DIV { text-align: justify; text-justify: distribute-all-lines; }
◆ text-decoration: decoration decoration ... (C1/e3/N4)テキストの装飾を none(何もなし)、underline(下線)、overline(上線)、line-through(打ち消し線)、blink(点滅)、inherit(継承)で指定します。複数指定も可能です。下記の例では、A要素に対して none を指定することで、下線の無いリンクテキストを実現しています。 A { text-decoration: none; }
◆ text-underline-position: position (e55)下線の場所を、below(既定値:下側)、above(上側)のいずれかで指定します。 .upperline { text-decoration: underline; text-underline-position: above; }
◆ text-shadow: color x y shading, ... (C2)テキストに影をつけます。下記の例では、H1要素の右方向 2px、下方向 3pxの位置にぼかし 4px の赤い影と、右方向 5px、下方向 6px の位置にぼかし無しの H1要素と同じ色の影をつけます。その他に none(無し)、inherit(継承)も指定可能です。 H1 { text-shadow: red 2px 3px 4px, 5px 6px; }
◆ letter-spacing: space (C1/e4/N6)各文字間のスペースを normal(既定値)、2px などの長さ、inherit(継承)のいずれかで指定します。 BODY, TH, TD { letter-spacing: 0.5em; }
◆ word-spacing: space (C1/e6/N6)各ワード間のスペースを normal(既定値)、10px などの長さ、inherit(継承)のいずれかで指定します。 BODY, TH, TD { word-spacing: 3em; }
◆ text-transform: transform (C1/e4/N6)大文字、小文字変換について、capitalize(各単語の最初の文字を大文字にする)、uppercase(すべて大文字にする)、lowercase(すべて小文字にする)、none(既定値:何もしない)、inherit(継承)のいずれかで指定します。 H1 { text-transform: capitalize; }
◆ white-space: space (C1/e6/N4)要素の中の空白がどのように扱われるかを normal(既定値:通常)、pre(自動改行しない、空白そのまま)、nowrap(自動改行しない、空白はつめる)、inherit(継承)のいずれかで指定します。 TD { white-space: nowrap; }
◆ line-break: mode (e5)行末の禁則処理を、normal(既定値:通常通り「。」や「、」が禁則処理される)、strict(「っ」や「ゃ」なども禁則処理される)のいずれかで指定します。Netscape ではまだサポートされていませんが、通常時の動作として、Netscape 4.* では normal、Netscape 6.0 では strict と同じ動作をするようです。 ◆ word-break: mode (e5)行末の単語禁則処理を、normal(既定値:英文のみ単語の切れ目で改行)、break-all(英文、和文共に単語の途中でも改行)、keep-all(英文、和文共に単語の切れ目で改行)のいずれかで指定します。 ◆ ruby-align: align (e5)<ruby> 要素に対してルビの配置を、auto(既定値:自動)、left(左寄)、center(中央)、right(右寄)、distribute-letter(両端揃え)、distribute-space(均割)、line-edge(行末での処理変更)のいずれかで指定します。 ◆ ruby-overhang: overhang (e5)ルビが長い場合のはみ出し具合を auto(既定値:はみ出す)、whitespace(スペース文字分までははみ出す)、none(はみ出さない)のいずれかで指定します。 ◆ ruby-position: position (e5)<ruby> 要素に対してルビの配置を、above(既定値:上部)、inline(横)のいずれかで指定します。inline を指定した場合は、<ruby> 未対応のブラウザのように表示されます。 ◆ layout-grid: mode type line char (e5)◆ layout-grid-line: line (e5)◆ layout-grid-char: char (e5)◆ layout-grid-mode: mode (e5)◆ layout-grid-type: type (e5)行間や文字間のスペースを調整します。line と char には、行間、文字間のスペースを none(既定値:指定無し)、auto(自動)、3px や 1em などの長さや割合(%)のいずれかで指定します。mode には both(既定値:line と char の両方を適用する)、none(どちらも適用しない)、line(line のみを適用する)、char(char のみを適用する)のいずれかを指定します。type には、loose(既定値:日本語や韓国語に適した方法)、strict(中国語にも適した方法)、fixed(固定)のいずれかを指定します。半角文字と全角文字が混在した時の文字間の開け方が多少異なるようです。 ◆ text-autospace: mode (e5)漢字のような表意文字と非表意文字の間にほんの少しだけ隙間を入れるかどうかを、none(既定値:隙間を入れない)、ideograph-alpha(表意文字と非表意文字の間に入れる)、ideograph-numeric(表意文字と数字の間に入れる)、ideograph-parenthesis(表意文字と括弧の間に入れる)、ideograph-space(表意文字の位置に適合するように入れる)のいずれかで指定します。 ◆ text-kashida-space: kashida (e55)アラビア語などのテキスト配置を最善化する際に用います。kashida には 50% のようなパーセントか、inherit(継承)のいずれかを指定します。 ◆ writing-mode: mode (e55)縦書きを実現します。mode には lr-tb(横書き:left to right, top to bottom)、tb-rl(縦書き:top to bottom, right to left)のいずれかを指定します。 <div style="writing-mode: tb-rl"> むかし、むかし、あるところに・・・ </div> |
![]() |
|
| 運営会社 | お問い合わせ | 広告掲載について | プライバシーポリシー | ご利用にあたって プロデュースはホームページ制作のTOSHO SEO対策のSEO Space COPYRIGHT©2008~ ホームページ作成Space ALLRIGHT RESERVED. 看護師 求人 比較サイト | 通信 | パソコン | ネイルサロン 新宿 | 和紙 通販 | 別れさせ | ルイ・ヴィトン買取 | ダイヤモンド | 太陽光発電 | | ||
![]() | ||