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

    icon-clock-o読了時間:約5分42秒

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

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

メニュー項目の配置

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

上部メニューを作る

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

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

また、ボタンの作り方も、ボタン画像を作ってリンクを設定する方法と、
htmlタグとCSS装飾によってボタン風にする方法とがあります。
ボタン画像にリンクを設定する場合は、ペイントのようなソフトで自作ボタンを作るか、
ボタンメーカーのようなサイトで作ってみてください。

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

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

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

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

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

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

これで出来上がり。
メイン幅とメニュー幅、通常カラーとマウスオン時のカラーなど
工夫によって色々なメニューが出来ますので、色々と試してみてくださいね。
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だけでも
サイトのトップページにアクセスすることができます。

また、その他のページファイルもアップロードすればリンクが繋がり、
メニューをクリックするとページの移動ができるようになります。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket