Thinking Archive(仮)

• Index

  • text-align
  • text-decoration
  • white-space

• テキスト

  text-align

  ブロックレベル要素内のインライン要素の水平表示位置を指定する

  値

  left

  インライン要素を左に寄せる

  right

  インライン要素を右に寄せる

  center

  インライン要素を中央に寄せる

  justify

  インライン要素の均等割付。
  単体では動作せず、text-justifyと併用する必要がある。IEの独自規格のため、あまり使われない。

  text-align はブロックレベル要素にしか指定できず、指定したブロックレベル要素の内部のインライン要素を寄せます。

  text-align の使用例
  <div style='text-align: center'>text-align は<strong>ブロックレベル要素のみ</strong>に指定できます。</div>

  text-decoration

  文字を装飾する

  値

  underline

  下線

  overline

  上線

  line-through

  打ち消し線

  blink

  点滅

  none

  文字を装飾しない (初期値)

  特定の要素の装飾方法を上書きする手段が効果的です。
  例えば、以下の htmlソース のWebサイトで太字を解除したいとします。

  htmlソース
  <b><div class='msg'>こんにちは世界</div></b>

  この場合は、<div style='text-decoration: none' class='msg'> のようにソースを書き換えるだけでOKです。
  b要素を削除しても良いですが、マッチさせる範囲は小さい方が管理しやすいでしょう。

  white-space

  空白文字の表示形式を指定する

  値

  normal

  連続した空白文字を1つの半角空白として表示する (初期値)

  pre

  空白文字をそれぞれの文字の表示形式でそのまま表示し、折り返しを無効にする
  (フォントを除き、pre要素の表示形式に等しい)

  nowrap

  連続した空白文字を1つの半角空白として表示し、折り返しを無効にする。
  (nowrap属性の表示形式に等しい)

  inherit

  親要素の表示形式を明示的に継承する

  HTMLで書くべきか、CSSで書くべきか、上手く使い分けましょう。