CSSスキル - 第3章 Lesson1

フォントの種類を指定するfont-familyの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

font-familyを利用して、フォントの種類を変更するCSSの書き方について、初心者向けに解説しています。



この動画で学べること

・フォントの種類を指定する方法



フォントの種類を指定する方法

練習ファイルを使って、それぞれ決められたフォントを指定していきましょう。
CSSでフォントの種類を指定するのはfont-familyのプロパティを使います。
そして、値にフォントの種類を入力していきます。


まずは、HTMLファイルのid名「sanserif」にサンセリフ(ゴシック)を適応していきたいと思います。




#sanserif {
font-family: sans-serif;
}




一度保存してブラウザで見てみましょう。
Chromeで見ている場合はほとんど変わりませんが、フォントの種類がサンセリフに指定されています。
もし、フォントの種類を指定しなければ、ブラウザごとの初期状態のフォントになるので、思っていたデザインにならない時があります。
なので、Webサイトを作る際には必ずフォントの種類を指定するようにしましょう。
では、他のフォントも指定していきましょう。



#serif {
font-family: serif;
}

#meiryo {
font-family: "Meiryo",sans-serif;
}

#comic {
font-family: "Comic Sans MS",serif;
}

#hiragino {
font-family: "Hiragino Kaku Gothic ProN",sans-serif;
}




このように、,(カンマ)で区切って複数のフォントを指定することも可能です。
Webページでは、パソコンにインストールされているフォントしか表示できないので、複数のフォントを指定することをおすすめします。
では、保存してブラウザで見てみましょう。