webで、javascriptなどを使わず、Illustratorで作成したような曲線に沿ったテキストを表現する場合、以前に掲載した「svgのパスを使った方法」があります。今回はsvgも使わずCSSのみで実装します。ただし、svgの波形に沿うような柔軟さは無く、円形や曲線のみになります。

ちょっと古く、一文字ずつCSSのrotate()を設定するのはやや面倒ですが、微調整できるのが利点です。

HTMLソース

  <h1>
	<span class="char1">C</span>
	<span class="char2">o</span>
	<span class="char3">n</span>
	<span class="char4">i</span>
	<span class="char5">f</span>
	<span class="char6">e</span>
	<span class="char7">r</span>
	<span class="char8"> </span>
	<span class="char9">2</span>
	<span class="char10">0</span>
	<span class="char11">1</span>
	<span class="char12">6</span>
  </h1>

CSSソース

  h1 span {
	font: 26px Monaco, MonoSpace;
	height: 200px;
	position: absolute;
	color:#37d;
	width: 20px;
	left: 380px;
	top: 10px;
	transform-origin: bottom center;
	}
  .char1 { transform: rotate(-37deg); }
  .char2 { transform: rotate(-30deg); }
  .char3 { transform: rotate(-23deg); }
  .char4 { transform: rotate(-16deg); }
  .char5 { transform: rotate(-9deg); }
  .char6 { transform: rotate(-2deg); }
  .char7 { transform: rotate(5deg); }
  .char8 { transform: rotate(12deg); }
  .char9 { transform: rotate(19deg); }
  .char10 { transform: rotate(26deg); }
  .char11 { transform: rotate(33deg); }
  .char12 { transform: rotate(40deg); }