CSS テキスト・フォント – Nagashima Laboratory

test-align/font-size/font-weight/font-family/line-height/letter-spacing

テキストに関する設定を行うCSSプロパティです。

【はじめる前に】

色と背景の演習で使ったファイル（css_sample_02 一式）をそのまま使用します
css_sample_02 を作成していない場合は「色と背景」の資料を基に、先に作成しておきます。

▼index.htmlへの追記

・・・中略・・・
</section>
        <section class="section-text">
            <h2>2. テキストとフォント (Text & Font)</h2>
            <p class="text-default">
                これがデフォルトのテキストです。ダミーテキストを追加・・・
            </p>
            <p class="text-custom">
                これはCSSで調整したテキストです。ダミーテキストを追加・・・
            </p>
        </section>
</main>

ダミーテキストには、下記のようなサービスも使用できます。

Lorem JPsum 自然な日本語ダミーテキスト

※lorem ipsum は典型的な英文ダミーテキストのことで、これはその日本語版です。https://ja.wikipedia.org/wiki/Lorem_ipsum

▼style.cssへの追記（一番下に追加）

/* =================================================
   2. テキスト・フォントの設定
   ================================================= */
.text-custom {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 16px;           /* 文字サイズ */
    font-weight: bold;         /* 太字 */
    line-height: 1.8;          /* 行間 */
    letter-spacing: 0.05em;    /* 字間：ほんの少し広げる */
    color: #333333;            /* 文字色：真っ黒を避ける */
    text-align: justify;       /* 両端揃え */
}

テキストに関するプロパティ

font-size：文字サイズ。初期設定は16px
font-weight ：太さ。通常の文字はnormal、太字がbold。h1〜6は初期設定がboldのため、最初から太字で表示される
font-family：書体。基本は、ゴシック系か、明朝体系か、どちらかを指定。閲覧者の環境に合わせて選択されるため、複数の書体を指定。上記は、ゴシック系のセット例
text-align：文字揃え。left、center、right、justify（両端揃え）、start、end などが指定できる。
line-height：行間。一般には1.5〜2.0で設定します
letter-spacing：字間。emは1文字を基準とした単位で、1em=1文字分の幅です。

《応用》Webフォントの設定

Webサイトの書体は、閲覧者の環境に依存しますが、Webフォントを指定することで、どの環境でも同じ書体で表示されます。Webフォントサービスを使用すると導入しやすくなります。

Webフォントサービスの例

▶Google Fontsの使い方

①Google Fontsにアクセス

②使いたい書体を選び、Get Font > Get embed code をクリック

③右サイドにコードが表示されるので、HTMLの<head>部分に<link>タグをコピー&ペースト（style.cssをリンクしている<link>タグよりも「先に」読み込む）

④CSSに、font-familyのコードをコピー&ペーストする

▼CSSへの記述例　※書体名は、選んだ書体によって変わります

.text-custom {
  font-family: 'Zen Maru Gothic', sans-serif;
・・・

作成例：https://ngsm-syr.github.io/css_sample_02b/
コード：https://github.com/ngsm-syr/css_sample_02b/

参考リンク