webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

letter-spacing: word-spacing:

f:id:ohta-felica:20160427222303p:plain 

<style>

html, body, h1, p{
margin: 0;
padding: 0;
line-height: 1.0;
font-family: YouGothic,"游ゴシック", sans-serif;
}
body{
font-size: 16px;
background: #FFFFEE;
}
#wrapper{
width: 960px;
margin: 0 auto;
}
h1{font-size: 50px;
text-transform: uppercase;}
h1 .space{letter-spacing: 1.5em;}
h1 .green{color: #063;}
p.wordsp1{word-spacing: -0.5em;}
p.wordsp3{word-spacing: 1em;}
p.wordsp4{word-spacing: 2em;}
p.lettersp1{letter-spacing: -0.1em;}
p.lettersp3{letter-spacing: 0.5em;}
p.lettersp4{letter-spacing: 1em;}
</style>
</head>

<body>

</html>

<div id="wrapper">
<h1><span class="space">adobe </span><span class="green">deramweaver cs6</span></h1>
<p>単語間隔</p>
<p class="wordsp1">Adobe Dreamweaver CS6(-0.5em)</p>
<p class="wordsp2">Adobe Dreamweaver CS6(標準)</p>
<p class="wordsp3">Adobe Dreamweaver CS6(1em)</p>
<p class="wordsp4">Adobe Dreamweaver CS6(2em)</p>
<p>文字間隔</p>
<p class="lettersp1">Adobe Dreamweaver CS6(-0.1em)</p>
<p class="lettersp2">Adobe Dreamweaver CS6(標準)</p>
<p class="lettersp3">Adobe Dreamweaver CS6(0.5em)</p>
<p class="lettersp4">Adobe Dreamweaver CS6(1em)</p>
</div>
</body>
</html>
</body>