【CSS】色々な文字修飾の仕方｜HTML＆CSS入門講座（10）

<h1>文字のサイズ、色、太字、斜体の例</h1>
<p class="car1">文字のサイズが20pxだよ”</p>
<p class="car2">文字のサイズが普通サイズの1.5倍(1.5em)だよ！”</p>
<p class="iro1">文字色(red)を赤にしたよ”</p>
<p class="iro2">文字色のカラーコード(rgb(13, 176, 240)を赤にしたよ”</p>
<p class="bol1">文字を太字にしたよ！（bold）”</p>
<p class="ita1">文字を斜体(italic)にしたよ！”</p>

.car1 {
font-size: 20px;
}
.car2 {
font-size: 1.5em;
}
.iro1 {
color: red;
}
.iro2 {
color: rgb(13, 240, 240);
}
.bol1 {
font-weight: bold;
}
.ita1 {
font-style: italic;
} }

<h1>行間指定、字間指定、文字の下線を引く、取り消し線を引く例</h1>
<p id="gyoukan">行間を2.0倍にしたよ！”</p>
<p id="jikan">字間(1.5em)にしたよ！”</p>
<p id="sitasen">下線を引いたよ！”</p>
<p id="torikesi">取り消し線を引いたよ！”</p>

#gyoukan {
line-height: 1.5;
}
#jikan {
letter-spacing: 0.5em;
}
#sitasen {
text-decoration: underline;
}
#torikesi {
text-decoration: line-through;
}

<h1>文字の位置変更の例</h1>
<h3 class="mojihidari">文字を左寄せにしたよ！（初期値）</h3>
<h3 class="mojicyuou">文字を中央寄せにしたよ！</h3>
<h3 class="mojimigi">文字を右寄せにしたよ！</h3>

.mojihidari {  
}
.mojicyuou {
    text-align: center;
}
.mojimigi {
    text-align: right;
}

<h1>フォントファミリーの例</h1>
<div class="gotic">
<p>文字のサイズ、色、太字、斜体、行間指定、字間指定、文字</p>
<p>ABCDEFGHIJKLMN abcghijklmn</p>
</div>
<div class="mincho">
<p>文字のサイズ、色、太字、斜体、行間指定、字間指定、文字</p>
<p>ABCDEFGHIJKLMN abcghijklmn</p>
</div>

.gotic {
font-family: Verdana, 'Yu Gothic',sans-serif;
font-size: 30px;
}
.mincho {
font-family:'Times New', 'MS Mincho',serif;
font-size: 30px;
}

<h1>縦書きの例</h1>
<div id="tategaki">
<p>
これは、文字修飾ではないですが、段落の最初の文字の字下げの方法をどのようにすればよいか？と言う話です。
　WordPressでは、段落の最初に1文字分のスペース（字下げ）ができないのです。
　私は、古い人間ですので段落で字下げがないことが現在では普通のようですが、私はは気になってしょうがないんです。
　したがって、私は文書を書くときにできる限り段落後に閉じ下げをするようにして記事を書いています。
　その方法は、いたって簡単で、一文字分のスペースをイタリックで指定してやり、その後に普通の文書を書けばよいのです。
</p>
</div>

#tategaki {
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
height: 150px;
}

<h1>文字の影の例</h1>
<div class="mojikage1">
文字の影（Character shadow）
</div>
<div class="mojikage2">
文字の影（Character shadow）
</div>
<div class="mojikage3">
文字の影（Character shadow）
</div>

.mojikage1 {
  font-size: 4em;
  text-align: center;
  line-height: 2em;
  font-weight: bold;
  color: hsl(0, 93%, 49%);
  text-shadow: 
    0 0.07em 0.1em rgba(0,0,0,0.7);
}
.mojikage2 {
  font-size:4em;
  text-align:center;
  line-height:2em;
  font-weight:bold;
  color: #A5D6A7;
  text-shadow:
    1px -1px 1px #BDBDBD,
    -1px 2px 1px #737272,
    -2px 4px 1px #767474,
    -3px 6px 1px #787777,
    -4px 8px 1px #424242,
    -5px 10px 1px #616161,
    -6px 12px 1px #757575,
    -7px 14px 1px #9E9E9E,
    -8px 16px 1px #BDBDBD,
    -9px 18px 1px #E0E0E0;
}
.mojikage3 {
  font-size:4em;
  text-align:center;
  line-height:2em;
  font-weight:bold;
  color: #000;
  text-shadow: 
    0 0 0.05em #75736b,
    0 0 0.06em #75736b,
    0 0 0.07em #75736b,
    0 0 0.08em #75736b,
    0 0 0.09em #75736b,
    0 0 0.20em #75736b,
    0 0 0.20em #75736b,
    0 0 0.20em #75736b,
    0 0 0.50em #75736b;
}