Webの森.com - html編文字を書き出そう！

文字

更新日:2011年10月24日

<font>タグからスタイルシートへ

一応過去のタグも知っておこう

<font>タグからスタイルシートへ

今までの文字の出力は<font>タグを利用してきました。ですがどんどん廃れて行くタグになりつつあり、より細かい設定が出来るスタイルシートを使用した文字出力が一般になっております。

今までこのページでは<font>をメインに紹介してきましたが、一新してスタイルシートを使用した内容にしていきます。

一応過去のタグも知っておこう

昔はこういう記述で文字を出力してたと言う意味と、まだこのタグを利用してるサイトもあるので意味を軽く理解する為にも紹介しておきますね

<font size="5">　ここに文字などを入れる　</font>

のようになります。sizeの中の数字は１～７までの数字で大きさを指定することができます。『１』が一番小さく『７』が一番大きく設定できます。

size="1"
size="2"
size="3"
size="4"
size="5"
size="6"
size="7"

以上を見てお分かりになるように、大きさを大雑把にしか設定できないことも分かります。

divとspan

文字の設定の前に知っておいて欲しいタグが２つあります。

まずdivタグとspanタグで囲まれている事が分かります。これらのタグ自体は中の文字に何も影響を与えては居ないのです。

他のタグとは違い何も中の要素には、影響を与えないということを覚えておいて下さい。

２つのタグの違いは、divタグはタグの終わりに改行します。spanタグは改行を行わないということです。

今見ている文章も実はdivとspanを利用して作られています。文章の途中に色が変わっていますよね？途中で色を変えたいときなど、改行したいときにspanで囲って色を変えているのです。

この２つのタグにもスタイルシートを使用することはできるのですが、基本当サイトではこの２つのタグにスタイルシートを使用して紹介していきます。

文字の大きさを変えてみよう

スタイルシートを使用しての文字の大きさを説明していきます。まずはタグを見てみましょう。

<div style="font-size:15px;">　この文字の大きさを変える　</div>

divタグの中に『style="font-size:15px;』という要素があります。まず、

style=""

これがタグに使用するスタイルシートになります。この中に様々な命令を与えてタグの文字の大きさなどを変えて行くわけですね、style=""の中身を見てみましょう。

style="font-size:15px;"

『font-size:15px』これがタグの文字の大きさを変える命令になっています。『15px』は文字の大きさを指定しています。この数字を変えることによって、中の大きさも変わるわけです。『px』は単位になります。他にも『%』なども指定できます。例を出してみますので色々試して見ると良いでしょう。

<div style="font-size:10px;">文字を10pxで表示する</div>

文字を10pxで表示する

<div style="font-size:30px;">文字を30pxで表示する</div>

文字を30pxで表示する

<div style="font-size:100%;">文字を100%で表示する</div>

文字を100%で表示する

<div style="font-size:80%;">文字を80%で表示する</div>

文字を80%で表示する

このように数値と単位を変更するだけ好きなように文字サイズを変えることができます。この後も『style=""』のなかに命令文を入れて文字の装飾を行っていきます。

文字の色を変えてみよう

文字色の指定は、文字コードを指定するか、色そのものを指定する方法があります。基本は文字コードを指定する方をお薦めします。また文字コードは右メニューの色見本にありますので参考にしてください。

<div style="font-size:100%; color:#ff0000;">文字の色を赤に変えます</div>

『#ff0000』の部分を変えれば色が変わります。これを表示させれば、

文字の色を赤に変えます

のように無事に色を付ける事ができました。また色と同時に文字サイズなど複数の指定をすることができます。

文字の太さを変えてみよう

文字を太文字で強調することができます。そのタグ・スタイルシートは主に３種類有り、状況に応じて使い分けるといいでしょう。

<div style="font-size:100%;"><b>bタグで太くする</b></div>

<div style="font-size:100%;"><strong>strongタグで太くする</strong></div>

<div style="font-size:100%; font-weight:bold;">スタイルシートで太くする</div>

この３種類のタグやスタイルシートで出力すると以下のような、どれも同じように太くなります。

スタイルシートで太くする

さて、この３種の使いどころが問題になりますよね？３つも見た目的に同じ効果を持つタグ・スタイルシートなのですから

1.<b>タグは、今後<font>タグと同じように廃れていくタグになるかもしれません

2.<strong>タグは、実は太く見せる目的ではなく検索ロボットにこの文字は重要ですよ！、と強調しているという意味を持っています。ただ使い過ぎてもダメなようなので２～４個くらいにしておきましょう。

3.スタイルシートでの太さ変更が一般的な使い方になっていくと思います。逆に太くしない時などには
『font-weight:normal;』と表示させることで標準の太さにすることができます。

文字に線を引いてみよう

スタイルシートにて、指定していきます。記述方法は『style=""』のなかに指定していくので一覧で紹介してきましょう。

1.抹消線を引く

<div style="font-size:100%; text-decoration:line-through;">文字に抹消線を引く</div>

文字に抹消線を引く

2.文字に下線を引く

<div style="font-size:100%; text-decoration:underline;">文字に下線を引く</div>

文字に下線を引く

3.文字に上線を引く

<div style="font-size:100%; text-decoration:overline;">文字に上線を引く</div>

文字に上線を引く

4.文字を点滅させる

<div style="font-size:100%; text-decoration:blink;">文字を点滅させる</div>

文字を点滅させる

5.リンクなどにある下線を消す

<div style="font-size:100%;"><a href="#" style="text-decoration:none;">リンクなどにある下線を消す</a></div>

リンクなどにある下線を消す

以上ずらっと並べて見ましたが、注目する点は<a>タグにスタイルシートを使用してる点です。今まで<div>や<span>に使ってきましたが他のタグにも使用できるという事を覚えておいて下さい。

文字の横位置を変えてみよう

文字の位置については、『左(left)』『真ん中(center)』『右(right)』で設定することができます。デフォルトの設定は左寄せになっているので基本は左に設定する必要なないですね

1.文字を左に寄せる

<div style="font-size:100%; text-align:left;">文字を左に寄せる</div>

文字を左に寄せる

2.文字を中央に寄せる

<div style="font-size:100%; text-align:center;">文字を中央に寄せる</div>

文字を中央に寄せる

3.文字を右に寄せる

<div style="font-size:100%; text-align:right;">文字を右に寄せる</div>

文字を右に寄せる

行の高さを変えてみよう

文章中の行の高さを自由に指定できます。

これを指定するとこのように今の文章の高さが変わっていることが分かります。line-height:300%;の300%と分かり易く大きな値にしていますので適度な数値に指定してください。

文字間の間隔を変えてみよう

文字間の間隔を自由に指定できます。

今の文章に文字間5pxを指定して表示しています。どうでしょう？これも適度な数値に変えて調整をおこなって下さい

まとめ

以上が文字の設定で個人的に良く使うものを紹介してみました。スタイルシートの文字設定はまだまだ沢山あります。正直それらを全て覚えることはとても大変なので徐々に覚えていくと良いと思います。

また今回は、スタイルシートに文字サイズとそれぞれの設定を入れて紹介してきましたが、style=""のなかに紹介した要素を指定してあげることもできますので、色々チャレンジしてみて下さい。

<div style="font-size:150%; font-weight:bold; text-align:center; letter-spacing:5px; color:#ee00ff;">文字作成編おつかれさまでした</div>

文字作成編おつかれさまでした

お願い

もしページの内容がお役に立てたら、ポチっと押して貰えると幸いです。

NINJA_STYLE_MAILFORMアフィリエイト

リンク

Web作成関連紹介