継続は力なり＃８

2020年3月6日 18:15

テキスト関連のプロパティ（続き）

text-decoration プロパティ

テキストに下線を表示させる際に使用
以下を指定

・underline
下線を表示

・overline
上線を表示

・line-through
取消線を表示

・none
テキストの線を消す

例

HTML

<h1>下線</h1>
<h2>上線</h2>
<h3>取消線</h3>

CSS

h1,h2,h3 {
   font-size: 24px;
   font-weight: normal;
}
h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }

letter-spacing プロパティ

文字感覚を指定
標準の文字感覚からどれだけ開くかを指定（文字感覚を狭くするにはマイナスの値を指定）
以下を指定

・単位付きの実数
文字感覚を単位付きの実数で指定

・normal
文字感覚を標準状態にする

例

HTML

<h1>文字間隔を「-2px」にしています。</h1>
<h2>文字間隔を「normal」にしています。</h2>
<h3>文字間隔を「3px」にしています。</h3>
<h4>文字間隔を「6px」にしています。</h4>

CSS

h1,h2,h3,h4 {
   font-size: 16px;
   font-weight: normal;
}
h1 { letter-spacing: -2px; }
h2 { letter-spacing: normal }
h3 { letter-spacing: 3px }
h4 { letter-spacing: 6px }

text-indent プロパティ

一行のインデント（字下げ）の量を指定する
通常は「p」に指定（ブロック要素にも適用可）
初期値は０・p要素に「lem」を使用すると段落の先頭が１文字開く
以下を指定

・単位付きの実数
インデントの量を指定

・パーセンテージ
インデント量を幅に対する「％」で指定

例

HTML

<p>

その講演会場でインデントという言葉を初めてきいたとき、うっちーは入れ歯安定剤のこと想像した。
そういえばそろそろなくなりかけていたかもしれない。うっちーは忘れないようにとメモ帳に
「インデント買う」と書いた。
</p>
<p>
その帰り道、うっちーはドラッグ・ストアに寄った。インデントを購入することを忘れずにおぼえてい
たのだ。
</p>

CSS

p { text-indent: lem; }

text-transform プロパティ

アルファベットを大文字・小文字で表示できる
コード上の全てを大文字で書けばそのまま大文字だが、大文字・小文字のどちらにするのかは、CSS側での対処が良い（全て大文字だと読み上げの際、アルファベット単体で読まれる場合もある）
以下を指定

・uppercase
半角のアルファベット→全て大文字

・lowercase
半角のアルファベット→全て小文字

・capitalize
半角のアルファベット中の、各単語の頭文字を大文字

・none
テキストを元のまま表示

例

HTML

<h1>This property transforms text.</h1>
<h2>This property transforms text.</h2>
<h3>This property transforms text.</h3>
<h4>This property transforms text.</h4>

CSS

h1, h2, h3, h4 {
   font-size: 16px;
   font-weight: normal;
}
h1 { text-transform: uppercase; }
h2 { text-transform: lowercase; }
h3 { text-transform: capitalize; }
h4 { text-transform: none; }

white-space プロパティ

HTMLのでは半角スペース・改行・タブは連続している場合、まとめて
「半角スペース」に変更される
・上記の表示を変更できる
以下を指定

・normal
半角スペース・改行・タブを、連続している場合、半角スペースに変換して表示
幅がいっぱいになると、自動的に行を折り返す

・nowrap
半角スペース・改行・タブを、連続している場合、半角スペースに変換して表示
幅がいっぱいになっても、自動的な行の折り返しはない

・per
半角スペース・改行・タブを、そのまま表示
自動的な行の折り返しはない

・pre-wrap
半角スペース・改行・タブを、そのまま表示
幅がいっぱいになると自動的に行を折り返す

・pre-line
半角スペース・タブは、連続している場合、半角スペースに変換して表示
改行については、そのまま表示
幅がいっぱいになると自動的に行を折り返す

縦書き用プロパティ

writing-mode プロパティ

テキストを縦書きで表示
特殊なもの以外は、全ての要素に指定可
縦書き・横書きの設定（縦書きには「右→左」・「左→右」に読めるものがあり、その方向も含めた値がある）
以下を指定

・horizontal-tb
横書き
tb→上から下

・vertical-rl
縦書き
rl→右から左

・vertical-lr
縦書き
lr→左から右

例

HTML

<body>
<h1>＜プログラミング</h1>
<p>
HTMLとCSSを学び、Java Scriptの把握、jQueryの勉強、そこからWordPress,
そしてPHPへ移行していく計画です。
基本的には「ホームページ制作」を主軸に考えていますが、そこからシフトチェンジ
する可能性もあります。
</p>
</body>

CSS

body {
   writing-mode: vertical-rl;
   font-family:serif;
   line-height: 1.7;
}