Font

ここでは文字装飾についてご説明します!

ここらへんのタグを理解されれば、見出し設定などなどを自身で色々といじくれるようになるはずです。
タグ覚えたりするのめんどくさいかと思いますが、最低限のタグだけ理解されればサイト制作も楽しくなるかと思います。

Lecture

今回は、見出しの <h6> 使って説明していきます。
基本的にテンプレートで <h6> まで設定していることないですしね。(一部、設定しているのもあるかもしれませんが……)


h6-Sample-
h6{

}

現在、何も設定していないので、上のような寂しくて何も面白みのない文字ですね。
ではでは、ここから色々とタグをつけたして素敵なデザインにしていきましょう!

文字の大きさ

font-size:文字の大きさ;

文字の大きさは上のように設定します。
数字だけ書くのもありですし、単位は%、px、pt などなど自分の好みのものを使ってください。
(単位にはそれぞれ違いがありますが、説明めんどくさいので省略!自分で調べましょう)


h6-Sample-
h6{
font-size:17px;
}

pxで指定してみました。

文字色

color:文字の色;

これは文字色です。
文字色もカラーコード使用する方法もあれば、色名そのまま指定してもOK。


h6-Sample-
h6{
font-size:17px;
color:#66aacc;
}

文字の種類

font-family:文字の種類;

次は文字の種類です。
文字の種類の設定は難しいんですよね…。


h6-Sample-
h6{
font-size:17px;
color:#66aacc;
font-family:Georgia,Verdana,Osaka,'MS P Gothic';
}


左にあるほど優先度が高くなるので、Georgia > Verdana > Osaka > MS P Gothic の優先度となります。
もし、パソコン内に Georgia がなければ Verdana 、それもなければ Osaka …という風になりますので。

パソコンによって入っているフォントの種類が違ったりします。
自身のパソコンでは可愛い文字で表示されても、閲覧者さんのパソコンにその文字が入っていないと、まともに表示されなかったりするのでお気を付けを!

文字の太さ

font-weight:bold;    文字を太くする
font-weight:normal;  文字を細くする

となります。
基本的に見出しは元から太字設定です。それ以外は、反対に基本的に細くなるよう設定されています。


h6-Sample-
h6{
font-size:17px;
color:#66aacc;
font-family:Georgia,Verdana,Osaka,'MS P Gothic';
font-weight:normal;
}

細字に設定してみました。

文字の位置

text-align:left;      左寄せ
text-align:center;    中央
text-align:right;     右寄せ

基本的には文字は左から始まりますよね?ですから元から左寄せになってることになります。



h6-Sample-
h6{
font-size:17px;
color:#66aacc;
font-family:Georgia,Verdana,Osaka,'MS P Gothic';
font-weight:normal;
text-align:center;
}

今回は中央設定にしてみました。



h6-Sample-
ちなみに、右寄せはこうなります。
ディスプレイサイズ大きい方だと右に寄ってて「わかりづらい!」なんてことになるかも。

文字のライン

text-decoration:underline;     下線
text-decoration:overline;      上線
text-decoration:line-through;   打ち消し線

下線サンプル  上線サンプル  打ち消し線サンプル

一応、ラインのサンプルは上の通りになります。



h6-Sample-
h6{
font-size:17px;
color:#66aacc;
font-family:Georgia,Verdana,Osaka,'MS P Gothic';
font-weight:normal;
text-align:center;
text-decoration:underline;
}

今回は、下線を付けたしてみました。

文字間隔

letter-spacing:文字間隔;

文字間隔は、一文字一文字の余白についての設定です。
説明だけだとわかりづらいですが、見てもらえるとすぐにわかると思います。



h6-Sample-
h6{
font-size:17px;
color:#66aacc;
font-family:Georgia,Verdana,Osaka,'MS P Gothic';
font-weight:normal;
text-align:center;
text-decoration:underline;
letter-spacing:15px;
}


…わかりやすいように数字大きくしたら微妙なデザインになりましたが、これがletter-spacingです。
使いこなせば可愛いデザインを作ることも可能になります。

Last...

最低限の私がよく使う設定だけ説明しています。
今回の文字装飾説明に+ボーダー設定、margin・padding を設定することで、さらにデザインの幅が広がると思います。

ご自身で色々と試してみてくださいね!