電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

HTML/CSSナビゲーションの作成方法「グローバルナビとサイドナビ」

calendar

ホームページ作成の第4回です。

前回はheader、footer、side、の部分を記述しました。↓

ある程度WEBサイトらしくなってきましたが、「ナビゲーション」を設置する事によって利便性と見栄えが良くなります。

今回はPC画面のグローバルナビゲーションと、スマホ画面のサイドナビゲーションを記述していきたいと思います。

レスポンシブでナビゲーション表示が変わる仕組みです。

※今回はナビゲーションを多層化していません。

スポンサーリンク

グローバルナビゲーション

グローバルナビゲーションのHTML

header要素内、メインビジュアルになっているheader classsの下に<nav>クラスを作成し、その中にリストの要素<ul><li>を記述します。

今回ナビゲーション項目は5つ作成しますので、5つ分の内部リンク<a>を指定する必要があります。

とりあえず1つの項目はhomeとし、リンクを”index.html”としますが、他は適当に上の感じにしておきます。

グローバルナビゲーションのcss

上記内容を追加します。

nav ul li classで縦並びになっているブロック要素を横並びに変更します。

変更は、display:inline-block;で可能になります。

widthで1つのli要素幅を20%にします。つまり、li要素は5つあるので、画面いっぱいに均等な大きさの要素が横並びで表示されます。

border:solidで要素に枠線を引きます。

box-sizing:border-box;で、要素の枠線を要素内に収めます。これをしないとli要素の幅が20%を超えてしまいます。合計で100%超えちゃうんではみでちゃうんですね。

最後に1つポイント、最上段のnav ul classでfont-sizeを0にしています。

実は複数の文字列をインラインブロックで表示させたとき、間に少し隙間が出来てしまうんです。ですので、これもliの幅を20%にしていても100%に収まらずはみ出てしまいます。

これを解消するには、親要素で一旦font-sizeを0にし、li要素で再度font-sizeを設定する事が必要になります。

a要素の記述は、文字の色、文字の下線消去、リンクを文字じゃなく要素で反応させる、上下幅を広げる、といった内容です。

hoverは、カーソルを乗せたときの文字色の変化、背景色の変化、文字を太文字に、といった内容です。

上記内容でこんな感じになります。↓

グローバルナビ画像

サイドナビゲーション(ハンバーガーメニュー)

サイドナビのhtml

少し変則的になります、header-logo-menu要素内にメインビジュアルであるtop classを移動させます。(一番下の部分)

ちなみにこの記述の下に前途したグローバルナビの記述が入ります。

<ul><li>の内容はグローバルナビと同じですね。

上半分がハンバーガーメニューの記述になりますが、これはもうね、説明できません汗。すいません。

サイドナビのcss

4~11行目まではすでに記述済みですが、それ以外が追加となります。ほぼレスポンシブ(スマホ専用css)側の記述。

少し長いです。ハンバーガーメニューって、押せば横からにゅって出てくるやつなんで、記述もややこしいんですよね。

とりあえず要点を絞って説明します。

まず、一番上の共通部のcssで、#nav -drawer{display:non;}を追加しています。

これは、PC画面でサイドナビが出ないようにする記述です。#nav -drawer要素を表示させないって事ですね。ただし、共通部のcssなんで、スマホも表示されなくなります。ですからスマホ用のcssの所で再度表示させる記述#nav- drawer{display:inline-block;}を入れなければなりません。

逆に、スマホでPCのグローバルナビを表示させたくないので、レスポンシブ側の記述(@media…以下の部分)に.nav{display:non;}を記述も必要です。

ハンバーガーメニューの要点は、まず”アイコンのスペース”のメモがある記述です。ここはメモ書きの通りアイコンの位置を調整する記述ですので、paddingなどで調整します。

”ハンバーガーの形”では、3本線のメニュー色をbackgroundで指定できます。

”メニューの中身”のmax-widthで、横から出てくるサイドメニューの幅を指定できます。背景色も変更可能ですね。

あとはリストの調整ですね。

#nav-contentでリストの幅、文字色、などを決めていきます。ここはグローバルナビとほぼ同じですね。違うのは縦表示の”ブロック要素”である事。

完成はこんな感じです↓

パンくずリスト

パンくずリストのhtml

サイトの現在地を示すパンくずリストものっけておきます。

main要素画面の左上に表示させたいと思いますので、記述はmain class内に追加します。

今はindex.html、つまりトップページを作成しているので、<a>にはindex.htmlのリンクを記述。titleはhomeにしておきます。

パンくずリストのcss

cssは共通部に記述します。

breadcrumb classにpaddingで表示の位置決めをします。

後は色とかの設定になりますね。

こんな感じです。↓

パンくずリスト

HTML/CSSナビゲーションの作成方法「グローバルナビとサイドナビ」まとめ

今回でナビゲーションの設計まで終わりました。

念のためこれまでのhtml/cssをまとめておきます。

以上です。

次回はindex.html(home)以外の項目を増やしていきたいと思います。