この記事では、サイトの印象を左右するテキストの基本的なスタイリングについて説明していきます。フォントの種類、大きさ、色等テキストには多くの指定しなければならない要素が存在します。たかが文字と思わず、多種多様なデザインに対応できるよう知識を取り入れていきましょう。
フォント関連の基本的なプロパティ
ここではよく使われる代表的なプロパティを紹介します。最も基本的な部分なのでしっかりそれぞれの役割を理解していきましょう。
| font-family | テキストのフォントを指定します。 |
| font-size | テキストのサイズを指定します。 |
| font-weight | テキストの太さを指定します。 |
| font-style | テキストのスタイルを指定します。 |
| line-height | 行の高さを指定します。 |
| color | テキストの色を指定します。 |
コード例
p {
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: 600;
text-align: italic;
line-height: 1.6;
color: #333
}上記のコードのように、スタイルを指定することができます。実際にコードに書いてどのプロパティを変えたら、どの部分が変わるのか実際に手を動かして体験してみてください。
テキスト配置や装飾
ここではテキストの配置や装飾に使われる代表的なプロパティを紹介します。この部分が理解できれば、テキストを自由に配置したりちょっとした装飾もできるようになるのでテキストを華やかにできます。
| text-align | テキストの水平方向の配置を指定します。 |
| text-decoration | テキストの下線や取り消し線などの装飾を指定します。 |
| text-shadow | テキストに影を追加します。 |
| background-color | テキストの背景色を指定します。 |
p {
text-align: center;
text-decoration: underline;
text-shadow: 2px 2px 4px #000;
background-color: yellow;
}上記のコードのようにスタイルを指定することができます。テキスト自体に影響があるものではないですが、位置調整や装飾もとても需要な要素なのでどんどん使って覚えていきましょう。
まとめ
この記事では、テキストの基本的なスタイリングについて説明しました。使いこなすことで多種多様なデザインを実現することができるのでどんどん使っていきましょう。テキストのデザインはWebサイト印象を左右する重要なものなので多種多様なデザインに対応できるように知識を取り入れていきましょう。最初は難しいかもしれませんが、継続して学習すれば必ず身に付くので頑張っていきましょう。
「読んだだけでは100%身に付きません」
必ず行動に移してください。
そう言っても、
行動する人は20%
それを継続する人は5%
行動し続けるだけで、
上位5％に入ることができます。
今すぐ行動して上位5％に入り、
Web制作で本気で人生変えたい
そんな人は今すぐ登録してください
今行動しなきゃ、人生変わらないですよ
こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています！
是非登録してみて下さい！
コメント