継続は力なり#8
テキスト関連のプロパティ(続き)
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」に指定(ブロック要素にも適用可)
初期値は0・p要素に「lem」を使用すると段落の先頭が1文字開く
以下を指定
・単位付きの実数
インデントの量を指定
・パーセンテージ
インデント量を幅に対する「%」で指定
例
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;
}