前回はfloatプロパティを使って2カラムのレイアウトを作りました。今回は、そこに見出しと本文のデザインを作っていきたいと思います。アレンジを加えていってもいいですし、cssでのデザインを楽しめると思いますよ!サンプルのソースを見るとわかりますが、メインコンテンツにはh1~h2要素として設定した見出しがあります。h1要素のフォントに関するスタイルを適用していきます。<p>スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。<p>スマホで副業するならアフィリエイトがオススメです。Reserved.</p></footer></div></body></html>※このページは「floatの回り込みを解除して2段組みレイアウトを完成させよう」の続きです。見出し(h1)のスタイルを設定する完成イメージを見てみると、フォントの種類とサイズがちょっと違いますので、まずはそこから変更していきます。フォントの種類は「font-family」、フォントのサイズは「font-size」で指定できます。タイプセレクタを「h1」と指定して、cssファイルに記述してみましょう。sans-serif;}これでh1のフォントの種類とサイズが指定したものへ変更されます。次は他の見出しのスタイルを設定してみましょう。h2の見出しのスタイルを設定メインコンテンツにはh1の他に見出しとなるh2も設定してあります。完成イメージと見比べると、サイズとフォントの種類が違いますよね。h1で設定した時と同じようにそれぞれ指定していきます。同じようにタイプセレクタを「h2」と指定して、cssファイルに記述していきましょう。sans-serif;}記述できたら、内容を保存してブラウザで確認してみましょう!各見出しのフォントサイズとフォントの種類が変わったのが確認できると思います。問題なければ、次は本文のスタイルを設定してきます。見出しの下には、pタグで囲んだテキストがありますよね。次はそこの部分(本文)のスタイルを設定していきます。メインコンテンツ内のp要素のみにcssを適用できるように、クラスセレクタを使って指定します。メインコンテンツ内の各p要素に、クラス名「text」と記述しましょう。※クラス名は「text」でなく、好きな名前でも大丈夫です。class="text">スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。class="text">スマホで副業するならアフィリエイトがオススメです。</div>こうする事で、クラス名「text」が付いてる部分のみにcssルールを指定することができます。classを使わずに、見出しと同じ方法でタイプセレクタ「p」として設定してしまうと、全てのページのp要素にここでする設定が反映されてしまいます。他のページのp要素と同じ設定で良い場合は、classは使う必要はないです。一応トップページのつもりで作成してるので、中々そういった事はないと思います。実際自分でホームページを作る時は、ID、クラス、タイプセレクタを使い分けるようにしてみて下さいね。※それぞれの使い分けについてはcss入門!初心者でもできるスタイルシート基礎講座と使い方をご覧ください。クラスセレクタを使う場合は「要素名.クラス名」と記述する事で、指定した部分にのみcssを適用する事ができます。「p.text{}」と記述すると、クラス名「text」が付いているp要素にのみcssが適用されます。cssファイルに記述してみましょう。}p.text{}これで{}内に記述したものは、クラス名「text」が付いたp要素にのみ反映されます。ここではpに行揃え(line-height)などのフォントに関する設定をしていきます。cssファイルに記述してみましょう。line-height:1.5em;}記述したら内容を保存して、ブラウザで確認してみましょう。各p要素、見出しが設定したように変わっているのが確認できますよね。これでちょっとは、見れるようになってきましたwそしてお気づきかと思うのですが、それぞれのp要素、見出しのfont-familyをすべて同じ物に設定しましたよね。分かりやすいように全部記述したのですが、本来全部同じfont-familyにするのであれば、body要素にまとめて指定する事もできます。sans-serif;}例えばこういうように「body」と指定すれば、body要素全体(ページ全体)に対してその設定が反映されます。hやpにいちいち同じ記述をする必要がないわけです。