ホームページやブログのヘッダーの作り方をマスター【css】

ヘッダーの作り方

※このページは「html入門!初心者でも見るだけで自由自在に」の続きです。

cssの基本も一通り紹介したので、WEBページ全体の構造を作ってみよう!【html入門】で作ってもらったhtmlファイルを使ってホームページデザインしてみましょう! 実際にcssを使ってみることで覚える気0でも覚えちゃいますので、ぜひやってみて下さい。

仕組みさえ覚えちゃえば、今までお金を払ってしか実現できなかったことが自分でできるようになります。 業者に頼むとめちゃ高い見積もりになるようなサイトでも、自分で簡単にすぐ作れるようになるので、ぜひ仕組みだけ覚えて下さいね(^^♪ あ!それと今まで紹介してきたcssが「イマイチ理解できないw」って場合でも、一度ホームページを作ってみるとある程度理解できるので安心して下さいね。 そもそも作る前に説明しても、分からなくて当たり前だったりしますのでw

練習用ページのデザイン

まずはcssの練習として、上のようなホームページ?ブログ?と全く同じのを作って見ましょう。

まずはヘッダーのデザインからしていきます。 このページでは、ヘッダー全体の表示サイズと背景色の設定を行い、ヘッダーの背景画像の表示、テキストサイズとフォントの設定を行っていきます。

※htmlドキュメントでのヘッダーの作り方が知りたい場合は「WEBページ全体の構造を作ってみよう!【html入門】」をご覧ください。

目次
ヘッダーを作る前の準備
ヘッダーのサイズと背景色を設定しよう

ヘッダーを作る前の準備

下は「WEBページ全体の構造を作ってみよう!【html入門】」で作成してもらった、htmlドキュメントです。 これを元にしてホームページをデザインしていきます。

そんなファイルもうないよ」って時は、下のhtmlドキュメントをコピペして、名前index.htmlとして保存してみて下さい。 文字コードはutf-8を設定して下さい。

※文字コードやhtmlファイルの保存方法については「htmlファイルの実践的な作り方を覚えよう!」のページの「作成したhtmlファイル(ドキュメント)を保存しよう」の部分をご覧ください。

<!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>

※「WEBページ全体の構造を作ってみよう!【html入門】」で作成して頂いた内容から一部、練習用に変更させていただきました。(あと記述漏れがあった部分を修正)
ですので、申し訳ないですがこちらのhtmlテキストを参考にして下さい。
変更・追加箇所・・・header内の文章を変更しpタグを追加。footer内の文章にpタグを追加。

ヘッダーをデザインする前にcssファイルを作成して、下記のコードを上のhtmlドキュメントに追記して下さい。 これで作ったcssファイルにcssを記述するだけで、htmlドキュメントに反映されるようになります。

※cssファイルの作り方については「cssファイル作成と3つの記述方法!外部読み込みをマスター」をご覧ください。

<link rel="stylesheet" href="style.css">
/*href=""の部分にはcssファイル名を入力*/
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<link rel="stylesheet" href="style.css">  <!--左のように記述--> 
<title>html・css入門!初心者でも見るだけで自由自在に</title>
</head>
<body>

ヘッダーの設定に移る前にページの幅と背景を決めていなかったので、まずはそちらを設定します。

body{
  margin:0;
  padding:0;
  background:#f8f6ef;
}
#page{
  width:800px;
}

まずは上のコードをcssファイルに記述して下さい。

bodyで全体の背景の色を「#f8f6ef」と設定します。 そしてmargin、paddingを0にする事でbodyの余白がなくなりますので、ブラウザいっぱい(画面いっぱい)にbodyの背景「#f8f6ef」が表示されます。 ここでbodyにmargin:10px;とか数値を入れてしまうと、ブラウザの隅の方に白い隙間が空いてしまうので注意して下さい。

#pageにwidthを設定する事で、#pageで囲まれた部分の表示領域の幅を設定しています。 #pageでヘッダー、メインコンテンツ、フッターを囲んでいますので、ページを構成している各コンテンツの全体の幅をここで設定していると考えて下さい。

まー簡単にいうと、ヘッダー、メインコンテンツ、フッターの幅をここでまとめて設定しているというわけです。

ブラウザ表示例

cssに記述したらwebページをブラウザで表示してみましょう。 全体の表示領域が800pxに設定されましたね。 全体に左に寄っていますが、のちほどセンタリングしますのでご安心を

※ブラウザでの確認方法は、htmlファイルをダブルクリックするだけです。詳しくは「html・css入門!初心者でも見るだけで自由自在に」の「htmlを実際に書いてみよう」で紹介しています。

ヘッダーのサイズと背景色を設定しよう

ヘッダー(header)の表示サイズとヘッダー全体の背景色を設定しましょう。

headerはタイプセレクタで指定します。 タイプセレクタっていうのは簡単に言うとheader{}で指定することをいいます。 用語は覚えなくていいので気にしないで下さい。

※タイプセレクタについては「css入門!初心者でもできるスタイルシート基礎講座と使い方」をご覧ください。目次を見ればすぐです。

header{
  margin:0;
  padding:0;
  width:100%;
  height:170px;
  background:#fff;
}
css(プロパティ) 意味
margin:0; 上下左右のマージンを0にする
padding:0; 上下左右のパディングを0にする
width:100%; 幅を100%にする。#pageでwidthを800pxにしてるので、headerのwidth:100%;にするとheaderの幅は800pxになる。もしここで50%にしたらheaderの幅は400pxになる
height:170px; 高さが170pxになる
background:#fff; 背景の色が#fff(白)になる

作成予定の練習用ホームページのヘッダーは、余白を開けてないのでmarginとpaddingを0にします。 幅もフルに使っているので、100%にします。 もしもヘッダーに1pxのボーダー(border)を設定したい場合は、widthは798pxになります。

例えばヘッダーにborder:solid 1px red;(上下左右に1pxの赤色の一本線)とした場合、左右に1px(左右合計2px)のボーダーが表示されます。 そうするとヘッダーの合計幅は802pxとなってしまいますよね。 なのでもしも左右にボーダーを追加したい場合は、ヘッダーの全体幅からボーダーの幅は引いた分の798pxを設定します。

ですが練習用ページでは、ボーダーは使っていません。 なのでヘッダーの幅を100%(800px)にするというわけです。

1pxのボーダーをつける場合(幅)
798px(ヘッダーの要素の幅)+1px(左のボーダー)+1px(右のボーダー)=800px(ヘッダー全体の幅)

※初期設定では、ボーダーは要素(headerやh1など)の高さ(height)に含まれてませんので、高さの場合も考え方は基本同じです。

高さ(height)は、ヘッダーで使用している右側の画像の高さを170pxにしたいので170pxで設定します。 では実際にcssファイルに記述してみましょう!

ヘッダーの背景色と高さの表示例

ヘッダーの背景色やサイズが変わりましたでしょうか? きっと大丈夫ですね(^^♪ では次はヘッダーに背景イメージ(画像)を設定しましょう。

ヘッダーの背景イメージ(画像)を設定しよう

背景色とサイズの次は、ヘッダーの背景イメージの設定です。

背景イメージの設定は、background-imageプロパティに画像ファイルへのパス(画像のurl)を記述するだけです。 で、背景イメージが表示されたら位置をbackground-positionで位置を設定するだけなので、とっても簡単です。

header{
  margin:0;
  padding:0;
  width:100%;
  height:170px;
  background:#fff;

  background-image:url(../test.jpg); /*ここから追記*/
  background-position:right;
  background-repeat:no-repeat;
}

※背景イメージ(backgroundプロパティ)全般については「【css】背景(backgroundプロパティ)の使い方」で紹介していますので、イマイチな場合はそちらをご覧ください。

background-image:url();ヘッダーの背景に表示したい画像ファイルを読み込んでます。

()内に記述するパス(url)の書き方については相対パスと絶対パス、サイトルートの使い方とデメリットで詳しく紹介していますので、そちらをご覧ください。 イマイチわかんないって場合は、http:~から始まる画像のurlを全部()内に記述すれば表示されます。 画像のurlの調べ方がわかんないって場合は、サーバーに画像をアップして画像を右クリックでurlを調べるのが最初は一番わかりやすいと思います。

ちなみに練習用ページでは下の画像を使っています。 実際に練習する時使って見て下さい。右クリックでダウンロードできます。

※素材サイトの写真を編集したものですので、練習以外で使用しないで下さい。再配布禁止だった気がしたので、練習が終わったら削除しておいて下さいね。

背景イメージ画像の練習用素材

背景イメージの位置を決める

header{
  margin:0;
  padding:0;
  width:100%;
  height:170px;
  background:#fff;

  background-image:url(../test.jpg); /*ここから追記*/
  background-position:right;
  background-repeat:no-repeat;
}

ヘッダーのbackground-imageを入力したら、次は背景イメージの位置を決めます。

練習用ページでは、背景画像が右に寄ってますので「right」というように記述します。 ヘッダーに使っている背景画像のサイズは「横400px、縦170px」の画像を使っているので、background-position:right;のみで右寄せになります。

background-position:right center;というように記述しなくていいの?と思うかもしれませんが、大丈夫です。 ヘッダーの背景画像の縦サイズは170pxです。 なので、縦の位置をtop、center、bottomのどれにしても位置はかわりません。

background-position:right;のように一つ記述しなかった場合は縦の位置がautoになります。 ヘッダーの背景画像のサイズがピッタリなので、縦の位置がautoでも問題ないというわけです。

そしてヘッダーの背景画像は、繰り返す必要がないのでbackground-repeatをno-repeatにしましょう。 ちなみにbackground-repeatを設定しないと背景画像が繰り返されちゃうので、必ず設定しましょうね

ヘッダー背景イメージ(画像)の表示例

では、htmlファイルをダブルクリックしてブラウザで確認してみましょう!

ちなみにhtmlファイルをダブルクリックしてブラウザで確認する場合、background-image:url();にサイトルートパスで入力すると背景画像は表示されません。 相対パスで入力したのに表示されないんだけどwって時は、たぶん「../」を付ける数をミスってる可能性が高いです。 あと.jpg(拡張子)とかの部分が抜けてたりする可能性もあります。

表示されねーw意味不明w」って時は、とりあえず絶対パスを入力しとけば確実に表示されるので、やってみましょう!絶対パスもわかんねww」って時は、index.html(作ってもらったhtmlファイル)と画像ファイルとcssファイルを同じフォルダに入れて下さい。 そしてbackground-image:url(画像ファイル名);のように記述してもらえれば100%表示されます。

例えば、画像ファイル名がtest.jpgの場合は「/」とか何もつけずにそのまま入力して下さい。 これで確実に表示されます。(.jpgや.gifなどの付け忘れに注意)

ヘッダーのフォントと行揃えを設定しよう

あとはヘッダーのフォントと行揃えを設定すれば大体終了です。

フォントというのは、コンピューターで文字を表示したり印刷する時の文字の形の事です。 windowsなどのosには、初期の状態でゴシックなど色々なフォントが入っているので、cssでフォント名やサイズを指定してあげることで自分の好きな形の文字にすることができます。

フォントの詳しい設定方法については下のページをご覧ください。

header{
  margin:0;
  padding:0;
  width:100%;
  height:170px;
  background:#fff;
  background-image:url(../test.jpg);
  background-position:right;
  background-repeat:no-repeat;

  font-weight:bold;   /*ここから追記*/
  font-size:18px;
  font-family:'Yu Mincho', meiryo ,sans-serif;
  text-align:center;
  color:#40361f;
}

練習用ページのヘッダーの文字は、明朝系のフォントになっています。 なので「'Yu Mincho'」を指定します。

※'Yu Mincho'はwindows8.1以降にのみ対応していた気がしたので、もしかしたらうまく反映されないかもしれません。 その場合meiryoが表示されるだけですので、気にしないで下さい。

なんでフォント名を複数書いているのか?」などフォントについて詳しくは上のフォントについてのページで紹介しますね。

あとフォントのサイズ(font-size)を18pxに設定しましょう。 そしてfont-weightで太さを調整できるのでfont-weight:bold;と入力します。 ヘッダーの文字の色は「#40361f」ですので、colorでテキストの色を指定します。

font-family:’MS Pゴシック’, Meiryo, sans-serif;というような「’」シングルクォーテーション、もしくは「”」ダブルクォーテーションが付いたフォント名を見かける事があると思います。

どういうときに「’」「”」のような引用符をつけるかというと、フォント名にスペースが入っている場合です。 「MS Pゴシック」でいえばMSとPゴシックの間にスペースが入っていますよね。 こういう時に引用符を付けます。

詳しくは上のフォントについてのページで紹介していますのでご覧ください。

テキストの行揃え

header{
  margin:0;
  padding:0;
  width:100%;
  height:170px;
  background:#fff;
  background-image:url(../test.jpg);
  background-position:right;
  background-repeat:no-repeat;
  
  font-weight:bold;/*ここから追記*/
  font-size:18px;
  font-family:'Yu Mincho', meiryo ,sans-serif;
  text-align:center;
  color:#40361f;
}

次はヘッダーテキストの行揃えです。 テキストの行揃えにはtext-alignプロパティを使います。

text-alignプロパティについて詳しくは下のページ

練習用ページのヘッダーテキストは、中央揃えになっていますよね。 なのでテキストを中央に寄せるためにtext-align:center;と記述します。

centerと記述する事で、テキストが中央揃えとなります。

ヘッダーのテキストの行揃えとフォントの表示例

ではブラウザで確認してみましょう!

ヘッダーの真ん中にテキストが表示されていますよね。 これでは練習用ページのヘッダーとちょっと違うのでこれから位置の設定をしていきます。

ヘッダーテキストの位置を調整しよう

ヘッダーのテキストをみると、途中で改行されていますね。 なので改行するためにspanを使います

改行や行間を開ける時は、どんな時でもbrタグを使うっていう人もいますが、絶対やめましょう! 理由は長くなるのでseoについての記事で説明しますが、見た目のためだけに改行する場合は基本的にはspanを使いましょうね。

spanの詳しい使い方は下のページへ

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

まずはspanを使って改行するために、上のようにヘッダーテキストの中にspanを記述します。

※class属性の使い方については「css入門!初心者でもできるスタイルシート基礎講座と使い方」をご覧ください。

span.br{
  display:block;
}

次にspanで改行するために、display:block;と記述します。 こうする事でインライン要素であるspanがブロック要素になるので改行されるわけです。

といっても最初はわかりづらいですよね。 なのでspanにdisplay:block;を設定すると改行されるようになると思ってください。

ちなみにbrタグを使っても見た目は全く同じになります。 ですけど検索エンジンに伝える意味が全く違うので、こういう見た目のために改行する場合はspanを使いましょう!

インライン要素とブロック要素については下のページへ

ヘッダーテキストの改行の表示例

確認してみるとちょっと練習用ページのヘッダーの形に近づいてきました! あとはヘッダーのテキストを左に寄せます。

テキストを移動させよう

練習用ページを見るとヘッダーテキストは、左側の真ん中にありますね。 ですがヘッダーテキストは、現在text-align:center;で中央表示となっていますよね。

なのでこういう場合は、ヘッダーテキストの右側半分にpaddingで余白を設定してあげればokです。 そうすればヘッダーのテキストは、左側の真ん中に表示されるようになります。

header p{
  margin:0;
  padding-right:50%;
}

こうする事でheaderの中のp要素(ヘッダーテキストの部分)右側50%に余白が設定されます。 あと初期のままではmarginが入っていますので、0にします。

ヘッダーのテキスト位置移動後の表示例 ヘッダーのテキストの余白と表示領域の解説

詳しく見ると画像のようになってます。

薄い緑の部分がヘッダーテキスト右側の余白(padding)部分です。 で、青い部分がヘッダーテキスト(header内のp要素)の領域となっています。

つまりheder{text-align:center;}でヘッダー内のテキストを中央揃えにしたので、あとはテキストの表示領域を半分にするだけで、左側の真ん中に表示されるようになるというわけです。

あとは縦の位置を調整する必要があるので、上に余白を付けてあげます。

header p{
  margin:0;
  padding-top:70px;  /*追記部分*/
  padding-right:50%;  
}

これでヘッダーテキストの上にも余白ができました。 なので下の画像のようになります。

ヘッダーのテキストの余白追加後の表示例

なんとなく完成に近づいてきましたよね。 いちおここまでが基本となるんですが、なんとなく分かったでしょうか?

こんな感じで実際にいじっていく事で、勝手にcssを覚えていきます 最初はちょっと苦労するかもしれませんが、最初だけなんで全然わかんなくても気にしないで下さい。

あ!それとローマ字の部分忘れてましたw ではこれからその部分の導入方法を説明しますね。

ヘッダーを装飾してみよう

ローマ字の部分の「Practice page」導入方法を紹介しますね。

やり方は何通りかあるんですが一番簡単なのは、ヘッダーの背景イメージで使う画像を編集する方法です。 これならhtml・cssの知識は関係ないので、すぐできますね。

ただ使う画像のサイズを800pxにして、左側を白にしてローマ字を追加するだけなんで一番簡単です。 このやり方の場合は、上で記述したcssを変更しなくてもokです。 もちろんhtmlも。

ですがフォトショップや編集ソフトがないと厳しいと思うので、cssで追加する方法も紹介しますね。 ただ、最初に紹介するような方法ではないと思うので、もしも意味不明だったら飛ばして下さい。

疑似要素を使っての装飾

疑似要素??」って感じだと思いますが、用語は気にしない下さい。

cssのみで「Practice page」の文字を追加します。 この場合、疑似要素の「:before、:after」のどちらかを使います。

before、afterの使い方は下のページへ

header p:before{
  content:"Practice page";
  color:#dfd7c3;
  font-weight:normal;
  font-size:19px;
  font-family:'SimSun', meiryo ,sans-serif;
}

まずはbeforeを使ってheader内のp要素(ヘッダーテキスト)の前に「Practice page」の文字を表示させます。 content:”Practice page”;と記述するだけで、テキストが表示されます。

で、テキストの色と文字の形、太さ、サイズを練習用ページのようにそれぞれ設定します。

ヘッダーにbeforeでテキストを追加した表示例

でもこのままだと「Practice page」の位置がおかしいですよね。 そこでpositionプロパティを使って「Practice page」の位置を調整します。

positionプロパティを使って位置を調整

positionプロパティの使い方はこちら

positionの詳しい使い方は上のページをご覧ください。

header内のp:beforeの位置をposition:absolute;を使って調整してあげます。 これをする事で自由な位置に移動できます。

ですがabsoluteを使うには、基準位置を決める必要があります。 なのでheder内のp要素を基準位置にしましょう! 基準位置はどこでもいいんですが、近い方が楽ですよねw

header p{
  position:relative; /*追記*/
}
header p:before{
  content:"Practice page";
  color:#dfd7c3;
  font-weight:normal;
  font-size:19px;
  font-family:'SimSun', meiryo ,sans-serif;

  position:absolute; /*ここから追記*/
  top:40px;
  left:140px;
}

heder内のp要素にrelativeを設定してあげる事で、ここが基準位置となりました。 あとは上のようにp:beforeの部分をabsoluteにして位置を調整するだけです。

top:40px;で基準位置の上から40px、left:140px;で基準位置の左から140pxの位置にp:beforeが表示されます。

ヘッダーの完成例

こんな感じになったと思うのですがどうでしょうか?? 色々な方法があるんですが、とりあえず一番シンプルな方法を紹介してみました!

簡単にいうと基準位置を作って、top・leftで位置を調整してるだけなのですぐできると思います。 こんな方法もあるよってことなので、わかんなかったら背景イメージの画像を編集しましょうね! それが一番簡単です(^^♪

とりあえずヘッダーの作成方法はこんな感じになります。 いかがでしたでしょうか?

デザインを作っていくのは結構面白くないですか(^^)/

次はいよいよナビゲーションメニューデザインを作っていきます! 最終的には、練習用ページくらいのは余裕で作れるようになるので、ぜひお付き合いください(#^^#) では次のページでお待ちしております!!

あ!それと練習用ページを作り終えたら、html5でコーディングした本格的なホームページの作り方を紹介していきます! 以上「ヘッダーの作り方」でしたー!