##1. はじめに
本記事では、CSSの
利用頻度の高いテキストスタイル設定」
について記載する。
なお、以下例題に対し、HTMLファイルは共通して以下を使用する。
【サンプル】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>初めてのCSS</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>テキストのスタイル</h1>
<p>
残暑きびしい日々が続いておりますが、いかがお過ごしでしょうか。<br />体調に気を配り、お過ごしください。
</p>
</body>
</html>
【表示例】
##2. color
:::note info
・文字色を指定する際に使用する。
・#000000などの記述やカラーネームで色指定する。
:::
:::note warn
背景色を指定する際はbackground-colorなので、colorと混同しないこと。
:::
【サンプル】
h1 {
color: blue;
}
p {
color: #6495e6;
}
【表示例】
##3. font-size
フォントのサイズを指定する際に使用する。
###使用凡例
:::note info
数値で指定
・数値にpxやemやexなどの単位をつけて指定する。
・pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化する。
・emとはフォントの高さを1とする単位。
・exとは小文字の｢x｣の高さを1とする単位。
・数値には負の値は指定できません。
％で指定
％値で指定する。
キーワードで指定
・xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があり、mediumが標準サイズ。
・1段階上がると1.2倍のサイズになる。
・smaller、largerを指定すると大きさが1段階上下する。
:::
【サンプル】
h1 {
font-size: 64px;
}
p {
font-size: 20px;
}
【表示例】
<サイズ変更前>
<サイズ変更後>
##4. font-weight
フォントの太さを指定する際に使用する。
###使用凡例
:::note info
数値で指定
・100、200、300、400、500、600、700、800、900でフォントの太さを指定する。
・太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがある。
・標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなる。
キーワードで指定
normal …… 標準の太さ。（数値で400を指定した場合と同じ）
bold …… 一般的な太字の太さ。（数値で700を指定した場合と同じ）
lighter …… 相対的に一段階細くする。
bolder …… 相対的に一段階太くする。
:::
【サンプル】
p {
font-weight: bold;
}
【表示例】
<変更前>
<変更後>
##5. text-align
ブロックコンテナ内の行の揃え位置・均等割付を指定する際に使用する。
【サンプル】
h1 {
text-align: right;
}
p {
text-align: left;
}
【表示例】
<変更前>
<変更後>
中央揃えにしたい際は、text-align: center;とする。
##6. text-decoration
テキスト傍線のつけ方・色・スタイルをまとめて指定する際に使用する。
###使用凡例
####text-decoration-line
テキストに傍線をつける際に使用する。
none
何もしない。テキストへの傍線について生成も禁止もしない（初期値）
underline
行に下線を引く。
overline
行に上線を引く。
line-through
行の中央を通る線を引く。
blink
テキストが点滅する。
#####text-decoration-lineのサンプル
※noneは初期値なので省略。また、Chromeではblinkはサポートされていないようなので未記載
【underline】
h1 {
text-decoration-line: underline;
}
【表示例】
【overline】
h1 {
text-decoration-line: overline;
}
【表示例】
【line-through】
h1 {
text-decoration-line: line-through;
}
【表示例】
####text-decoration-style
text-decoration-lineプロパティでテキストにつけた傍線のスタイルを指定する際に使用する。
solid:実線（初期値）
double:二重線
dotted:点線
dashed:破線
wavy:波線
#####text-decoration-lineのサンプル
※今回は”text-decoration-lineプロパティ”はunderlineで記載
【solid】
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
【表示例】
【double】
h1 {
text-decoration-line: underline;
text-decoration-style: double;
}
【表示例】
【dotted】
h1 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
【表示例】
【dashed】
h1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
【表示例】
【wavy】
h1 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
【表示例】
####text-decoration-color
text-decoration-lineプロパティでテキストにつけた傍線の色を指定する際に使用する。
#000000（完全な黒）～#ffffff（完全な白）、 カラーネーム、 RGB などで色を指定。
【カラーネーム】
h1 {
text-decoration-line: underline;
text-decoration-color: red;
}
【表示例】
【RGB】
h1 {
text-decoration-line: underline;
text-decoration-color: #649564;
}
【表示例】
##7. おわりに
本項を以て、HTML・CSSの基本的な概要を完了とする。
これまで記載したことを基に、実際にホームページのトップを作成する。