文字や文章の装飾をしよう
今回はCSSで文字や文章の装飾をしていきます![:relaxed:]( ":relaxed:")
文字は情報を伝えるだけでなく、ユーザーに様々な印象を与えるデザイン要素なので、Webサイト上で美しく表示できるようにしていきましょう![:bangbang:]( ":bangbang:")
今回の記事![:arrow_down:]( ":arrow_down:")
- VSCを使ってCSSの簡単プロパティ指定
- 文字の大きさを変える「font-sizeプロパティ」
- 文字の太さを変える「font-weightプロパティ」
- フォントの種類を変える「font-familyプロパティ」
- Webフォントを使ってみよう
- 行の高さを変える「line-heightプロパティ」
- 文章をそろえよう「text-alignプロパティ」
- 文字に色を付けてみよう「colorプロパティ」
CSSの基礎文法はから確認したい人はこの記事へ![:point_down_tone2:]( ":point_down_tone2:")
CSSで華やかなサイトにしたい①～CSS適用方法と基礎文法～
VSCを使ってCSSの簡単プロパティ指定
今回は、VisualStudio Code(以下VSC)を使用して、CSSを書いていきます。
インストールからプロジェクトの作成まで![:point_down_tone2:]( ":point_down_tone2:")
Visual Studio Codeの導入と使い方
フォルダとファイル作成手順![:point_down_tone2:]( ":point_down_tone2:")
HTML/CSS/JSデモ-cssで見た目の調整をしよう
VSCではプロパティを指定すると候補を出してくれるので、便利です。
![GIF 2020-04-11 7-11-21.gif]()
文字の大きさを変える「font-sizeプロパティ」
まずは、文字の大きさを変えていきましょう![:wink:]( ":wink:")
font-sizeプロパティで指定します。大きさは主に「px」や「rem」、「%」を使います。
主な値
| 指定方法 | 説明 |
|---|
| 数値 | 数値に「px」や「rem」、「%」などの単位を付ける |
| キーワード | xx-small,x-small,small,medium,large,x-large,xx-largeの7段階で指定できる。mediumが標準サイズ |
ページ基準となる＜html＞タグに「font-size:100%」を指定すると、ブラウザーのデフォルト文字サイズ、またはユーザーがブラウザーの環境設定により調整したサイズを基準に相対値を設定できます。それに対し、「px」で指定したサイズは、基準サイズと関係なく絶対値として設定されます。
HTML
<h1>猫の好きな事</h1><h2>毛づくろいをすることが好き</h2><p>毛づくろいの目的はいくつかありますが、舌にある無数の突起をブラシ代わりにして、体を清潔にすることが大半。
猫は、起きている時間の30〜50％を毛づくろいに費やすほどキレイ好きなんです。</p>フォントサイズ例：CSS
html{font-size:100%;}h1{font-size:2em;}h2{font-size:20px;}![image.png]()
※＜h1＞タグのテキスト「猫の好きな事」は「2em」が設定されているので、基準サイズである文章の2倍サイズになっています。
適切な文字サイズは？
適切な文字サイズは14px~18px程度に設定するのが一般的です![:thumbsup_tone2:]( ":thumbsup_tone2:")
また、デザインに統一感を持たせるため、文字サイズのバリエーションは2~5種類程度にとどめておきましょう。
見出しとジャンプ率
文章の見出しをデザインする時は、文字のジャンプ率についても考える必要があります。
ジャンプ率とは…？？![:thinking:]( ":thinking:")
![:bulb:]( ":bulb:")
見出しと本文の文字サイズの比率のことです。
文字のサイズの大きさの違いが大きいと「ジャンプ率が高い」、小さいと「ジャンプ率が低い」と表現されます。ジャンプ率が高いと、躍動的で楽しい雰囲気になり、逆に低くなると上品で落ち着いた雰囲気になります。
![ジャンプ.png]()
文字の太さを変える「font-weightプロパティ」
font-weightプロパティでフォントの太さを指定します。
1～1000の任意の数値で指定する指定することおできますが通常は「normal」「bold」などのキーボードで指定するほうが一般的です。
主な値
| 指定方法 | 説明 |
|---|
| キーワード | normal(標準),bold(太字),lighter(一段階細く),bolder(一段階太く) |
| 数値 | 1～1000の任意の数値 |
HTML
<p>通常の太さのテキスト</p><pclass="bold">太字にしたテキスト</p>
![コメント 2020-04-10 082148.png]()
強調したい文字は太字にすると目立たせることができます。
長文に太文字は使わないほうが良い？
太いフォントで長い文章書くと、画面が黒々として、非常に読みづらくなってしまいます。長文の場合はすべて太字にするのは避けましょう。
太字は、見出しやキーワードに使うとメリハリが出てバランスが整います。
![amicafe.png]()
フォントの種類を変える「font-familyプロパティ」
font-familyプロパティを使ってフォントの種類を指定します。CSSの設定では、複数のフォントを指定でき、「,(カンマ)」で区切って先に指定したものから順に適応されます。ブラウザーによっては日本語のフォント名を識別できないため、英語表記のフォント名も同時に指定しましょう。
主な値
| 指定方法 | 説明 |
|---|
| フォント名 | フォントの名前を記述。日本語名やフォント名にスペースが含まれる場合は、フォント名をシングルクォーテーション「'」かダブルクォーテーション「"」で囲って指定する。 |
| キーワード | sans-serif(ゴシック体)、serif(明朝体)、cursive(筆記体)、fantasy(装飾体)、monospace(等幅)から指定する |
以下はフォント適応例です。今回はわかりやすくh1タグにそれぞれのクラスを適応させます。(本来のh1タグの使い方としては正しくありません。)
HTML
<h1class="serif">猫の好きな事</h1><h1class="gothic">猫の好きな事</h1><h1class="maru__gothic">猫の好きな事</h1>
フォント例：CSS
.serif{font-family:serif;}.gothic{font-family:'游ゴシック体','Yu Gothic',YuGothic,sans-serif;}.maru__gothic{font-family:'ヒラギノ丸ゴ pro W4','Hiragino Maru Gothic Pro',sans-serif;}![コメント 2020-04-09 082102.png]()
Webフォントを使ってみよう
以前のWebページでは、ユーザーのデバイスにインストールされているフォントのみ表示することが可能でしたが、最近では、Webサーバー上にある「Webフォント」を使うことで、デバイスにフォントがなくても表示できるようになりました。
そんな便利なWebフォント導入の仕方を見ていきましょう![:heart_eyes:]( ":heart_eyes:")
ここでは、Googleが無料で提供しているGoogle Fontを導入します。
手順![:arrow_down:]( ":arrow_down:")
- ①Google FontsのWebサイトにアクセス
- ②フォントを選択する
- ③HTMLファイルに読み込む
- ④CSSファイルにスタイルを指定
①Google FontsのWebサイトにアクセス
Google FontのWebサイト![:point_down_tone2:]( ":point_down_tone2:")
Google Fonts
②フォントを選択する
使いたいフォントを選択します。
日本語のフォントも選ぶことができます。
![コメント 2020-04-11 073537.png]()
選びたいフォントの右上の+ボタンを押すと場面下に黒い帯が表示されるので、クリックします。
![GIF 2020-04-11 7-44-00.gif]()
③HTMLファイルに読み込む
「Embed Font」部分に書かれたコードをコピーします。
![コメント 2020-04-11 073946.png]()
HTMLファイルの＜head＞内に記述します。
![コメント 2020-04-11 074830.png]()
④CSSファイルにスタイルを指定
「Specify in CSS」に書かれたコードをコピーし、フォントを適応させたい要素に指定します。
HTML
<divclass="web_font"><h1>猫の好きな事ってなんだろう…？</h1><h2>①毛づくろいをすることが好き</h2></div> <h1>猫の好きな事ってなんだろう…？</h1> <h2>①毛づくろいをすることが好き</h2>
Webフォント例：CSS
.web_font{font-family:'M PLUS Rounded 1c',sans-serif;}![コメント 2020-04-11 080002.png]()
上がWebフォントを適応したものです。
うまく出来ましたか![:question:]( ":question:")
自分好みのWebフォントを探してみましょう![:thumbsup_tone2:]( ":thumbsup_tone2:")
行の高さを変える「line-heightプロパティ」
行の高さ(行間)を指定するときは、line-heightプロパティを使います。行の高さが文字サイズより小さい場合は行が異なるので注意が必要です。
主な値
| 指定方法 | 説明 |
|---|
| normal | ブラウザーが判断した行の高さで表示 |
| 数値(単位なし) | フォントサイズとの比率で指定 |
| 数値(単位あり) | 「px」,「em」,「%」等の単位で数値を指定 |
きれいに見えるおすすめの行間数値は、1.5~1.9の間です。フォントや全体のデザインによって調整するのが良いでしょう。
違う行間のものを見比べてみると…
![コメント 2020-04-10 084912.png]()
やはり、1.7くらいがちょうどいいのではないでしょうか![:point_up_tone2:]( ":point_up_tone2:")
文章をそろえよう「text-alignプロパティ」
text-alignプロパティで、テキストをそろえる位置を指定します。日本語の場合、デフォルトで左揃えになっています。
主な値
| 指定方法 | 説明 |
|---|
| left | 左揃え |
| right | 右揃え |
| center | 中央揃え |
| justify | 両端揃え |
「left」と「justify」を比べてみると…
「left」だと文章の右側がガタガタ不揃いですが、「justify」だと両端がきちっとなります。
![コメント 2020-04-11 064914.png]()
中央揃えは短文にしよう
デザインの中で中央揃えしたい場面が多々あると思いますが、中央揃えだと行のスタート位置がバラバラになってしまいます![:disappointed_relieved:]( ":disappointed_relieved:")
それにより、段落や文章を認識しづらくしてしまいます。
2~3行より長くなる場合は左揃えや両端揃えにしたほうが読みやすいでしょう。
文字に色を付けてみよう「colorプロパティ」
文字に色を付けるには、colorプロパティを使います。ここで注意が必要なのは、色の指定方法です。
CSSで指定する方法は3通りあります![:point_down_tone2:]( ":point_down_tone2:")
- カラーコードで指定する
- RGB値で指定する
- 色の名前で指定する
わかりやすい方法としては、Googleの「カラーピッカー」を使うとよいかと思います。Googleで「カラーピッカー」と検索してみましょう![:relaxed:]( ":relaxed:")
![コメント 2020-04-10 085510.png]()
上記のHEXと書いてある「#」からははじまる6桁の英数字を合わせたものがカラーコードです。
RGBは赤(Red)、緑(Green)、青(Blue)の数値の組み合わせからできています。
主な値
| 指定方法 | 説明 |
|---|
| カラーコード | 「#(ハッシュ)」で始まる3桁もしくは6桁のカラーコード指定 |
| 色の名前 | 「red」「blue」などの決められた色の指定 |
| RGB値 | 「rgb」から書き始め、赤、緑、青の値を「,(カンマ)」で区切って指定。透明度も含める場合は「rgba」から書き始め、赤、緑、青、透明度の値を「,(カンマ)」で区切って指定。透明度は0~1の間で記録する。 |
フォントカラー例：CSS
h1{color:#0bd;}h2{color:navy;}p{color:rgba(30,30,221,0.842)}![image.png]()
文字の色が変わるだけで印象が変わりましたね![:clap_tone2:]( ":clap_tone2:")
参考文献
Mana著、「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」、SBクリエイティブ株式会社、2019年
見出しと本文の文字サイズの比率のことです。
