テキスト

さまざまな機能を使用して、Webページ上のテキストのサイズと形状を変更できます。

font-family

Times New Roman、Arial、Verdanaなどのフォントの種類があります

フォントの種類はカンマで区切り複数の候補を並べることができます。複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。

例えばStyle.cssをこんな感じにしてみましょう

p.sampleA {
        font-family: "ＭＳ ゴシック",sans-serif;
}
p.sampleB {
        font-family: "ＭＳ 明朝",serif; 
}
p.sampleC {
        font-family: Impact,Charcoal; 
}

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sampleA">ＭＳ ゴシックを指定。</p>
<p class="sampleB">ＭＳ 明朝を指定。</p>
<p class="sampleC">abcdefgABCDEFG0123456789</p>
</body>
</html>

できましたかね。それぞれ字体が変わったはず！これが実益です！

例えばそれぞれのsampleAなどを変えてみても面白いですよ！

Text-decoretion

text-decoration: underline アンダーラインを引きます
text-decoration: overline オーバーラインを引きます。
text-decoration: line-through テキストに打ち消し線が付きます

などがあります。こんなことができるということですね。

underline: 下線が付きます。

underline solid: 実線で下線が付きます。

underline solid red: 実線で赤の下線が付きます。

underline solid green: 実線で緑の下線が付きます。

underline solid blue: 実線で青の下線が付きます。

underline double: ２重線の下線が付きます。

underline dotted: 点線の下線が付きます。

underline dashed: 破線の下線が付きます。

underline wavy: 波線の下線が付きます。

overline: 上線が付きます。

line-through: 打ち消し線が付きます。

blink: Firefox・Opera の以前のバージョンでは点滅します。

<style type="text/css">
   p.part1 { text-decoration: none; }
   p.part2 { text-decoration: underline; }
   p.part3 { text-decoration: underline solid; }
   p.part4 { text-decoration: underline solid red; }
   p.part5 { text-decoration: underline solid green; }
   p.part6 { text-decoration: underline solid blue; }
   p.part7 { text-decoration: underline double; }
   p.part8 { text-decoration: underline dotted; }
   p.part9 { text-decoration: underline dashed; }
   p.part10 { text-decoration: underline wavy; }
   p.part11 { text-decoration: overline; }
   p.part12 { text-decoration: line-through; }
   p.part13 { text-decoration: blink; }
   p.part14 { text-decoration: underline overline line-through; }
</style>

 <p class="part1"><b>none:</b> 線は付かず，点滅もしません。　初期値。</p>
 <p class="part2"><b>underline:</b> 下線が付きます。</p>
 <p class="part3"><b>underline solid:</b> 実線で下線が付きます。</p>
 <p class="part4"><b>underline solid red:</b> 実線で赤の下線が付きます。</p>
 <p class="part5"><b>underline solid green:</b> 実線で緑の下線が付きます。</p>
 <p class="part6"><b>underline solid blue:</b> 実線で青の下線が付きます。</p>
 <p class="part7"><b>underline double:</b> ２重線の下線が付きます。</p>
 <p class="part8"><b>underline dotted:</b> 点線の下線が付きます。</p>
 <p class="part9"><b>underline dashed:</b> 破線の下線が付きます。</p>
 <p class="part10"><b>underline wavy:</b> 波線の下線が付きます。</p>
 <p class="part11"><b>overline:</b> 上線が付きます。</p>
 <p class="part12"><b>line-through:</b> 打ち消し線が付きます。</p>
 <p class="part13"><b>blink:</b> Firefox・Opera の以前のバージョンでは点滅します。</p>
 <p class="part14"><b>underline overline line-throughk:</b>

これで実際に貼り付けて実行してみてください。わかるはずです。

text-transform

text-transform: capitalize すべての単語の最初の文字を大文字に変換します。
text-transform: uppercase すべてを大文字に変換します。
text-transform: lowercase すべてを小文字に変換します。

また次の章で詳しく説明します。

letter-spacing

line-heightプロパティは、フォントのサイズを調整することなく、行の高さを設定します。

text-alignプロパティは、要素内のテキストを左、右、中央、に揃えます。

p {
    letter-spacing: 0.5em;
    word-spacing: 2em;
    line-height: 1.5;
    text-align: center;
}

これでこの章は終わりです！次も頑張りましょう！

前のページ③CSSの基礎～色

次のページ⑤CSSの基礎～マージンとパディング

プログラミングは独学からは挫折の可能性が高いです。まずは無料体験ができる
コードキャンプが本当におすすめ。無料体験でわからないところを聞きましょう。
転職補助つき。カリキュラム終了後に転職紹介をしてくれます。

④CSSの基礎〜テキスト

スポンサーリンク