🌹レッスン10🌹
CSSでよく使用する文字装飾の方法
1.文字を太くする
文字の太さを指定するには、font-weightプロパティを使用します。
値には、
数値の場合(400を標準として、100~900の間で指定します。)
- normalの場合(通常の太さ数値400と同じ)
- boldの場合 (太くする数値700と同じ)
- bolderの場合(一回りより太くする)
- lighterの場合(一回り細くする)
と、ありますが実際にはすべてのブラウザが100~900の太さを解釈できるわけではないので、私の場合は、太くしたい時だけ
font-weight:bold; と指定しています。
例えば、
【CSS】
h2{
font-weight: bold;
}
2.文字を斜体にする
文字を斜体にするには、font-styleプロパティを使用します。
値には、
- italic(文字を斜体にする)
- oblique(文字を斜体にする)
- nomal(文字を通常の状態にする)
例えば、
【CSS】
h2{
font-style: italic;
}
3.取り消し線、下線、上線
取り消し線、下線、上線などの指定は、text-decorationプロパティを使用します。
値には、
- line-through(取り消し線を付ける)変更になって修正する場合などによく使われます。
- underline(下線を付ける)下線はリンクと間違われることがあるので、私は使用していません。
- overline(上線を付ける)上線はどんな場合に使うのかわかりません。
例えば、
【HTML】
<html>
<body>
<p id="text1">3-1.取り消し線abc</p>
<p id="text2">3-2.下線abc</p>
<p id="text3">3-3.上線abc</p>
</body>
</html>
【CSS】
p#text1{
text-decoration: line-through;
}
p#text2{
text-decoration: underline;
}
p#text3{
text-decoration: overline;
}
4.文字を点滅させる
blink(点滅させる インターネットエクスプローラーは非対応)
【HTML】
<body>
<p id="text4">文字を点滅。</p>
</body>
【CSS】
p#text4{
text-decoration: blink;
}
(残念ながら私の使用しているブラウザは非対応のようです。)
5.リンクの下線表示を消す
none(通常で表示または、リンク部分の下線を消す)
”xxx”の部分にリンク先の情報を入力します。
例えばこのページでいうと、目次にはついているが、メニュー項目にはついていません。
【HTML】
<body>
<a href="xxx">リンク部分の下線を消します</a>
</body>
【CSS】
a{
text-decoration: none;
}
6.1部分の文字を指定する
<span>xxxx</span>で囲み、テキストの1部分だけ指定することが出来ます。
【HTML】
<body>
<p>イチゴは<span id="red" >赤い</span></p>
</body>
【CSS】
span#red{
color: red;
}
データを保存し、ブラウザで確認してみましょう!
上記の画像のようになったかな?
★まとめ
私個人的には、3と4以外はよく使用します。
いかがでしたか?CSSで文字を装飾すると文章が読みやすくなったり、見栄えが良くなったりしますよね~
次回レッスン11は、「行揃えと背景色を指定する方法」をアップロードする予定です!
See you again Take care
(^.^/)))~~~bye!!
TOP