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;
}
marginで一つだけかくと「上下方向のマージン指定」、半角開けてautoにすると親要素の横幅の真ん中になる。
明朝体部分のためのクラスを作る
→
.serif{
font-family: serif;/*明朝体が出てきたらこのクラス名を付けてやる*/
}
→逆に全体はゴシック体にしておく
→
body{
font-size: 1.5rem;
font-family: sans-serif;/*全体はゴシック体*/
}
→文章の部分に「明朝体」「灰色」のクラスも付与。
→
<p class="message serif gray">
毎日いろいろなことに追われて食事がおろそかになっていませんか? <br>
ヘルセムは、そんな忙しいあなたのための健康サポート、日々の食事をお届けするサービスです。個人でのご利用はもちろん、会社の福利厚生としてのご利用も可能。朝食と夕食のセットや昼食のみなど、お客様のニーズに合わせたプランをご用意しています。
</p>
クラス名は複数付けられるし、その場合半角スペースであけて記述する。
