今回はテキストの部分の設定を紹介するよ！Web制作ではテキストの事をフォントと言うから覚えておいてね！
いよいよ「Web制作」って感じがしてきたね！！燃えてきたーーー！！
そうだね！デザインに大きくかかわるところだからしっかりと学習してね！
font-sizeプロパティでフォントのサイズを設定しよう
font-sizeでは様々な単位が使用できますが、それぞれに癖があります。基本的な使用方法を理解しよう！レスポンシブにかかわる部分も説明されているので、とても参考になる記事です！
こちらは計算式を利用して、レスポンシブにフォントサイズを変更する設定方法です！
font-familyプロパティでフォントの種類を設定しよう
font-familyプロパティの基本的な使用方法が分かりやすく説明されています！まずはこと記事から確認を！！！
font-familyで指定できる一覧になります。
googleフォントを使用する事も多いので、こちらの記事でWebサイトでgoogleフォントを使用する方法を確認しよう！！
フォントの種類はデザインにも関わる重要な部分。
デザインをよく確認し、デザインに沿ったフォントのサイズや種類をコーディングする事が大事だよ！
そうなんだね！デザインで使用しているフォントをfont-familyで指定してコーディングすればいいんだね！！
そうだね！ただ一点注意点があるよ。イラストレーターやフォトショップなどのデザインデータで使用できるフォントの種類のすべてが、コーディングでfont-familyで使用できるわけではないんだよ。
？？font-familyで指定できないフォントの種類をデザインに使用しているときはどうやってコーディングするの？？
その時はテキストを画像で「書き出し」して、画像としてコーディングに組み込んでいくんだ！「書き出し」についての詳しい説明は後でするとして、とりあえずデザインのフォントを確認しそれに合わせてコーディングを行うことを覚えておいてね！！
わかった！！しっかりと覚えておくよ！！
font-weightでフォントの太さを設定しよう
font-styleでフォントの斜体を設定しよう
fontプロパティでまとめて設定を行おう
fontプロパティを使用すれば、font-sizeやfont-family、font-weightにfont-varient、line-heightが一括で設定することが出来ます。このような複数のプロパティを一括で設定できるプロパティを「ショートハンド」といいます。
fontプロパティ以外にも、ショートハンドはたくさんあります。積極的に活用していきましょう！！
colorプロパティでフォントの色を設定しよう
colorプロパティでは、16進法カラーコードやRGBなど4種類の方法でカラーの指定が可能です。
こちらでは16進法カラーコードの一覧で確認することが出来ます！
letter-spacingプロパティで字間の調節を行おう
letter-spacingプロパティはWeb制作で重要な「余白」にも関わるところなので、しっかりと使えるようにしていきましょう！！
まとめ
- デザインをしっかりと確認し、フォントの設定を行おう
- fontプロパティなどのショートハンドは積極的に使用しよう
- 字間はWeb制作で重要な「余白」にかかわる部分なので、視認性等を考慮して、しっかりと調整を行おう
コメント