簡単！CSS初心者向けの文字デザイン&設定集10選

CSSの書き方おさらい

HTMLをデザインするときに、CSS側に書く情報を”プロパティ”と呼びます。

本記事ではたくさんのプロパティを紹介しますが、まずはここでHTMLとCSSの書き方をおさらいしてみましょう！

HTMLとCSSを対応させるとき、大きく以下の3パターンに分けられます。

CSS側に書いたタグ、.クラス名、#id名の部分を”セレクタ”と呼び、対応するHTMLをデザインできます。

CSS側で注意するべきルールは以下3つです。

• プロパティは”{ }(=波カッコ)”で囲む
• プロパティの右に”半角:(=コロン)”、値の右には”半角;(=セミコロン)”
• クラス名のときは”.(=ドット)”、ID名のときは”#”をアタマに付ける

また、クラス名・ID名には好きな名前を付けられます。

忘れてしまっても大丈夫です。つまずく度にこの章に立ち戻りながら、辞書的に使ってみてください。

文字に使えるCSSデザイン&設定8選

さっそくここからは、文字に使えるデザインや設定を8つご紹介します！

コードをコピペして、ブラウザで確認しながら試してみてください。

1.【文字サイズ】font-size

文字サイズを変更するには、font-sizeを使います。

セレクタ {
font-size: ◯px or ◯em;
}

font-sizeでよく使われる単位に、px(=ピクセル)とemがあります。

押さえておきたいポイントは以下の3つ。

• ◯には好きな数値を入れる。
• pxを文章中で使う場合、14〜18pxがおすすめ。
• emはデフォルトの設定に対して何倍にするかを指定。

■使用例

2.【太字】font-weight

文字を太くするには、font-weightを使います。

セレクタ {
font-weight: bold ;
}

font-weightの値には、boldの他にも以下のような書き方があります。

• normal → 通常の太さ(何も設定していないデフォルト状態)
• bolder → normalとboldの中間くらいの太さ
• lighter → 細くする
• 100〜900 → 100、200、300、…900と9段階で太さを指定

ただ、boldとnormal以外の書き方は、対応していないフォントも多いので気をつけてください。

■使用例

3.【文字色】color

文字色を変更するには、colorを使います。

セレクタ {
color: 色名 or カラーコード;
}

colorの値には、色名かカラーコードを指定します。

カラーコードを無理に暗記する必要はないので、使いたい色を辞書的に探せるサイトなどをうまく活用しましょう。

参考：色の名前とカラーコードが一目でわかるWEB色見本

■使用例

4.【文字間の幅】letter-spacing

文字間の幅を変えるには、letter-spacingを使います。

セレクタ {
letter-spacing: ◯px or ◯em;
}

emは文字の高さを1としたときの比率です。

たとえば0.5emなら、文字間の幅は文字の高さの半分になります。

ブログのような文章なら、0.1emあたりにしておくのがおすすめです。

■使用例

5.【行の高さ】line-height

行の高さを変えるには、line-heightを使います。

セレクタ {
line-height: ◯px or 数値(単位なし);
}

このあと紹介する例のように、小さいpx値で書くと行が重なってしまうときがあります。

ブログなど文章全体の行間を決めるときは、単位なしで1.5〜1.7くらいがおすすめです。

■使用例

6.【文字の下線】text-decoration

文字にシンプルな下線を引くには、text-decorationを使います。

セレクタ {
text-decoration: underline;
}

またtext-decorationは、以下の使い方も便利です

• text-decoration: underline red; → 赤い下線を引く
• text-decoration: line-through; → 取り消し線を引く
• a(=リンクタグです) { text-decoration: none; } → リンクの下線を消す

■使用例

7.【文字を囲む】border

文字を枠線で囲むには、borderを使います。

セレクタ {
border: solid ◯px 色 or カラーコード ;
}

borderの値には線の種類、太さの数値、色をそれぞれ半角スペース空けながら書きます。

関連のあるプロパティもご紹介します。

• border-top or bottom, left, right: 値 ; → 上下左右の好きな部分にだけ線を引く。値の書き方はborderと同じ。
• border-radius: ◯px; → 枠線の角を丸くする
• display: inline or inline-block; → もし枠線が長すぎたら加えてみてください。

■使用例

8.【文字の位置を揃える】text-align

文字を左・中央・右揃えにするには、text-alignを使います。

セレクタ {
text-align: left or center or right;
}

text-align: left;はデフォルトの値なので、狙って使うとき以外は書かなくてOKです。

■使用例

おしゃれな応用CSSデザイン2選

ここからは、すこしだけ上級なCSSデザインを2つご紹介します。

ちょっとだけ背伸びして、おしゃれなデザインも身につけちゃいましょう！

1.【ペンで引いたような太めの下線】background:linear-gradient;

文字にかぶる太めの線を引くには、background：linear-gradientを使います。

セレクタ {
background: linear-gradient(transparent ◯%, 色名 or カラーコード ◯%)；
}

なんだか長くてムズかしそうですが、以下のように仕組みさえ分かればとてもカンタン。

• transparent ◯% → 文字の高さに対して、0〜100%で指定。数値が高いほど、文字の上半分が透明になってく(=下線になる)。
• 色 ◯% → 色自体をどれだけ透明にするか。高いほど透明度が上がり、100%以上も指定できる。

すぐには分からなくても数値をいじって遊んでみると、一気に理解できますよ！

■使用例

2.【文字に影をつける】text-shadow

文字に影のエフェクトを付けるには、text-shadowを使います。

セレクタ {
text-shadow: 右方向の長さ(px) 下方向への長さ(px) 影のぼかし(px) 影の色名 or カラーコード;
}

■使用例

まとめ

この記事では、以下を中心にCSSデザインをご紹介しました。

• CSSの書き方おさらい
• 文字のデザイン&設定集10選

まずはコードをコピペして、自分なりに遊んでみると理解しやすくなります。

楽しく学びながら、おしゃれなデザインを習得してみてください！