四回目ーーヘッダーに関してーー
ヘッダーに関して学びます。
上部メニューのレイアウトに関するプログラムの事です。
今回は『header』についてお話します。
『header』
Webページの上部メニューに値する部分を言います。
大きく分けて二つ――『ロゴ』と『リスト』に分けられます。
『ロゴ』は商品名、会社名、サイト名などのこと
『リスト』はサイトの内容の項目に値します。
手始めに前回のおさらいをしておきましょう。
ヘッダーの項目を表示させるには
<div class=”header”>
</div>
このように『HTML』ファイルに書かなければなりません。
『div』はグループ化――クラス名を付けることで『header』という名前のグループが出来上がったわけです。
そして、今回は上記の中にプログラムを書きヘッダーを作っていくことになります。
１．ヘッダーの構造
最初に説明しますと、『リスト』なので表示には『li』要素を使います。
即ち、『div』要素の中に『li』要素を入れることになるということです。
『li』要素の使い方は
<ul>
<li>NARUHO</li>
<li>TWO PIECE</li>
<li>Death Book</li>
</ul>
こうだったはずです。
しかし、これでは出力されるとリストの頭に『・』が表示されてしまいます。
それを解消する為に『CSS』ファイルに書き込まなければなりません。
それが
li {
list-style: none;
}
以上の三行となります。
以前にも『h1』要素の文字の大きさや色を変える為に
h1 {
color: red;
}
という文法を学んでいます。
今回は『h1』が『li』に置き換わり
『list-style』＝マーカーに関する指定を行うプログラム
これを使い
『none』＝無し――即ち『マーカーを無しにする』
結果、『・』を表示させずリストだけを表示させることが出来る様になります。
それでは実践に入ります。
例
『HTML』
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>コミック</title>
<link rel=”stylesheet” href=”stylesheet.css”>
</head>
<!--ここまでは定型文です-->
<body>
<!--『div』要素でヘッダーを作ります -->
<div class=”header”>
<!--『div』要素でヘッダーロゴを作ります -->
<div class=”header-logo”>Comic</div>
<!--『div』要素でヘッダーリストを作ります -->
<div class=”header-list”>
<!--先ほど説明したリストが入ります -->
<ul>
<li>NARUHO</li>
<li>TWO PIECE</li>
<li>Death Book</li>
</ul>
</div>
</div>
これ以降は『main』や『footer』に続くので省きます。
『CSS』
li {
list-style: none;
}
このように入るわけですが、前後には『body』要素の書体(font-family)や背景の色(background-color)が書きこまれたりします。
結果
(ヘッダー、上部メニュー)
comic
NARUHO
TWO PIECE
Death Book
このようにリストが『・』無しで表示されるようになります。
しかし、これでは縦列の表示となり、ロゴとリストの区分けもなっておらず、皆さんが知っている横列の表示にはなっていません。
※縦列のメニューもありますが、今回は横列です。
そこで必要となるのが『レイアウト』です。
それでは縦に並んでいるリストを横並びにしていきましょう。
２．ヘッダーのレイアウト
横並びにするのはいたって簡単で、『CSS』ファイルに書き込んだ『li』の項目の中に一行加えるだけで出来上がります。
それが
『float』＝浮かぶですが、HTMLでは左または右に寄せて配置させます。
後ろに左『left』か右『right』付け加えるだけです。
即ち
li {
list-style: none;
float: left;
}
となるだけの話なのです。
これで『li』の項目が縦並びから横並びに、順に並んでいくことになりました。
NARUHOTWO PIECEDeath Book
次に、これをヘッダーリストで行います。
ヘッダーリストには『li』だけでなくロゴも存在します。
『li』要素に『float』を付け加えるとロゴの下に並ぶ形となり
comic
NARUHOTWO PIECEDeath Book
という形となってしまいます。
これをロゴと一緒に横並びにするには『li』だけなく、ロゴとリストの両方にも『float』を付け加えなければなりません。
即ち
li {
list-style: none;
float: left;
}
.header-logo {
float: left;
}
.header-list {
float: left;
}
このような形で書くことになります。
『logo』にも加えるのは、ヘッダーの中の項目を横並びにする為です。ロゴが一つなので分かり難いですが、クラスが分かれている項目のロゴとリストを一行に横並びする、と考えれば少しは分かりやすいでしょう。
※注意事項としてロゴもリストも『class』と付けている為、リストを意味する『li』と異なり頭に【.】を付けなければなりません。
また、これではロゴとメニューの文字の大きさが同じとなる為
.header-logo {
font-size: 50px;
float: left;
}
二行目に加えても良いでしょう。
最後に、それぞれが窮屈にならないようにしていきたいと思います。
３．空白を作る
comicNARUHOTWO PIECEDeath Book
この形の表示が出来る様になったわけですが
これではどこで区切っているのかさっぱりわかりません。
そこで、それぞれの単語に空白を付けることで適切な位置に配置していきます。
comic NARUHO TWO PIECE Death Book
分かりやすくするとこんな感じです。
そのために使うのが
『padding』＝詰め物や水増しという意味がありますが
空白を詰める、空白で水増しと考えればいいです。
そして、普通に『padding』を使い数値を入力すると全体(上下左右の四カ所)が同じ数値の空白が出来てしまいます。
普通に使うならそれでいいのかもしれませんが、Webページのデザインとなるとそうもいきません。やはりバランスよく配置したいものでしょうから。
そこで何を使うかなど少し考えればわかると思います。
『top』＝上
『bottom』＝下
『left』＝左
『right』＝右
普通に英語で入力すればいい話です。
形としては、項目のクラスを指定して、どの方向に、その数値分空白を作る、とする感じです。
では、先ほどの例を使い空白を作りたいと思います。
ロゴの空白を上下23px、左右37px空けたい。
.header-logo {
float: left;
padding: 23px 37px 23px 37px;
}
リストの空白を上下12px、左右31px空けたい。
.header-list {
float: left;
padding: 12px 31px;
}
このような形となります。
なろうでは出力結果を表せないので分かり難いと思います。もう少し上達したら画像を作り添付しようと思っています。
ロゴの書き方は『上→右→下→左』と時計回りに指定されます。
リストは上下、左右の順に指定されます。
二つの書き方があるので気を付けなければなりません。
四つ全て、若しくは三つばらばら等なら先ほどの英単語を使い
padding-top: 数値px;
という形にしなければなりません。
これで皆さんが知っているようなロゴとリストがいい塩梅に横並びした、分かりやすく言うとなろうの上部メニューのようなものが出来上がります(若干違いますが)。
以上がヘッダーに関する話となります。
次はフッターに関しての説明をするので、引き続きよろしくお願いします。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
