text-transform「字形の変換」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-capitalize{text-transform : capitalize;}
.css-uppercase{text-transform : uppercase;}
.css-lowercase{text-transform : lowercase;}
.css-full-width{text-transform : full-width;}
.css-none{text-transform : none;}

<!-- html -->
<div class="common">
  <div class="cssTitle">text-transform:capitalize;<br>（先頭文字のみ大文字表示）</div>
  <div class="css-capitalize">
  This property transforms text for styling purposes.
  </div>

  <div class="cssTitle">text-transform:uppercase;<br>（すべて大文字表示）</div>
  <div class="css-uppercase">
  This property transforms text for styling purposes.
  </div>

  <div class="cssTitle">text-transform:lowercase;<br>（すべて小文字表示）</div>
  <div class="css-lowercase">
  This property transforms text for styling purposes.
  </div>

  <div class="cssTitle">text-transform:full-width;<br>（すべて全角表示）</div>
  <div>
  <span class="css-full-width">
  This property transforms text for styling purposes.<span><br><br>
  <span class="css-full-width">
  ﾃﾞｨｽ ﾌﾟﾛﾊﾟﾃｨ ﾄﾗﾝｽﾌｫｰﾑ ﾃｷｽﾄ ﾌｫｰ ｽﾀｲﾘﾝｸﾞ ﾊﾟｰﾊﾟｽ<span>
  </div>

  <div class="cssTitle">text-transform:none;<br>（字形の変換なし）</div>
  <div>
  <span class="css-none">
  This property transforms text for styling purposes.<span><br><br>
  <span class="css-none">
  ﾃﾞｨｽ ﾌﾟﾛﾊﾟﾃｨ ﾄﾗﾝｽﾌｫｰﾑ ﾃｷｽﾄ ﾌｫｰ ｽﾀｲﾘﾝｸﾞ ﾊﾟｰﾊﾟｽ<span>
  </div>
</div>