Webサイトを作ろう!【10】横並びメニューをCSSで作る

WEBサイト作り方

前回記事Webサイトを作ろう!【9】複数ページを作るまでで、主なページを作成し終わったかと思います。
次は今まで作ってきたページを、サイトメニューとしてリンクで繋いでみましょう。

今回はページの上部に横並びのメニューを作る方法を、次回の記事で左サイドバーの中に縦並びのメニューを作る方法をご説明します。

メニュー項目の配置

サイトのページ構成=メニューの設置場所はサイト上部か、左右のサイドであることが多いです。
たまに一番下にしているひとも居ますが、その辺りはお好みですね。
メニューの配置

上部メニューを作る

それではまず上部にメニューを設置するとしましょう。
最初に大切なのは設置する場所の幅です。

今回の例であればメニューにしたい項目は5つ。
メインの幅を800pxに設定していれば、ひとつのメニューボタンに使える幅は最大で160pxということになります。
ただこれも単純に160pxの幅でボタンを作ればいいという訳ではなく、隙間をどうするか、囲み線をどうするかなどその幅によってボタンそのものの幅も決まってきます。

また、ボタンの作り方も、ボタン画像を作ってリンクを設定する方法と、htmlタグとCSS装飾によってボタン風にする方法とがあります。
ボタン画像にリンクを設定する場合は、ペイントのようなソフトで自作ボタンを作るか、ボタンメーカー(SSL化されてないのでお使いのブラウザによっては表示できません)のようなサイトで作ってみてください。

ここではCSSでボタン風の装飾を行う方法をご紹介します。
全体としてはこんな感じになる予定とします。
ちなみに今回は車屋さんとか美容室さんのイメージでカラーリングを変えてみました。次回はカフェとか雑貨屋さんのイメージで行こうと思います。
トップページ作成例
上部のメニューだけ見るとこんな感じ。
上部メニュー
マウスカーソルを乗せると配色が変わるようにします。

タグとCSSで作るメニューボタン

メニュー部分のhtmlソースコードにはリストタグとリンクタグが含まれます。
これをトップ画像の下など、メニューを配置したい場所に記述します。

※メニュー名称や ○○.html というファイル名は例として記述しているものですので、ご自分の作ったファイルに合わせて変更してくださいね。

メニューボタン
<div id=”menu”>
<ul>
<li><a href=”news.html”>更新情報</a></li>
<li><a href=”text.htmlk”>文書</a></li>
<li><a href=”photo.html”>画像</a></li>
<li><a href=”mail.html”>お問い合わせ</a></li>
<li><a href=”link.html”>リンク</a></li>
</ul>
</div>

次に幅やカラーを決めるCSSを記述します。
前回までと同じく、『 index.html 』ファイルの中に合わせて記述するものとして<head>~</head> の中に以下のCSSを追加してください。

 ※CSSを独立した『 index.css 』ファイルとして作成して、『 index.html 』に呼び出して使う方法については次の記事Webサイトを作ろう!【11】縦並びメニューをCSSで作るをご覧ください。

メニューボタン
<head>
<style type=”text/css”>
/* ページ全体 */
/* 文字のフォント、カラー、メインの幅を決めています */
body {
font-family:”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
font-size:95%;
color:#333;
background-color:#fff;
width: 800px;
}
/* 上部メニュー */
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
padding: 0;
margin: 0;
float: left;
}
#menu li a {
display: block;
border: 1px solid #666;
background-color: #000;
padding: 3px;
text-decoration: none;
color: #FFC;
width: 150px;
margin: 1px;
text-align: center;
font-size: 16px;
}
/* マウスカーソルを合わせた時 */
#menu li a:hover {
background-color: #C30;
color: #fff;
}
</style>
</head>

これで出来上がり。
メイン幅とメニュー幅、通常カラーとマウスオン時のカラーなど工夫によって色々なメニューが出来ますので、色々と試してみてくださいね。
CSSのそれぞれの項目の細かいご説明については 【 12 】スタイルシート(CSS)の解説 の記事にて。

余白とボタンの幅について

上のコードの場合、1つのボタンに対して余白やボーダーを設定し、ボタン幅を150pxにしてから、ページ幅800pxに合うように余白とボーダーの太さで調節しています。
上部メニュー幅の解説
1つのボタンに対してのmarginとpaddingなので、ボタンが並んだ間には2つぶんの余白があります。
逆に左右の両端には1つぶんの余白しかありません。
ここで計算を間違えると変な隙間が空いたり、ボタンが一つだけ下に回りこんでしまったりして見た目が微妙なことになるので要注意です。
ボタン 150px × 5つ = 750px
border: 1px × 10箇所ぶん = 10px
padding: 3px × 10箇所ぶん = 30px
margin: 1px × 10箇所ぶん = 10px
———————————————-
以上合計で800px


この要領で、ボーダーのみ指定して余白を無しにしたり、右にだけpaddingを指定したり、
1つのボタンにはボーダーを指定してメニュー全体にはmarginを指定したり、というように
お好みで隙間やボタン幅の調節が可能です。

FTPソフトでアップロードする

編集した『 index.html 』ファイルをサーバーへアップロードしましょう。
アップロードが無事完了すれば、http://あなたのドメイン/index.htmlというURLにアクセスするとCSSスタイルが適用された状態のトップページが表示されるはずです。

ちなみに index.html はトップページ、という暗黙の了解があるため、index.html を省略して http://あなたのドメイン というURLだけでもサイトのトップページにアクセスすることができます。
また、その他のページファイルもアップロードすればリンクが繋がり、メニューをクリックするとページの移動ができるようになります。

Webサイトを作ろう!:シリーズ記事

【1】レンタルサーバーとドメイン
【2】必要なソフトを準備する
【3】ページの構成を考える
【4】テーマカラーを決める
【5】トップページと画像を用意
【6】トップページの一例
【7】HTMLソースコードの解説①
【8】HTMLソースコードの解説②
【9】複数ページを作る
【10】横並びメニューをCSSで作る(この記事です)
【11】縦並びメニューをCSSで作る
【12】スタイルシート(CSS)の解説
【 番外編1 】画像編集ソフト・素材サイト
【 番外編2 】商用利用OKな無料素材
「Webサイトはこうしてもらえると嬉しい」という個人的な希望

タイトルとURLをコピーしました