基礎講座 (後編)

ナビゲーション基礎

サンプル株式会社vol.01

(難易度★★☆☆☆)
下記のサンプル通りに構築していきましょう。今回は、ヘッダー部分右上にテキストメニュー、ヘッダーの直下にグルーバルナビゲーションを配置します。※サンプルを見る

▶︎ ナビゲーション基礎資料を見る | ▶︎ イメージ素材DL

ナビゲーションを学ぶ

リセットCSSを読み込んでから、CSSを記述するとコーデイングが容易くなります。必ず、リセットCSSを先に読み込ませてから、style.cssを読み込ませましょう。順番を間違えると、何度書いてもリセットされてしまいます。下記のコードは、リセットCSSによるCDN(destyle.css)ですが、使いやすくてオススメです。スタイルシートは、<head> </head>内に記述しましょう。

ヘッダー部分

ロゴマークは、今回svgデータを使用しています。初期設定で、imgを100%に設定することで、ロゴは非常に大きくなるのでスタイルシートで制御していきます。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<!-- ①リセットCSS ----->
<link rel="stylesheet" href="https://unpkg.com/destyle.css@3.0.2/destyle.min.css">
<!-- ②これから記述するCSS ----->
<link href="css/style.css" rel="stylesheet">
</head>
<body>

<header>
<div class="header_inner">    
<h1 class="logo"><img src="images/logo.svg"></h1>       
       <nav>
       <ul>
       <li><a href="">お知らせ</a></li>
       <li><a href="">アクセス</a></li>
       <li><a href="">個人情報</a></li>
       <li><a href="">資料請求</a></li>
       </ul>
       </nav>
</div> 
</header>
</body>
</html>

CSS初期設定

スタイルシートで、最小限の初期設定を行いましょう。

body{font-family:sans-serif;/*----- フォントのスタイルをゴシック系にする*/
    color:#333;}
img{width:100%;}/*--------画像の大きさを一旦100%に指定しておく-----*/

ロゴの大きさを調整

headerの色を流し込んでみましょう。画面の端から端まで色がつくことがわかります。さらに、ロゴマークの大きさを50%に制御します。

header{
background-color:#ccc;
padding:10px;}

.header_inner .logo
 {max-width: 50%;}
/*-----ロゴ50%以下の大きさ*/

ロゴの大きさが半分になりました。max-widthは、(最高値)50%以上大きくならない設定になります。但し、一概に50%と言ってもデバイスが基準になるので、スマホとPCと比較するとかなり違いがあります。実際に、モニターやスマホ実機などで大きさを確認し、(単位をpxにする等)数値の調整が必要な場合もあります。

子孫セレクタについて(補足)

●セレクタとセレクタの間を、半角スペースで区切ると、ある特定の要素の子孫（入れ子構造）にあたる要素に適用することができます。【例】nav li (nav要素の中のliを指定する)
●セレクタ >（大なり）は、直下の要素を指定します。【例】nav > li (nav要素の直下のliを指定)

メインの枠内に格納する

ロゴマークとナビゲーションが、一定の距離から離れていかないよう「.header_inner」の中に格納します。.header_innnerは、横幅を指定し、ブラウザの中央に配置するようにします。.header_innnerの中に格納されている「ロゴマーク」「ナビゲーション」を横へ整列させるため、.header_innnerに「display:flex」と記述します。
※補足「横に並べたい子要素の(最も側近に値する)親要素」に、display:flexを記述する。

.header_innner {
            width: 90%;/*---------横幅90%に設定--------------*/
            max-width: 1000px;/*--かつ1000px以上大きくならない-----*/
            margin: 0 auto;/*中央配置*/
            display: flex;/*------ロゴの横にナビゲーションを配置する*/
            align-items: start;/*-----ロゴの横かつ上に配置*/
            }

flex要素とalign-itemsの関係

ロゴマークの横に、ナビゲーションが配置されました。align-itemsプロパティは、ロゴマークとの「縦軸」の配置を設定することができます。

align-items

ナビゲーションを整列させる

ロゴマークの横に、ナビゲーションが配列されたら今度は、ナビゲションのリスト「li」を横へ並べていきます。今回は、テキストのみの整列なので「display:inline」を指定することで簡単に横に並びます。ここでは、「nav li」(navの中のli)に「display: inline」を記述することがポイントです。さらに、ロゴとnavを左右の隅へ配置しましょう。

.header_inner nav li {
display: inline;/*---- 横へ整列させる------------*/
margin-right: 1rem;/*---- 間隔を開ける---------*/}

.header_inner nav {
margin-left: auto;}*---- header_innerの最も右端へ配置させる*/

これでヘッダー部分は、完成となります。必要に応じて、フォントサイズや擬似リンクの設定なども行います。

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

ヘッダーの下に「グローバルナビゲーション」を配置します。

<div class="g_nav">
        <ul>
            <li><a href="">会社概要</a></li>
            <li><a href="">サービス</a></li>
            <li><a href="">採用情報</a></li>
            <li><a href="">お問い合わせ</a></li>
        </ul>
    </div>

CSSには、以下の記述をします。

.g_nav {
background-color: #eee;
}

.g_nav ul {
max-width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
text-align: center;
}

.g_nav li a {
display: block;
color: #333;
white-space: nowrap;
padding: 15px;
}

.g_nav li {
width: 25%;
border-right: 1px solid #ccc;
}

.g_nav li:first-child {
border-left: solid 1px #ccc;/*最初のリストには、左側にボーダーを入れる*/
}
TOP