main_visualの下の文章部分

classをつけておく

　

<p class="message">

毎日いろいろなことに追われて食事がおろそかになっていませんか? <br>

ヘルセムは、そんな忙しいあなたのための健康サポート、日々の食事をお届けするサービスです。個人でのご利用はもちろん、会社の福利厚生としてのご利用も可能。朝食と夕食のセットや昼食のみなど、お客様のニーズに合わせたプランをご用意しています。 

</p>

　

class名ってどう付ける？

　

wrapper ラッパー　包み物によく使う。大きいブロックを包むのに使う名前

container コンテナー　ラッパーの中の小ブロックの名前によく使う

 　

main

global

home

とかいろいろある。タグ名と同じものは使わない

入った会社や同僚にあわせて命名の規則は合わせればいい

　　

今回はpだけなので、背景塗るなどはないのでpにclassを付けるが、
もしこれで「背景灰色」とかなったら、divで包んでおく必要とかが出てくる
今回は必要ない

　　

main p.message{

 width: 60%;

 margin: 8rem auto;/*上下方向8rem、autoというのは「親要素の横幅の真ん中」*/

 line-height: 1.5;

}

　

　

明朝体部分のためのクラスを作る

 

.serif{

 font-family: serif;/*明朝体が出てきたらこのクラス名を付けてやる*/

}

 
逆に全体はゴシック体にしておく

 

body{

 font-size: 1.5rem;

 font-family: sans-serif;/*全体はゴシック体*/

}

　

文章の部分に「明朝体」「灰色」のクラスも付与

 

<p class="message serif gray">

毎日いろいろなことに追われて食事がおろそかになっていませんか? <br>

ヘルセムは、そんな忙しいあなたのための健康サポート、日々の食事をお届けするサービスです。個人でのご利用はもちろん、会社の福利厚生としてのご利用も可能。朝食と夕食のセットや昼食のみなど、お客様のニーズに合わせたプランをご用意しています。 

</p>