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

test-align/font-size/font-weight/font-family

フォルダ：css_sample_03

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

【準備】

共通で使用するindex.htmlとstyle.cssを用意し、css_sample_03 フォルダの中に入れます（共通のデータとは、CSSの基本で使用したデータです。GitHubからもダウンロードできます）
index.htmlは編集せずそのまま使います

▼style.cssへの追記

main p {
  font-size: 20px;
  font-weight: bold;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  text-align: center;
}

※セレクタを「main p」というように、タグを続けて指定すると、mainの中にあるpタグに対する設定になります

各プロパティの意味

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

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

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

Webフォントサービスの例

▶Google Fontsの使い方

①Google Fontsにアクセス

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

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

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

▼CSSへの記述例：header pにフォントの指定する場合
※書体名は、選んだ書体によって変わります

header p {
  font-family: 'Zen Maru Gothic', sans-serif;
}

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

参考リンク