ヘッダー(画面上部)のHTMLとCSSをロゴマーク、グローバルナビゲーションと順に作成していきます。
ロゴマークの表示
画面上部(ヘッダー)にロゴマークを表示させます。
HTMLファイルの<body>タグの下に下記のソースコードを記述します。
HTML
<h1 id="logo"><a title="株式会社UNS" href="https://www.uns-j.co.jp/"><img title="株式会社UNS" src="https://www.uns-j.co.jp/wp/wp-content/uploads/tcd-w/logo.jpg?1476502598" alt="株式会社UNS" /></a></h1>
表示位置の指定を上から35ピクセル、左から14ピクセルとします。CSSのfloatプロパティを使い、下記のように指定します。
marginプロパティは値を4つ指定した場合、記述した順に[上][右][下][左]のマージンになります。
CSS
#logo {
float: left;
margin: 35px 0 0 14px;
}
IDセレクタ
特定のIDを持つ要素にスタイルシートを適用するには、IDセレクタを利用します。
「logo」というIDを持つ要素にスタイルシートを適用する場合、IDに「#(シャープ)」をつけて、セレクタを「#logo」と指定します。
グローバルナビゲーションの表示
画面上部(ヘッダー)のグローバルナビゲーションメニューを作成し、主要ページへアクセス出来るようにします。
主要ページへのリンクを用意します。
以下のように各タイトルは＜a＞でマークアップし、href属性でページのファイル名を指定します。
<a href="http://www.sample.com/service_navigate.html">事業内容</a> <a href="http://www.sample.com/company.html">会社概要</a> <a href="http://www.sample.com/company/recruit.html">採用情報</a> <a href="http://www.sample.com/column.html">コラム</a> <a href="http://www.sample.com/contact.html">お問い合わせ</a>
次に、それぞれのリンクはリスト形式の情報であることを明確にするため＜ul＞と＜li＞タグでマークアップします。
<ul> <li><a href="http://www.sample.com/service_navigate.html">事業内容</a></li> <li><a href="http://www.sample.com/company.html">会社概要</a></li> <li><a href="http://www.sample.com/company/recruit.html">採用情報</a></li> <li><a href="http://www.sample.com/column.html">コラム</a></li> <li><a href="http://www.sample.com/contact.html">お問い合わせ</a></li> </ul>
下記のように各リンクの行頭に黒丸のリストマークが表示され、箇条書きに表示されます。
リストをボタン化する
ul、li タグで左側の「・」（点）を表示させたくない場合、ulタグに「style=”list-style:none;”」指定します。
<ul style="list-style:none;">
左側の「・」（点）を消したら、縦並びのメニューを横並びに変えます。
CSS の display プロパティで「display:block」を指定します(CSSの 20,48行目)。
display:blockとは、インライン要素をブロックレベル要素扱いにするということで、ブロック化してはじめて幅と高さの指定が有効になります。
<ul>と<li>タグと画像を使い、リストをボタン化します。
HTML、CSSのソースコードは下記です。
CSSの4行目「#global_menu」で左端ホームボタンの横幅55pxと5個のボタンの横幅の合計1048pxとを合わせた横幅「width:1103px」を指定しています。
5個のボタンの1個当たり横幅は 1048 ÷ 5 = 209px で「#wrapper-light #global_menu li a」で指定します。
divタブのidのネーミングで wrapper はコンテンツ全体を囲んだ「包み」を意味します。
ネーミングは自由です。ここでは<div id=”global_menu”>より外側は<div id=”wrapper-light”>で囲んでいます。
5個のボタンは background-image プロパティで共通の下の画像 gnav_bg_light.jpg を使用します。
CSSによるナビゲーションメニュー画像のオンマウス(ロールオーバー)切替は様々な方法がありますが、ここでは1枚の画像をliのa要素の背景にして、その開始位置を上下に切り替えることで、画像が切り替わったように見せる方法を説明します。
通常の状態は background-position: top; を指定し、上の1枚の画像の上端から46pxを表示させます(CSSの 19,23行目)。
マウスオーバーでボタンの色を変化させるには
a:hover
と書き、aタグにマウスポインタが乗った時は background-position: bottom; を指定し、上の1枚の画像の中央から下の46pxを表示させます(CSSの 41,42行目)。
HTML
<div id="wrapper-light">
<div id="header-wrapper">
<!-- header -->
<div id="header">
<div id="header-inner" class="clearfix">
<div id="header-left">
<!-- logo -->
<div id="logo_image">
<h1 id="logo"><a title="株式会社UNS" href="https://www.uns-j.co.jp/"><img title="株式会社UNS" src="https://www.uns-j.co.jp/wp/wp-content/uploads/tcd-w/logo.jpg?1476502598" alt="株式会社UNS" /></a></h1>
</div>
</div>
<div id="header-right"></div>
<a class="menu_button" href="#">menu</a></div>
</div>
<!-- /header -->
<!-- global menu -->
<div id="global_menu" class="clearfix">
<div id="global_menu_home"><a href="https://www.uns-j.co.jp"><img src="https://www.uns-j.co.jp/wp/wp-content/themes/nextage_tcd021/images/home.png" alt="HOME" /> </a></div>
<ul id="menu-global-menu" class="menu">
<li><a href="http://www.sample.com/service_navigate.html">事業内容</a></li>
<li><a href="http://www.sample.com/company.html">会社概要</a></li>
<li><a href="http://www.sample.com/company/recruit.html">採用情報</a></li>
<li><a href="http://www.sample.com/column.html">コラム</a></li>
<li><a href="http://www.sample.com/contact.html">お問い合わせ</a></li>
</ul>
</div>
</div>
</div>
CSS
.menu_button {
display:none;
}
#global_menu {
height:46px;
width:1103px;
margin:0 auto;
z-index:9999;
}
#global_menu ul {
height:46px;
margin:0;
position:relative;
float: left;
width: 1048px;
}
#global_menu li {
float:left;
margin:0;
font-size:1%;
position:relative;
}
#global_menu li.last {
}
#global_menu li a {
font-size:14px;
font-weight:normal;
text-align:center;
text-decoration:none;
margin:0;
display:block;
height:46px;
line-height:46px;
}
#global_menu ul ul {
width:auto;
}
#global_menu_home {
width: 55px;
height: 46px;
float: left;
}
#wrapper-light #global_menu_home a {
width: 55px;
height: 46px;
display: block;
background-image: url(images/gnav_bg_light.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#wrapper-light #global_menu_home a:hover, #wrapper-light #global_menu_home a.hover {
background-position: left bottom;
}
#wrapper-light #global_menu ul {
background-image: url(images/gnav_line_light.png);
background-repeat: no-repeat;
background-position: right top;
}
#wrapper-light #global_menu li a {
width: 209px;
color: #000;
background-image: url(images/gnav_bg_light.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#wrapper-light #global_menu li a:hover, #wrapper-light #global_menu li a.hover {
background-position: left bottom;
}
#wrapper-light #global_menu ul ul {
display:none;
position:absolute;
top:46px;
left:0px;
margin:0;
padding:0;
list-style-type:none;
height: auto;
z-index:99999;
}
#wrapper-light #global_menu ul ul ul {
left:100%;
top:0;
margin:0;
}
#wrapper-light #global_menu ul ul li {
float:none;
height:auto;
line-height:0;
padding:0;
margin:0;
text-align:left;
background:none;
}
#wrapper-light #global_menu ul ul li a {
display: block;
font-size:14px;
position:relative;
height:40px;
padding: 0 20px;
line-height:40px;
margin:0;
text-align:left;
background-image: none;
background:#fff;
color:#fff;
}
#wrapper-light #global_menu ul ul a:hover {
background:#f2f2f2;
}
ヘッダー右側の検索ボックスの表示
ヘッダー右側の検索ボックスを表示させます。
HTMLは「div id=”header-left”」タグ(ロゴマークの記述)の下に「div id=”header-right”」タグを下記のように記述します。
検索窓の中の「SEARCH」文字をクリック（フォーカス）すると文字が消える仕組みは下記HTML6行目でJavaScriptで記述しています。
formタグは、検索ボタンが押されたときにaction属性で指定されたURLにフォームのデータを渡すようになっています(HTML4行目)。
HTML
<div id="header-right">
<!-- search -->
<div class="search_area">
<form id="searchform" action="https://www.uns-j.co.jp/" method="get">
<div id="search_button">
<input type="submit" value="SEARCH" />
</div>
<div id="search_input">
<input name="s" type="text" value="SEARCH" />
</div>
</form>
</div>
<!-- /search -->
</div>
CSS
.search_area {
width:300px;
height:35px;
position:absolute;
right:0px;
top:56px;
background:url(images/search_bg.png) no-repeat left 2px;
}
.search_area #search_input input {
font-size:12px;
color:#6d7478;
width:245px;
height:26px;
float:left;
margin:5px 0 0 10px;
padding:0;
border:none;
background:none;
}
.search_area #search_button input {
cursor:pointer;
float:right;
height:33px;
width:33px;
line-height:42px;
text-indent:150%;
white-space:nowrap;
overflow:hidden;
display:block;
border:none;
background:url(images/search_btn.png) no-repeat left top;
}
.search_area #search_button input:hover {
background-position:left bottom;
}
※グローバルナビゲーションの下の画像スライドショーは【第4回】JavaScriptを参照してjQueryプラグイン「FlexSlider」を設置してください。
この記事へのコメントはありません。