見出しと本文(p要素)のスタイルを設定しよう

見出しと本文を設定しよう

こんにちわー、ゆうです(^^♪

前回はfloatプロパティを使って2カラムのレイアウトを作りました。 今回は、そこに見出しと本文のデザインを作っていきたいと思います。 ここは超簡単なんで、適当に読み流すだけで大丈夫です(^^♪ アレンジを加えていってもいいですし、cssでのデザインを楽しめると思いますよ!

サンプルのソースを見るとわかりますが、メインコンテンツにはh1~h2要素として設定した見出しがあります。 まずはh1要素のフォントに関するスタイルを適用していきます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門!初心者でも見るだけで自由自在に</title>
</head>
<body>

<div id="page">
 
<header>
   <p>まずは簡単なwebページを実際に作って見ましょう!!</p>
</header>

<div id="menu">
<ul> 
   <li>ホーム</li>             
   <li>遊び</li>
   <li>仕事</li>
   <li>パソコン</li>
   <li>アフィリエイト</li>   
 </ul>
</div>

<div id="main_contents">
<h1>「2016年07月」一覧</h1>    
<h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>      
   <p>スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
この記事ではスマホ</p>
<h2>稼げるスマホ広告をパソコンでチェック!便利なツールご紹介</h2>
   <p>アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか?
   今はパソコンより</p>
<h2>アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは</h2>
   <p>良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、
   始める前に注意しなければならない落と<p/> 
<h2>スマホで副業するならアフィリエイト!稼ぐための新戦略</h2>
   <p>スマホで副業するならアフィリエイトがオススメです。 なぜ?って、
   それは失敗してもリスクがなく</p> 
</div>
<footer>
<p>Copyrightc 安月給さよなら!本当に稼げるのか実験記 All Rights Reserved.</p>
</footer>

</div>
</body>
</html>

※このページは「floatの回り込みを解除して2段組みレイアウトを完成させよう」の続きです。

見出し(h1)のスタイルを設定する

h1~h2の位置(完成イメージ)

完成イメージを見てみると、フォントの種類とサイズがちょっと違いますので、まずはそこから変更していきます。 フォントの種類は「font-family」、フォントのサイズは「font-size」で指定できます。

ではタイプセレクタ「h1」と指定して、cssファイルに記述してみましょう。

h1{
  font-size:24px;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;
}

これでh1のフォントの種類とサイズが指定したものへ変更されます。 次は他の見出しのスタイルを設定してみましょう。

h2の見出しのスタイルを設定

メインコンテンツにはh1の他に見出しとなるh2も設定してあります。 完成イメージと見比べると、サイズとフォントの種類が違いますよね。 なので、h1で設定した時と同じようにそれぞれ指定していきます。

では同じようにタイプセレクタ「h2」と指定して、cssファイルに記述していきましょう。

h2{
  font-size:15px;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;
}

記述できたら、内容を保存してブラウザで確認してみましょう!

css適用例

各見出しのフォントサイズとフォントの種類が変わったのが確認できると思います。 問題なければ、次は本文のスタイルを設定してきます。

本文(p要素)のスタイルを設定

見出しの下には、pタグで囲んだテキストがありますよね。 次はそこの部分(本文)のスタイルを設定していきます。

設定の仕方は見出しで行った方法とほぼ同じなので、超簡単です! ただし、メインコンテンツ内のp要素のみにcssを適用できるように、クラスセレクタを使って指定します。

メインコンテンツ内の各p要素に、クラス名「text」と記述しましょう。

※クラス名は「text」でなく、好きな名前でも大丈夫です。

<div id="main_contents">
<h1>「2016年07月」一覧</h1>    
<h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>      
   <p class="text">スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
この記事ではスマホ</p>
<h2>稼げるスマホ広告をパソコンでチェック!便利なツールご紹介</h2>
   <p class="text">アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか?
   今はパソコンより</p>
<h2>アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは</h2>
   <p class="text">良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、
   始める前に注意しなければならない落と<p/> 
<h2>スマホで副業するならアフィリエイト!稼ぐための新戦略</h2>
   <p class="text">スマホで副業するならアフィリエイトがオススメです。 なぜ?って、
   それは失敗してもリスクがなく</p> 
</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ファイルに記述してみましょう。

p.text{
  font-size:13px;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;
  color:#463a1c;
  line-height:1.5em;
}

記述したら内容を保存して、ブラウザで確認してみましょう。

css適用例

どうでしょうか。各p要素、見出しが設定したように変わっているのが確認できますよね。 これでちょっとは、見れるようになってきましたw

そしてお気づきかと思うのですが、それぞれのp要素、見出しのfont-familyをすべて同じ物に設定しましたよね。 分かりやすいように全部記述したのですが、本来全部同じfont-familyにするのであれば、body要素にまとめて指定する事もできます。

body{
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;
}

例えばこういうように「body」と指定すれば、body要素全体(ページ全体)に対してその設定が反映されます。 なので、hやpにいちいち同じ記述をする必要がないわけです。

こういう使い方もあるので、知っておくと楽ですよ(^^♪

では次はメインコンテンツに画像を入れていきたいと思います(^^)/

頂いたコメント

  1. さっち より:

    こんばんは。
    ブログランキングから来ましたさっちです。

    ワードプレスのカスタマイズ・・htmlやcssの知識のない私には難しいです。
    「あ~これのことね」と早く言えるようになりたいです。

    情報ありがとうございます。

    • ゆう。 より:

      さっちさん、こんにちわ(^^)/

      ワードプレスのhtmlをいじると時って、実はphpの知識も必要だったりします。
      でもphpの前にhtmlを知っておくと、効率が全然違うので是非試してみて下さいね(^^)/

      1本、練習用に簡単なサイトを作るだけでも全然違いますよ(^^♪