サイト内検索
...タグ・小技・etc...
文字を重ねる
line-height・letter-spacingを指定
[サンプル]
line-height:40%;を指定します。
かさなる文字
かさなる文字
文字のサイズを変えてline-height:20%;・letter-spacingを指定します。
かさなる文字
重なる文字
重なる文字
背景色を指定
重なる文字
重なる文字
重なる文字
「
WEB OKANOs Customize」を参照させて頂きました。
重なる文字
サンプルのソース
[headの中]
<style type="text/css"><!--
.sample1{
line-height:40% ;
}
.sample2{
color:#d8511a; font-size:60px;
}
.sample3{
color:#ffa500; font-size:58px;
}
.sample4{
line-height:20%; padding-bottom:40px;
}
.sample5{
color:#d8511a; font-size:60px; font-weight: bolder;
}
.sample6{
letter-spacing:2.8px; color:#ffa500; font-size:58px; font-weight: bolder;
}
.sample7{
line-height: 40%;
background-color: #ffff8e;
padding:30px 260px 30px 30px;
}
.sample8{
color: #d8511a; font-size: 30px;
}
.sample9{
color:#ffa500; font-size: 28px;
}
-->
</style>
[bodyの中]
「line-height:40%;」を指定<div class="sample1">
<span class="sample2">かさなる文字</span>
<br />
<span class="sample3">かさなる文字</span>
</div>
文字のサイズを変えて「line-height:7%;」・「letter-spacing」を指定
<div class="sample4"><span class="sample5">重なる文字</span>
<br />
<span class="sample6">重なる文字</span>
</div>
背景色を指定
<div class="sample7"><span class="sample8">重なる文字</span>
<br />
<span class="sample9">重なる文字</span>
</div>