PHP & JavaScript Room :: 設置サンプル

vertical-alignの使用例:文字をウェーブ状に配置

実行結果

P H P & J a v a S c ri p t R o o m

ソース

<style type="text/css">
    .wave         { font-weight:bold; letter-spacing:0.5; padding:0 0 2em 0; }
    .wave span.v1 { vertical-align: 6px; }
    .wave span.v2 { vertical-align: 12px; }
    .wave span.v3 { vertical-align: -6px; }
    .wave span.v4 { vertical-align: -12px; }
</style>

<div class="wave">
P
<span class="v1">H</span>
<span class="v2">P</span>
<span class="v1">&amp;</span> J
<span class="v3">a</span>
<span class="v4">v</span>
<span class="v3">a</span>
<span class="v1">S</span>
<span class="v2">c</span>
<span class="v1">r</span>i
<span class="v3">p</span>
<span class="v4">t</span> R
<span class="v2">o</span>
<span class="v1">o</span> m
</div>

polarized women