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



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

この記事では初心者向けに、文字のデザインでよく使うCSSをご紹介します。

初めのうちはなかなか覚えられないので、すぐに見返せるサイトがあったら便利ですよね。

  • 「いろんなデザインを試してみたい」
  • 「辞書的に使えるCSS集がほしい」

そう思っている方のために、今回は以下の2つをご紹介します。

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

また、記事で書かれているコードはすべてコピペできるので、ぜひブラウザで確認しながら読んでみてください!

目次
  1. CSSの書き方おさらい
  2. 文字に使えるCSSデザイン&設定8選
  3. 1.【文字サイズ】font-size
  4. 2.【太字】font-weight
  5. 3.【文字色】color
  6. 4.【文字間の幅】letter-spacing
  7. 5.【行の高さ】line-height
  8. 6.【文字の下線】text-decoration
  9. 7.【文字を囲む】border
  10. 8.【文字の位置を揃える】text-align
  11. おしゃれな応用CSSデザイン2選
  12. 1.【ペンで引いたような太めの下線】background:linear-gradient;
  13. 2.【文字に影をつける】text-shadow
  14. まとめ

CSSの書き方おさらい

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

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

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


HTML
  • <タグ>文字</タグ>

  • <タグ class="クラス名">文字</タグ>

  • <タグ id="ID名">文字</タグ>
  • CSS
  • タグ {
     プロパティ: 値;
    }

  • .クラス名 {
     プロパティ: 値;
    }

  • #ID名 {
     プロパティ: 値;
    }
  • CSS側に書いたタグ、.クラス名、#id名の部分を”セレクタ”と呼び、対応するHTMLをデザインできます。

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

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

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

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

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

    image

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

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


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

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

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

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

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

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

    ■使用例


    HTML
  • <p class="px">10pxの文字</p>

  • <p class="em">2emの文字</p>
  • CSS
  • .px {
     font-size: 10px;
    }

  • .em {
     font-size: 2em;
    }
  • ブラウザ画面

    10pxの文字

    2emの文字


    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以外の書き方は、対応していないフォントも多いので気をつけてください。

    ■使用例


    HTML
  • <p class="normal">デフォルトの太さ</p>

  • <p class="bold">太め</p>
  • CSS
  • .normal {
     font-weight: normal;
    }

  • .bold {
     font-weight: bold;
    }
  • ブラウザ画面

    デフォルトの太さ

    太め


    3.【文字色】color

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

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

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

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

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

    ■使用例


    HTML
  • <p class="color-name">スカイブルー</p>

  • <p class="color-code">コバルトグリーン</p>
  • CSS
  • .color-name {
     color: 10px;
    }

  • .color-code {
     color: #3cb37a;
    }
  • ブラウザ画面

    スカイブルー

    コバルトグリーン


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

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

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

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

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

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

    ■使用例


    HTML
  • <p class="letter10px">CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。いっしょにプログラミングを楽しみましょう!</p>

  • <p class="letter0.1em">CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。いっしょにプログラミングを楽しみましょう!</p>
  • CSS
  • .letter10px {
     letter-spacing: 10px;
    }

  • .letter0.1em {
     letter-spacing: 0.1em;
    }
  • ブラウザ画面

    CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。いっしょにプログラミングを楽しみましょう!

    CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。いっしょにプログラミングを楽しみましょう!


    5.【行の高さ】line-height

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

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

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

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

    ■使用例


    HTML
  • <p class="line1.5">CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。いっしょにプログラミングを楽しみましょう!</p>

  • <p class="line10px">CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。いっしょにプログラミングを楽しみましょう!</p>
  • CSS
  • .line1.5 {
     line-height: 1.5;
    }

  • .line10px {
     line-height: 10px;
    }
  • ブラウザ画面

    CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。いっしょにプログラミングを楽しみましょう!

    CodeCampusはテクノロジーの「学ぶ・働く」を知るメディアです。いっしょにプログラミングを楽しみましょう!


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

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

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

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

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

    ■使用例


    HTML
  • <p class="text-underline">下線</p>

  • <p class="text-through">取り消し線</p>
  • CSS
  • .text-underline {
     text-decoration:
     underline;
    }

  • .text-through {
     text-decoration:
     line-through;
    }
  • ブラウザ画面

    下線

    取り消し線


    7.【文字を囲む】border

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

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

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

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

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

    ■使用例


    HTML
  • <p>青色の丸い枠線</p>

  • <h2>左に枠線</h2>
  • CSS
  • p {
     border: solid 2px blue;
     border-radius: 7px;
     display: inline-block;
    }

  • h2 {
     border-left: solid 3px  #4682b4;
    }
  • ブラウザ画面

    青色の丸い枠線

    左に枠線


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

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

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

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

    ■使用例


    HTML
  • <p>左</p>

  • <h2>中央</h2>

  • <h3>右</h3>
  • CSS
  • p {
     text-align: left;
    }

  • h2 {
     text-align: center;
    }

  • h3 {
     text-align: right;
    }
  • ブラウザ画面

    中央


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

    image

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

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


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

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

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

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

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

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

    ■使用例


    HTML
  • <p>薄い下線</p>

  • <h2>濃い下線</h2>
  • CSS
  • p {
     background: linear-
     gradient(transparent 50%, red);
    }

  • h2 {
     background: linear-
     gradient(transparent 80%,
     red 20%);
    }
  • ブラウザ画面

    薄い下線

    濃い下線


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

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

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

    ■使用例


    HTML
  • <p>影サンプル1</p>

  • <h2>影サンプル2</h2>
  • CSS
  • p {
     text-shadow: 1px 1px 1px silver;
    }

  • h2 {
     text-shadow: 8px 8px 0 green;
    }
  • ブラウザ画面

    影サンプル1

    影サンプル2


    一流デザイナーのスキルが身に付く

    CodeCampの無料体験はこちら

    まとめ

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

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

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

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

    関連記事

    佐藤恭平
    この記事を書いた人
    佐藤恭平
    \ 無料体験開催中!/自分のペースで確実に習得!
    オンライン・プログラミングレッスンNo.1のCodeCamp