💁♂️ 【お知らせ】塾専用HP作成サービス
こんにちは！
takafumiです。
『5日で学ぶ！ HTMLで作るはじめてのWordPressテーマ』の2日目になりました。
これまで、divとCSSを使ってheaderやcontent、footerといったページの骨組みを一緒に作ってきました。
2日目の今日は、ヘッダー部分のタイトルやメニューを作り込んでいきましょう。
ウェブサイトではよく見られるデザインです。
ここで、基礎をしっかりと学んで自分だけのメニューが作れるようになりましょう！
それでは、レッスンスタートです。
目次
ヘッダー内の構造について
これから実際にヘッダーを作る前に、その中の構造を少しみてみましょう。
実はこのヘッダー部分ですが、header_top、header_title、header_copy、<nav>タグの4つのパーツが合わさってできているんです。
今日のレッスンでは、それぞれのパーツを作成してヘッダー部分を完成させましょう！
header_topをつくろう
最初に作るのはheader_topの部分になります。
ここには、サイトのタイトルとコピーを収めるheader_titleとheader_copyが後ほど入ります。
header_topはheaderブロックの子要素なので、HTMLで記述するときもidがheaderのdiv要素内に書いていきます。
<div id="header">
<div id="header_top">
</div>
</div>style.cssを開いて、#header_topを定義しましょう。
属性を追加することで、高さと背景色が黄色になるようにしました。
text-align:center;とすることで、要素内の文字がすべて中央揃えになるようにしています。
/* ヘッダートップ */
#header_top {
background-color: #F8E81C;
height: 130px;
text-align: center;
}ファイルを保存して、ページをリロードしてみましょう！
黄色いボックスが画面上にできましたね。
header_titleをつくろう
次はheader_titleの部分をつくります。
header_titleにはupdate.comというブログのタイトル名がはいります。
idにheader_titleをもつ<span>タグをheader_topの中に追加します。
<div id="header">
<div id="header_top">
<span id="header_title">update.com</span>
</div>
</div>ファイルを保存して、ページをリロードしてみましょう。
header_titleになにもスタイルを追加していないので、タイトル感がありませんよね？
そこで、style.cssにheader_titleのidを定義します。
文字の色や大きさを指定する属性を追加しましょう。
/* ヘッダータイトル */
#header_title {
color: #000;
display: inline-block;
font-size: 40px;
margin-top:20px;
}保存してページをリロードしてみましょう！
『update.com』というテキストが目立って、タイトルらしくなりましたね。
header_copyをつくろう
ブログタイトル下にあるコピーを表示するための、<span>タグを追加します。
この<span>タグにはheader_copyというidを割り振っておきましょう。
<span>タグには改行が入らないので、<br>タグで改行をしています。
<div id="header_top">
<span id="header_title">update.com</span><br>
<span id="header_copy">変化の早い時代に必要な知識をあなたへ
</span>
</div>
style.cssにheader_copyのidを定義しちゃいましょう。
コピーの下に点線を入れるために、border-bottomを追加しています。
/* ヘッダーコピー */
#header_copy {
border-bottom: 1px dashed #000000;
font-size: 15px;
padding-bottom: 5px;
}ファイルを保存して、リロードしてください。
タイトルのしたにコピーが追加されたことで、よりブログのコンセプトが伝わりやすくなりましたね！
ヘッダーのタイトルやコピーが完成したので、つぎはメニューの<nav>部分をつくります。
ウェブサイトやブログのメニューを作るときには、<nav>というタグを使います。
メニュー部分をちゃんと、<nav>タグで囲うことでSEO的にも適したページ構成になります。
header_topがidとして割り当てられた<div>の下に、<nav>タグを追加します。
<nav>の中には、<ul>と<li>タグを使って、各メニューを作ります。
<div id="header_top">
<span id="header_title">update.com</span><br>
<span id="header_copy">変化の早い時代に必要な知識をあなたへ
</span>
</div>
<nav>
<ul>
<li>ホーム</li>
<li>ライフ</li>
<li>ガジェット</li>
<li>アプリ</li>
<li>スタートアップ</li>
</ul>
</nav>一度、保存してリロードしてみましょう。
「ホーム」や「ライフ」などが縦に並んでしまっていますね。
これは、<li>タグのdisplay属性がデフォルトではblockになっているからです。
blockだと、<li>タグの前後に自動的に改行が入ってしまうため、縦に要素が並んでしまっているんです。。
<nav>タグにたいして、スタイルを追加しましょう。
style.cssに#header nav { } という形で定義してみましょう。
/* ヘッダー内のメニュー */
#header nav {
height: 60px;
margin: 0 auto;
width: 1150px;
}スタイルでは幅と高さを指定しています。
margin: 0 auto;を追加することで、<nav>要素がページの中央に配置されるようになります！
ulタグにスタイルを追加しよう
デフォルトの<ul> タグにはmarginやpaddingが設定されています。
これがレイアウト時には厄介なことになってしまうので、一部をリセットしましょう。
また、高さも指定します。
#header nav ul {
height: 40px;
margin: 10px 0px 0px 0px;
padding-left: 0px;
}
liタグを横並びにしよう
いよいよ、各メニューを表示する<li>タグの部分をつくっていきます。
以前にも話したように、メニューが縦に並んでしまうのは<li>タグのdisplay属性によるものでしたね。
ということは、display属性の値を「block」以外のものにすればいいのです。
style.cssに<li>タグのスタイルを変更するために、次のように記述してみましょう。
#header nav ul li {
border-right: 1px solid #8D8D8D;
color: #fff;
display: inline-block;
font-size: 25px;
font-weight: bold;
line-height: 40px;
}displayにinline-blockを指定することで、<li>タグの前後に挿入される改行を消すことができます。
また、border-rightを追加することで<li>タグで生成される要素の右辺に灰色の線を描くことができます。
#headerブロックの背景色を黒に指定するのを忘れないようにしておいてください。
/* ヘッダー部分 */
#header {
height: 190px;
min-width: 1300px;
background-color: #000;
}ページをリロードして、確認してみてください。
各メニューの間隔を調整しよう
メニューをよーーく見てみると、各メニュー同士の間隔が近すぎて窮屈な印象ですよね。
これは、padding属性を使って<li>タグにの右側と左側に余白をつくることで解決することができます。
style.cssにpadding属性を追加してみましょう！
#header nav ul li {
border-right: 1px solid #8D8D8D;
color: #fff;
display: inline-block;
font-size: 25px;
font-weight: bold;
line-height: 40px;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
ページをリロードすると、各メニューの間隔がいい感じになっているのがわかるとおもいます。
一番最初の要素に区切り線を追加しよう
メニューをみると問題がないように見えるのですが、『ホーム』の左側に区切り線がありません。
メニュー周りをスッキリさせるために、一番最初の要素にだけ線を追加してみましょう。
<li>タグの中でも、一番最初の<li>タグを指定する場合には li:first-child と記述します。
#header nav ul li:first-child {
border-left: 1px solid #8D8D8D;
}最初の要素だけ左辺に線を追加するので、border-left属性を追加します。
ページをリロードしてみましょう！
最初の要素だけに、ちゃんと区切り線が追加されました！
今日のレッスンはここまで！
おつかれ様でした！
今日のレッスンはここで終了です。
今日はheaderブロックの中に要素を追加して、タイトルやコピー、メニューなどを作りました。
ヘッダー部分ができたことで、ウェブサイト感がとても高まってきたと思います。
次のレッスンでは記事一覧を表示する部分をHTMLで書いていきましょう！
続きが気になる場合は『WordPressに投稿された記事一覧を表示するHTMLを作ってみよう』へお進みください。
