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

    icon-clock-o読了時間:約4分21秒

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

サイドメニューがあるページの例

サイドバーにメニューを設置する方法です。

まずサイドバーを作るところから。
横並びのメニューよりもこういった縦並びのサイドバーメニューのほうがややこしいので、
最初は丸々コピーしてサイズやカラーのみ変更して使っていただいたほうが良いかもしれません。

 今度はカラーリングをカフェや雑貨屋さん風にしてみました。
 おしゃれな感じって難しい。

カフェ風ページ
サイドメニューだけ見るとこんな感じです。
マウスカーソルを乗せると配色が変わる設定になっています。
カフェ風メニュー

CSSファイルをhtmlファイルに適用させる

今までは『 index.html 』ファイルの中にCSSのスタイルを一緒に記述してきました。
しかし今回は記述するスタイルが多いため、独立したCSSファイルを作って『 index.html 』で
呼び出して使用する形にします。

まず先に『 index.html 』側に記述する内容から。

CSSファイルを呼び出すための記述

ヘッダ情報 <head>と</head>の間に以下のタグを記述します。

CSSスタイルを呼び出して適用させるために、CSSファイルへのリンクを貼る感じですね。

これで『 index.css 』というファイルを作ればこのページにはスタイルが適用されるようになりました。
ちなみにファイル名は特に揃える必要はないので、
『 honyarara.css 』や 『 sidebar.css 』のようにお好みの名称でもかまいません。

この記述を含めたhtmlファイルが以下です。

全体のhtml記述

基本的には 【 6 】トップページの一例 のページと同じ作りです。
違うのは左サイドバーがあることと、CSSファイルを別に用意していることくらいです。
本文内容や画像はご自分のサイト内容に合わせて書き換えてみてくださいね。
枠の右上、右から3つ目のアイコンをクリックすると全選択でコピー待ちの状態になります。

CSSファイルを作る

『 index.css 』ファイルを作ります。
お使いのテキストエディタで新規作成を行い、以下のコードをコピー&ペーストしてください。
枠の右上、右から3つ目のアイコンをクリックすると全選択でコピー待ちの状態になります。

subinfoの部分がメニューボタンの記述です。

【 2 】必要なソフトを準備するでご紹介したTeraPadを使った場合こんな感じになります。
テラパッドでファイル作成
ファイルを【 名前を付けて保存 】する際に、忘れずにファイルの種類(拡張子)をCSS (.css)にしてください。
テラパッドで名前をつけて保存
CSSのそれぞれの項目の細かいご説明については 【 12 】スタイルシート(CSS)の解説 の記事にて。

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

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

ちなみに index.html はトップページ、という暗黙の了解があるため、
http://あなたのドメイン というURLだけでもサイトのトップページにアクセスすることができます。

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

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

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