fontプロパティ:テキストの設定を理解しよう

Web制作
ブッ君
ブッ君

今回はテキストの部分の設定を紹介するよ!Web制作ではテキストの事をフォントと言うから覚えておいてね!

マー君
マー君

いよいよ「Web制作」って感じがしてきたね!!燃えてきたーーー!!

ブッ君
ブッ君

そうだね!デザインに大きくかかわるところだからしっかりと学習してね!

font-sizeプロパティでフォントのサイズを設定しよう

font-familyプロパティでフォントの種類を設定しよう

ブッ君
ブッ君

フォントの種類はデザインにも関わる重要な部分。

デザインをよく確認し、デザインに沿ったフォントのサイズや種類をコーディングする事が大事だよ!

マー君
マー君

そうなんだね!デザインで使用しているフォントをfont-familyで指定してコーディングすればいいんだね!!

ブッ君
ブッ君

そうだね!ただ一点注意点があるよ。イラストレーターやフォトショップなどのデザインデータで使用できるフォントの種類のすべてが、コーディングでfont-familyで使用できるわけではないんだよ。

マー君
マー君

??font-familyで指定できないフォントの種類をデザインに使用しているときはどうやってコーディングするの??

ブッ君
ブッ君

その時はテキストを画像で「書き出し」して、画像としてコーディングに組み込んでいくんだ!「書き出し」についての詳しい説明は後でするとして、とりあえずデザインのフォントを確認しそれに合わせてコーディングを行うことを覚えておいてね!!

マー君
マー君

わかった!!しっかりと覚えておくよ!!

font-weightでフォントの太さを設定しよう

font-styleでフォントの斜体を設定しよう

fontプロパティでまとめて設定を行おう

colorプロパティでフォントの色を設定しよう

letter-spacingプロパティで字間の調節を行おう

letter-spacingプロパティはWeb制作で重要な「余白」にも関わるところなので、しっかりと使えるようにしていきましょう!!

まとめ

  • デザインをしっかりと確認し、フォントの設定を行おう
  • fontプロパティなどのショートハンドは積極的に使用しよう
  • 字間はWeb制作で重要な「余白」にかかわる部分なので、視認性等を考慮して、しっかりと調整を行おう

コメント

タイトルとURLをコピーしました