テキスト
3-1 文字の色
| colorは色を指定する属性です。この属性を使って文字に色をつけましょう。 |
| サンプル 1 |  |
ソースコード 1 | |
白地に見やすい色にします
|
.css3-1-1 {
color: #689852; } <span class="css3-1-1">白地に見やすい色にします</span> |
||
| サンプル 2 | ソースコード 2 | ||
リンクの色に使っていない色がいいでしょう
|
.css3-1-2 {
color: #FF9900; } <span class="css3-1-2">リンクの色に使っていない色がいいでしょう</span> |
 スタイル定義  適用 |
3-2 文字の太さ
| font-weightは太さを指定する属性です。この属性を使って文字を太くしましょう。値には数値を入れる方法と相対的に指定する方法があります。 |
| bold ・・・ （太字にします） normal ・・・デフォルト |
|
| 相対的に指定 | bolder ・・・ 太めの文字 lighter ・・・ 細めの文字 |
| 数値で指定 | ”400”を標準にした9段階 （細）100 200 300 400 500 600 700 800 900（太） しかし、ずべてのフォントに9段階のサイズがあるわけではないので、反映されないこともある |
| サンプル 1 | |
ソースコード 1 |
|
太字は細かい指定をしてもなかなか |
.css3-2-1 {
font-weight: bold; } <span class="css3-2-1">太字は細かい指定をしてもなかなか</span> |
|
| サンプル 2 | ソースコード 2 | |
| わかりにくいので、そんなに |
.css3-2-2 {
font-weight: bolder; } <span class="css3-2-3">細かい指定じゃなくていいでしょう</span> |
|
| サンプル 3 | ソースコード 3 | |
| 細かい指定じゃなくていいでしょう |
.css3-2-3 {
font-weight: lighter; } <span class="css3-2-2">わかりにくいので、そんなに</span> |
|
| サンプル 4 | ソースコード 4 | |
| ユーザーがどのような環境であるかによって |
.css3-2-4 {
font-weight: 200; } <span class="css3-2-4"> ユーザーがどのような環境であるかによって</span> |
|
| サンプル 5 | ソースコード 5 | |
| 見え方は違います。 |
.css3-2-5 {
font-weight: 900; } <span class="css3-2-5">見え方は違います。</span> |
| スタイル定義 適用 |
|
|
一般的に使われるのは、boldまでです。上記の定義で示したように、細かく定義してもあまり差は出ません。
3-3 文字の大きさ
| font-sizeは太さを指定する属性 ブラウザなどの環境に左右されやすいので注意が必要ですが、 ％指定するようにしましょう。 |
| 数値で固定 | px、ｐｔなどで固定する方法 |
| ユーザー環境で変化 | %指定 |
| キーワードで相対的に （小）xx-small、x-small、small、medium、large、x-large、xx-large（大） |
| サンプル 1 | |
ソースコード 1 |
| 文字の大きさはデザインにも |
デフォルト
文字の大きさはデザインにも |
|
| サンプル 2 | ソースコード 2 | |
| 文字の大きさはデザインにも |
.css3-3-1 {
font-weight: bold; } <span class="css3-3-1">文字の大きさはデザインにも</span> |
|
| サンプル 3 | ソースコード 3 | |
| 大きくかかわってきますが 、 |
.css3-3-2{
font-size: 14px; } <span class="css3-3-2">大きくかかわってきますが、</span> |
|
| サンプル 4 | ソースコード 4 | |
| ユーザー環境によって |
.css3-3-3{
font-size: 18px; } <span class="css3-3-3">ユーザー環境によって</span> |
|
| サンプル 5 | ソースコード 5 | |
| 見えにくい文字や |
.css3-3-4{
font-size: x-large; } <span class="css3-3-4">見えにくい文字や</span> |
|
| サンプル 6 | ソースコード 6 | |
| デザインの崩れがでるのも想定した |
.css3-3-5{
font-size: smaller; } <span class="css3-3-5">デザインの崩れがでるのも想定した</span> |
|
| サンプル 7 | ソースコード 7 | |
| デザインが要求されますね |
.css3-3-6{
font-size: larger; } <span class="css3-3-6">デザインが要求されますね</span> |
| スタイル定義 適用 |
|
|
フォントサイズはきちんと入力したほうがベターです。
3-4 文字の表示位置
| text-alignは表示位置を指定する属性です。 単独ではまだまだHTMｌのａｌｉgn属性のほうが簡単ですが、
表などの文字には指定しておくと便利です。 左寄せ・・・left 中央ぞろえ・・・center 右寄せ・・・right |
| サンプル 1 | |
ソースコード 1 |
|
左寄せ（デフォルト） |
.css3-4-1 {
text-align: left; } <div class="css3-4-1">左寄せ（デフォルト）</div> |
|
| サンプル 2 | ソースコード 2 | |
中央ぞろえ |
.css3-4-2 {
text-align: center; } <div class="css3-4-2">中央ぞろえ</div> |
|
| サンプル 3 | ソースコード 3 | |
右寄せ |
.css3-4-3 {
text-align: right; } <div class="css3-4-3">右寄せ</div> |
| スタイル定義 適用 |
|
|
定義しても右に文字がどうしてもよってくれない・・。 いらいらしながらもよく見てみると定義はleft。 ノバに通おうかな・・。
3-5 文字間隔
| letter-spacingは文字と文字の間隔を指定します。デフォルトだと、文字と文字の間が狭く、読みにくく感じることがあります。letter-spacingを定義することで、文字を読みやすくしましょう。 |
| px | 3px、6pxなど、数値で指定 |
| em | 文字の幅"１"に対して 0.5emなら0.5倍、1.5emなら1.5倍 |
| サンプル 1 | |
ソースコード 1 |
| 文字間隔は読みやすいか（デフォルト） |
|
|
| サンプル 2 | ソースコード 2 | |
| 文字間隔は読みやすいか（3px） |
.css3-5-1 {
letter-spacing: 3px; } <span class="css3-5-1">文字間隔は読みやすいか（3px）</span> |
|
| サンプル 3 | ソースコード 3 | |
| 文字間隔は読みやすいか（15px） |
.css3-5-2 {
letter-spacing: 15px; } <span class="css3-5-2">文字間隔は読みやすいか（15px）</span> |
|
| サンプル 4 | ソースコード 4 | |
| 文字間隔は読みやすいか（0.5em） |
.css3-5-3 {
letter-spacing: 0.5em; } <span class="css3-5-3">文字間隔は読みやすいか（0.5em）</span> |
| スタイル定義 適用 |
|
|
文字間隔をきちんと指定することによって、エンドユーザーが文字を読みやすくなります。
3-6 行間隔
| line-heightは（文字の高さ＋行間の高さ）を指定する定義方法です。 pxで固定してしまうと文字サイズが大きくなった時に行間はせまくなってしまい、文字が読みにくくなってしまいます。line-heightを定義することで行間を広げ、文字を読みやすくしましょう。 |
| ％指定 | 文字の高さ"100%"に対して125% 150%など |
| em | 文字の高さ"１"に対して 2emなら2倍、1.5emなら1.5倍 |
| サンプル | |
ソースコード | |||
|
.css3-6-1 {
line-height: 1.25em; } .css3-6-2 { line-height: 1.5em; } <table border="1" cellspacing="0" cellpadding="0"> <tr> <td valign="top">（デフォルト）...</td> <td valign="top"> <span class="css3-6-1">（1.25em）.......</span></td> <td valign="top" class="css3-6-2">（1.5em）......</td> </tr> </table> |
| スタイル定義 適用 |
3-7 インデントする
| text-indentは１文字目を下げる指定です。 文字の幅＝1em。 |
| サンプル | |
ソースコード |
|
最初の１文字分だけさげるのは文章の方法として普通なのですが、HTMLではなかなかぴったりとした幅がさげられなくて苦労していました。この指定があれば、指定したテキストに自動的に適用されます。 |
.css3-7-1 {
text-indent: 1em; } <div class="css3-7-1">最初の１文字分だけさげるのは文章の方法として普通なのですが、HTMLではなかなかぴったりとした幅がさげられなくて苦労していました。この指定があれば、指定したテキストに自動的に適用されます。</div> |
| スタイル定義 適用 |
3-8 リスト
| list-style-typeはリストの「・」マークを指定する定義です。 none なし disc 黒丸（<ul>デフォルト） circle 白丸 square 四角 decimal 数字（<ol>デフォルト） upper-alpha 大文字アルファベット lower-alpha 小文字アルファベット |
| サンプル 1 | |
ソースコード 1 |
|
.css3-8-1{
list-style-type: square; } <ul class="css3-8-1"> <li>いぬ</li> <li>さる</li> <li>きじ</li> </ul> |
|
| サンプル 2 | ソースコード 2 | |
|
.css3-8-2 {
list-style-type: lower-alpha; } <ol class="css3-8-2"> <li>いぬ</li> <li>さる</li> <li>きじ</li> </ol> |
| スタイル定義 適用 |
3-9 アイコンでリストに
| list-style-imageは独自の画像を使用してアイコンを表示できます。 |
| サンプル 1 | |
ソースコード 1 |
|
.css-3-9-1 {
list-style-image:url (../reference/images/ css_3/listmark.gif); } <ul class="css-3-9-1"> <li>いぬ</li> <li>さる</li> <li>きじ</li> </ul> |
|
| サンプル 2 | ソースコード 2 | |
|
.css3-9-2{
list-style-type: none; margin: 0; padding: 0; } .css3-9-3 { background: url (../reference/images/ css_3/listmark2.gif) no-repeat; padding-left: 24px; } <ul class="css3-9-2"> <li class="css3-9-3">ul 要素に list-style-type: none; を指定<br> しないとデフォルトのマークが出る</li> <li class="css3-9-3">li 要素に padding-left を指定<br> マーク分の余白を創るため文字をインデントさせておく<br> </li> </ul> |
| スタイル定義 適用 |
|
|
画像の大きさによって文字とのバランスをとるのがちょっと大変。