See the Pen
width,height by linlin (@linlin098765)
on CodePen.
<div>ああああああああああああああああああ</div>div{
background-color:gray;
width:10vw;
max-width:150px;
min-width:100px;
height:5vw;
max-height:200px;
min-height:50px;
} CSSのmax-heightは、高さの最大値を指定するプロパティです。
指定方法は、px,vw,vh,%などがあります。
See the Pen
width,height by linlin (@linlin098765)
on CodePen.
<div>ああああああああああああああああああ</div>div{
background-color:gray;
width:10vw;
max-width:150px;
min-width:100px;
height:5vw;
max-height:200px;
min-height:50px;
} CSSのheightは、高さを指定するプロパティです。
指定方法は、px,vw,vh,%などがあります。
See the Pen
width,height by linlin (@linlin098765)
on CodePen.
<div>ああああああああああああああああああ</div>div{
background-color:gray;
width:10vw;
max-width:150px;
min-width:100px;
height:5vw;
max-height:200px;
min-height:50px;
} CSSのmin-widthは、横幅の最小値を指定するプロパティです。
指定方法としては、px,vw,vh,%などがあります。
See the Pen
width,height by linlin (@linlin098765)
on CodePen.
<div>ああああああああああああああああああ</div>div{
background-color:gray;
width:10vw;
max-width:150px;
min-width:100px;
height:5vw;
max-height:200px;
min-height:50px;
} CSSのmax-widthは、横幅の最大値を指定するプロパティです。
指定方法としては、px,vw,vh,%などがあります。
See the Pen
width,height by linlin (@linlin098765)
on CodePen.
<div>ああああああああああああああああああ</div>div{
background-color:gray;
width:10vw;
max-width:150px;
min-width:100px;
height:5vw;
max-height:200px;
min-height:50px;
} CSSのwidthは、横幅を指定するプロパティです。
指定方法は、px,vw,vh,%などがあります。
See the Pen
text-shadow by linlin (@linlin098765)
on CodePen.
<p class="sample1">text-shadow</p>p.sample1 {text-shadow:3px 3px 3px gray;}CSSのtext-shadowはテキストに影をつけるプロパティです。
See the Pen
word-spacing by linlin (@linlin098765)
on CodePen.
<div class="sample1">I am man.</div>
<div class="sample2">I am man.</div>
<div class="sample3">I am man.</div>
<div class="sample4">I am man.</div>
<div class="sample5">I am man.</div>div.sample1 {word-spacing: 10px;}
div.sample2 {word-spacing: 30px;}
div.sample3 {word-spacing: -10px;}
div.sample4 {word-spacing: 50%;}
div.sample5 {word-spacing: -50%;}CSSのword-spacingは、単語の間隔を指定するプロパティです。負の値も指定可能です。
See the Pen
letter-spacing by linlin (@linlin098765)
on CodePen.
<div class="sample1">文字間隔10px</div>
<div class="sample2">文字間隔20px</div>
<div class="sample3">文字間隔-10px</div>div.sample1 {letter-spacing: 10px;}
div.sample2 {letter-spacing: 20px;}
div.sample3 {letter-spacing: -10px;}CSSのletter-spacingは、文字の間隔を指定するプロパティです。行頭・行末以外にして可能で、負の値も指定可能です。
See the Pen
white-space by linlin (@linlin098765)
on CodePen.
<h5>white-space: normal;</h5>
<p class="sample" style="white-space: normal;">
ああああああああああああああ
良い良い良い良い良い良い良い
</p>
<h5>white-space: pre;</h5>
<p class="sample" style="white-space: pre;">
ああああああああああああああ
良い良い良い良い良い良い良い
</p>
<h5>white-space: nowrap;</h5>
<p class="sample" style="white-space: nowrap;">
ああああああああああああああ
良い良い良い良い良い良い良い
</p>
<h5>white-space: pre-wrap;</h5>
<p class="sample" style="white-space: pre-wrap;">
ああああああああああああああ
良い良い良い良い良い良い良い
</p>
<h5>white-space: pre-line;</h5>
<p class="sample" style="white-space: pre-line;">
ああああああああああああああ
良い良い良い良い良い良い良い
</p>p.sample {
width:200px;
background-color:gray;
}CSSのwhite-spaceは、ソース中のスペース・改行の表示方法を指定するプロパティです。
See the Pen
text-transform by linlin (@linlin098765)
on CodePen.
<p class="sample1">There are three apples on the desk.</p>
<p class="sample2">There are three apples on the desk.</p>
<p class="sample3">There are three apples on the desk.</p>
<p class="sample4">There are three apples on the desk.</p>
<p class="sample5">There are three apples on the desk.</p>p.sample1 {text-transform: none;}
p.sample2 {text-transform: capitalize;}
p.sample3 {text-transform: uppercase;}
p.sample4 {text-transform: lowercase;}
p.sample5 {text-transform: full-width;}CSSのtext-transformは、大文字・小文字・全角文字への変換を指定するプロパティです。