シリーズ記事「初心者もできる！プログラミング基礎講座」の第7回は、ヘッダーにロゴとメニューを配置する方法です。前回解説した基本レイアウトの中のヘッダー部分に、ロゴやメニューを配置してみましょう。この部分を実践すれば、HTMLとCSSの関連が感覚的に分かってくると思います。
ロゴとメニューの目標物
今回は簡単に上の画像のようなヘッダーを作ってみましょう。ロゴとメニューリストを配置してみます。前回レイアウトで学習したヘッダー部分に記述していきましょう。HTMLで内容を書き、CSSでデザインしていきます。
HTML
前回最後に解説した通り、<header>タグ内にロゴとメニューリストを書いていきます。それぞれにCSSでスタイルをあてていくので<div>タグでグループ化してclass名をつけておきます。テキストエディタの補完機能を上手に活用していきましょう。
<body>
<header>
<div class="header-logo">プログラミング講座
</div>
<div class="header-list">
<ul>
<li>プログラミングとは</li>
<li>HTML</li>
<li>CSS</li>
<li>お問い合わせ</li>
</ul>
</div>
</header>
<div class="main">
<p>メインです</p>
</div>
<footer>
<p>フッターです</p>
</footer>
</body><header>タグ内に、2つの<div>要素があるのを確認できるでしょうか。class名をそれぞれ「header-logo」「header-list」にしています。レイアウトが分かりやすいように、mainとfooterもグループ化し、<p>タグで「メインです」「フッターです」と記述しました。
CSSでスタイルを指定していないと、つまりHTMLだけなら上の画像のように表示されると思います。これにCSSをあてながら目標物に近づけていきます。
CSS
まずレイアウトを分かりやすくしておきましょう。CSSに次のように記述します。
header {
background-color: #dddddd;
height: 100px;
}
.main {
background-color: lightblue;
height: 300px;
}
footer {
background-color: #dddddd
}簡単に解説すれば
ヘッダー部分
背景色：灰色
高さ：100px
メイン部分
背景色：ライトブルー
高さ：300px
フッター部分
背景色：灰色
という意味です。
前回までのおさらいですが、HTMLのタグをセレクタに指定する場合は .(ドット)は不要です。メイン部分のようにclass名をセレクタとしてしてする場合は .(ドット)が必要です。
このようにCSSで記述し、FTPソフトでファイル（index.htmlとstylesheet.css）をサーバにアップロードしてみましょう。ドメインに接続して表示の確認をします。
上の画像のように表示されます。レイアウトが背景色で分かりやすくなっていますが、ヘッダー内に記述したリストがヘッダーの枠に収まってない状態です。どうしたらよいでしょうか。
リストの最初にある黒丸を消し、リストそのものを横並びにします。
list-styleプロパティ
<li>（リスト）要素にlist-styleプロパティを使いnoneを指定すると、リストの最初にある黒丸を消すことができます。
floatプロパティ
floatプロパティを使うと、指定した要素を横並びにすることができます。float: left;を指定すると要素が左から順に横に並びます。
.header-list li {
list-style: none;
float: left;
}
HTMLでリストにはclass名「header-list」をつけました。おさらいですが、class名をセレクタに指定する場合は 始めに.(ドット)をつけます。また、今回はその中のリストにスタイルを指定するので、スペースを1つ開けてliと記述しています。単純にli（リスト）をセレクタに指定しても結果は同じですが、その場合、同じHTMLファイルに書いたすべてのli要素にCSSがあたってしまいます。ヘッダー部分のリストだけにしたい場合は、上記の通り記述します、その後、list-styleとfloatプロパティを記述します。実際にアップロードして確認してみましょう。
画像のように、メニューリストが左から順に横並びになっていればOKです。
さらに、目標物のようにロゴ（プログラミング講座）の横にメニューリストを並べにるはどうしたらよいでしょうか。HTMLでロゴにはclass名「header-logo」をつけました。これにもプロパティfloat: left;を指定することで、ロゴとリスト全体を横並びにすることができます。
.header-logo {
color: green;
font-size: 30px;
float: left;
}ロゴを分かりやすくするために、文字色をgreenに、フォントサイズを30pxにしています。そしてfloatプロパティでleftを指定します。
ロゴがCSSで指定した通り、文字色がgreenにフォントサイズが30pxとなり、その横にメニューリストが並んでいます。
目標物と比較すると、要素が詰まって並んでいるので見にくいですね。最後に余白をつけてデザインを整えていきます。
paddingプロパティ
それぞれの要素に余白を指定するためのプロパティがpaddingです。このプロパティを理解する上で「ボックスモデル」について簡単に解説します。
ボックスモデル
ボックスモデルとは、CSSの余白を明示した図のことです。中心にある青色の四角を要素として考えます。要素の周りにはborder（ボーダー）と呼ばれる線があり太さを指定できます。とらえ方としては、この線の
- 内側の余白：padding（パディング）
- 外側の余白：margin（マージン）
です。ボックスモデルについては、今後の回でもう少し詳しく解説したいと思います。今回はロゴとメニューリストにpaddingプロパティを用いて余白を指定し、見やすいスタイルにしたいと思います。
paddingもmarginも通常は以下の通り、上(top)から時計回りに記述していきます。
padding-top: 30px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 40px;
一列で短縮して記述する場合は
padding: 30px 40px 30px 40px;
と書きます。左から、上(top) 右(right) 下(bottom) 左(left)という時計回りの順番です。
例の場合は、上下の余白(30px)と左右の余白(40px)はそれぞれ同じなので、短縮して
padding: 30px 40px;
と書くことができます。上下 左右 という順番です。
上下左右がすべて同じ余白(30px)なら、さらに短縮して
padding: 30px;
と書くだけでOKです。
.header-list li {
list-style: none;
float: left;
padding: 35px 20px;
}
.header-logo {
color: green;
font-size: 30px;
float: left;
padding: 30px 40px;
}今回は上のように記述してみます。表示を確認してみてください。
目標物の通りになったでしょうか。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第7回】はいかがでしたか。少し長い記事になってしまいましたが、ヘッダーにロゴやメニューリストを配置する方法をかんたん解説しました。
プログラミングの勉強は”やってみる”ことが一番です。単に記事を読んだり説明を聞くだけでなく、今回のように学んだことをすぐに自分で書いてどんどん試してみてください。そうしていくうちにだんだんプログラミングに慣れ、書けるようになっていくと思いますよ！
次回は、引き続きHTMLとCSSの関係を記述しながら解説していきたいと思います。次回もお楽しみに！