Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSS
入門編

トップページ
CSS入門編 - 文字を大きくしたり装飾を加えてみよう

文字を大きくしたり装飾を加えてみよう

どうもみなさまこんにちわ。

今回の記事では文字の装飾について勉強してきましょう。というわけで以下のHTMLファイルを用意してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 練習中！</title>
<style>

</style>
</head>
<body>

<p id="font_32px">文字サイズを32pxにするよ</p>
<p id="font_w">文字を太字にするよ</p>
<p id="font_uline">文字に下線を入れるよ</p>
<p id="font_tline">文字に打ち消し線を入れるよ</p>
<p id="font_oline">文字に上線を入れるよ</p>

</body>
</html>

今度は各pタグにid属性を振ってみました。これを使って色々装飾を加えていきましょう。

まずはidセレクタ『font_32px』の文字サイズを変更してみましょう。使うプロパティは『font-size』です。これまでも何度か出てきましたね。

『font-size』に指定する値についてですが、単位と共に数値で指定する方法とキーワードで指定する方法の2種類があります。数値と一緒に指定する単位で一般的なのは『px』で、最近のCSS3で実装された『rem』という単位も主流になりつつあります。今回は一般的な『px』で指定してみたいと思います。

今回は『32px』に指定しますのでそのまま値に『32px』と記述すればOKです。

idセレクタとセットで記述すると以下のような形になりますね。

#font_32px {
    font-size: 32px;
}

『px』とはディスプレイのドットの数を表現する単位となります。よく家電製品などで謳い文句になっているフルHD画質とは1920×1080ピクセルの事を指します。つまり横に1920個、縦に1080個の色の変わる超小さい電球のようなものが寄せ集まって作られたディスプレイということになります。

CSSで使用する場合の作業の流れは実際にpxで記述しブラウザで確認しつつちょっとずつ数値を調整し、理想となる大きさになればOKというような感じです。一般的なウェブサイトの標準文字サイズは15px前後に設定されていることが多いです。

『rem』とは相対的な文字サイズの指定方法です。キーワードで指定する場合は『xx-small』、『x-small』、『small』、『medium』、『large』、『x-large』、『xx-large』の7つで指定できます。キーワードはあまり使われませんが『rem』は今後主流になる可能性が高いので一度確認してみると良いかもしれません。

では文字を太字にしてみましょう。文字を太字にするプロパティは『font-weight』です。値は『bold』という単語を指定するか、それか100、200、300、400、500、600、700、800、900の数値で指定することも可能です。

数値で指定する場合は表示しているフォントに対応する太さが用意されている場合のみ反映されますが、ここまで細かい太さが用意されているフォントはほぼ存在しませんので『bold』という値を記述するのが一般的です。『bold』と指定した場合でも表示しているフォントに太字が用意されていない場合は反映されませんが、一般的に使われているフォントは太字フォントもちゃんと用意されていますのでご安心ください。

ではCSSを記述してみましょう。このような形ですね。

#font_w {
    font-weight: bold;
}

今現在コンピューターで使われているフォントは様々な種類があります。昨今のWindowsOSで組み込まれているデフォルトの日本語フォントは『メイリオ』、MacOSは『ヒラギノ角ゴ ProN』となっています。

CSSでは『font-family』プロパティでフォントの指定ができますが、閲覧している人のPCに指定されたフォントがインストールされていなければデフォルトのフォントで表示されます。なので珍しいフォントで文字を記述したい場合は画像にしてしまうのが一般的です。

昨今では『Webフォント』という機能が追加されましたのでオリジナルフォントなどを使ってウェブサイトのデザインをすることができるようになりました。しかし日本語は英語と比べて文字数そのものが桁違いに多く、通信の負担になってしまうためWebフォントを実装している日本のウェブサイトは少なめです。

続いて下線などの装飾を加えてみましょう。下線、打ち消し線、上線はすべて『text-decoration』プロパティで実装可能です。

下線を付けたい場合は『underline』
打ち消し線を付けたい場合は『line-through』
上線を付けたい場合は『overline』
と値に記述します。

では早速書いてみましょう。以下のような感じになりますね。

#font_uline {
    text-decoration: underline;
}
#font_tline{
    text-decoration: line-through;
}
#font_oline{
    text-decoration: overline;
}

では先程の記述とセットでHTMLファイルに組み込みしてみましょう。今回もstyle要素で記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 練習中！</title>
<style>
#font_32px {
    font-size: 32px;
}
#font_w {
    font-weight: bold;
}
#font_uline {
    text-decoration: underline;
}
#font_tline {
    text-decoration: line-through;
}
#font_oline {
    text-decoration: overline;
}
</style>
</head>
<body>

<p id="font_32px">文字サイズを32pxにするよ</p>
<p id="font_w">文字を太字にするよ</p>
<p id="font_uline">文字に下線を入れるよ</p>
<p id="font_tline">文字に打ち消し線を入れるよ</p>
<p id="font_oline">文字に上線を入れるよ</p>

</body>
</html>

サンプルをみてみる。

記述が終わったら保存してブラウザで確認してみましょう。ちゃんと反映されましたでしょうか？

続いての記事では文字の位置を調整してみます。引き続き頑張っていきましょうね。

ではー。

この記事は桜舞が執筆致しました。