スポンサーリンク
本当にわからないとこがあった場合一人では解決できません。『teratail』とはエンジニア特化型のQ&Aサイトです。 すべてのエンジニアさんが抱えている悩みを共有して 解決するための質問サイトです

テキスト
さまざまな機能を使用して、Webページ上のテキストのサイズと形状を変更できます。
font-family
Times New Roman、Arial、Verdanaなどのフォントの種類があります
フォントの種類はカンマで区切り複数の候補を並べることができます。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。
例えばStyle.cssをこんな感じにしてみましょう
p.sampleA { font-family: "MS ゴシック",sans-serif; } p.sampleB { font-family: "MS 明朝",serif; } p.sampleC { font-family: Impact,Charcoal; }
<html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sampleA">MS ゴシックを指定。</p> <p class="sampleB">MS 明朝を指定。</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: 2重線の下線が付きます。
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> 2重線の下線が付きます。</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;
}
これでこの章は終わりです!次も頑張りましょう!