本記事は筆者の独学のメモ書きのようなものなので、
読者の皆様は参考にしないで下さい。
あくまで、筆者の復習用です。
目次
1.はじめに
2.color
3.font-size
4.font-weight
5.text-align
6.text-decoration
7.おわりに
1. はじめに
本記事では、CSSの「利用頻度の高いテキストスタイル設定」について記載する。
なお、以下例題に対し、HTMLファイルは共通して以下を使用する。
【サンプル】
index.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
・文字色を指定する際に使用する。
・#000000などの記述やカラーネームで色指定する。
背景色を指定する際はbackground-colorなので、colorと混同しないこと。
【サンプル】
styles.css
h1 {
color: blue;
}
p {
color: #6495e6;
}
【表示例】
3. font-size
フォントのサイズを指定する際に使用する。
使用凡例
数値で指定
・数値に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段階上下する。
【サンプル】
styles.css
h1 {
font-size: 64px;
}
p {
font-size: 20px;
}
【表示例】
<サイズ変更前>
<サイズ変更後>
4. font-weight
フォントの太さを指定する際に使用する。
使用凡例
数値で指定
・100、200、300、400、500、600、700、800、900でフォントの太さを指定する。
・太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがある。
・標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなる。
キーワードで指定
normal …… 標準の太さ。（数値で400を指定した場合と同じ）
bold …… 一般的な太字の太さ。（数値で700を指定した場合と同じ）
lighter …… 相対的に一段階細くする。
bolder …… 相対的に一段階太くする。
【サンプル】
styles.css
p {
font-weight: bold;
}
【表示例】
<変更前>
<変更後>
5. text-align
ブロックコンテナ内の行の揃え位置・均等割付を指定する際に使用する。
【サンプル】
styles.css
h1 {
text-align: right;
}
p {
text-align: left;
}
【表示例】
<変更前>
<変更後>
中央揃えにしたい際は、text-align: center;とする。
6. text-decoration
テキスト傍線のつけ方・色・スタイルをまとめて指定する際に使用する。
使用凡例
text-decoration-line
テキストに傍線をつける際に使用する。
none
何もしない。テキストへの傍線について生成も禁止もしない（初期値）
underline
行に下線を引く。
overline
行に上線を引く。
line-through
行の中央を通る線を引く。
blink
テキストが点滅する。
ext-decoration-lineのサンプル
※noneは初期値なので省略。また、Chromeではblinkはサポートされていないようなので未記載
【underline】
styles.css
h1 {
text-decoration-line: underline;
}
【表示例】
【overline】
styles.css
h1 {
text-decoration-line: overline;
}
【表示例】
【line-through】
styles.css
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】
styles.css
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
【表示例】
【double】
styles.css
h1 {
text-decoration-line: underline;
text-decoration-style: double;
}
【表示例】
【dotted】
styles.css
h1 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
【表示例】
【dashed】
styles.css
h1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
【表示例】
【wavy】
styles.css
h1 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
【表示例】
text-decoration-color
text-decoration-lineプロパティでテキストにつけた傍線の色を指定する際に使用する。
#000000（完全な黒）～#ffffff（完全な白）、 カラーネーム、 RGB などで色を指定。
【カラーネーム】
styles.css
h1 {
text-decoration-line: underline;
text-decoration-color: red;
}
【表示例】
【RGB】
styles.css
h1 {
text-decoration-line: underline;
text-decoration-color: #649564;
}
【表示例】
7. おわりに
本記事で説明不足な点もあると思うので、以下MDN参照リンクあり。
MDNのリンク:https://developer.mozilla.org/ja/
↧