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

   2018/07/09   icon-clock-o読了時間:約24分5秒

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

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

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

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

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

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

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

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

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

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

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

CSSファイル呼び出しコード
<head>

<link rel=”stylesheet” type=”text/css” href=”index.css”>

</head>

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

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

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

全体のhtml記述

基本的には 【6】トップページの一例 のページと同じ作りです。
違うのは左サイドバーがあることと、CSSファイルを別に用意していることくらいです。
本文内容や画像はご自分のサイト内容に合わせて書き換えてみてくださいね。

コード
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis”>
<meta content=”text/css” http-equiv=”Content-Style-Type”>
<title>サイトの名前</title>
<meta name=”keywords” content=”サイトに関連するキーワード,あんまりいっぱい入れちゃ逆効果,多くても10個くらいで,例えば『 猫,犬,ペットショップ,高松市 』のように単語を入れてください,区切りは『 , 』で”>
<meta name=”description” content=”検索結果に出てくるサイト名の下の説明文。”>
<!– このCSSファイル↓を呼び出して使います –>
<link rel=”stylesheet” type=”text/css” href=”index.css”>
</head>

<!– ここから下がページのメインコンテンツです –>
<body>
<header><img src=”トップ画像のURL” alt=”トップ画像” width=”1080px” height=”100px”> </header>

<!– 左サイドメニュー –>
<div class=”leftmenu”>
<div class=”subinfo”> 電話番号など </div>

<!– メニュー –>
<div class=”subinfo”>
<ul>
<li><a href=”backlight.html”>更新情報</a></li>
<li><a href=”motherboard.html”>文書</a></li>
<li><a href=”hdd.html”>画像</a></li>
<li><a href=”dvd.html”>お問い合わせ</a></li>
<li><a href=”antivirus.html”>リンク</a></li>
</ul>
</div>
<br clear=left>
<div class=”subinfo”> <img src=”画像のURL” width=”幅” height=”高さ”></div>
<br clear=left>
</div>
<div class=”main”>
<h1>H1 タイトル <div name=”top” id=”top”></div></h1>
<h2>H2 タイトル</h2>
<p>本文</p>
<p><a href=”メールページのURL” rel=”external”>メールフォーム</a>から
お気軽にご相談ください。 </p>
<h3>H3 タイトル</h3>
<!– テーブル(表)で複数項目の見た目を整える –>
<table class=”table” summary=”会社概要”>
<tr>
<td>社名</td>
<td>会社名</td>
</tr>
<tr>
<td>店舗所在地</td>
<td>住所</td>
</tr>
<tr>
<td>TEL/FAX</td>
<td>TEL:  FAX:</td>
</tr>
<tr>
<td>営業時間</td>
<td>月~金 9:00~17:00</td>
</tr>
<tr>
</table>
<br clear=left>
<h3>H3 タイトル</h3>
<!– 下線 –>
<u>ドリンク</u><br clear=left>
<!– リストボックス –>
<div class=”box”>
<ul>
<li>コーヒー
<li>エスプレッソ
<li>カフェオレ
<li>オレンジジュース
<li>グレープフルーツジュース
<li>紅茶
<li>コーラ
</ul>
</div>
<br clear=left>
<br clear=left>
<img src=”画像URL” width=”幅” height=”高さ”><span class=”backcolor”>  背景色を変えて文字色を白に  </span> <br clear=left>
<br clear=left>
<br clear=left>
&nbsp;<a href=”#top”>▲このページの上部に戻る</a> </div>
<br clear=left>
<!– フッター –>
<div class=”footer”> <br>
Copyright (C) コピーライト表記<br>
</div>
</body>
</html>

CSSファイルを作る

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

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

CSSファイル
@charset “shift_jis”;
/* 全ての要素に対してとりあえず適用 */
* {
margin : auto;
padding: 0px;
font-size: 96%;
}
/* ページ全体 */
.page {
width: 1080px;
text-align: center;
background-color: #FFF;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
float: left;
clear: none;
}
body {
font-size:95%;
color:#660;
background-color:#ffffff;
width: 1080px;
font-family:Verdana, “游ゴシック”, YuGothic, “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
}
p {
color: #000033
}
.leftmenu {
background-color:#D8FF9D;
float: left;
clear: none;
width: 230px;
height: 1500px;
text-align: center;
font-size: 100%;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
padding: 0px;
font-family: Verdana, “游ゴシック”, YuGothic, “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
}
p, .main ul, .leftmenu ul {
line-height: 160%;
list-style-position: inside;
}
.subinfo {
font-size: 100%;
text-align: center;
font-weight: bold;
width: 230px;
color: #630;
background-color: #D8FF9D;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
padding: 0px;
}
.subinfo li {
font-size: 100%;
color: #630;
list-style-type: none;
width: 210px;
float: left;
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-position: inside;
}
.subinfo li a {
text-decoration: none;
border-right-width: 10px;
border-bottom-width: 1px;
border-left-width: 10px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #660;
border-left-color: #660;
border-right-color: #660;
background-color: #FFC;
width: 210px;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
display: block;
color: #030;
}
.subinfo li a:hover {
color: #FFC;
background-color: #808040;
border-left-width: 10px;
border-left-style: solid;
border-left-color: #FFC;
border-bottom-width: 1px;
border-bottom-style: solid;
border-right-width: 10px;
border-right-style: solid;
border-right-color: #FFC;
border-bottom-color: #FFC;
}
.main {
float: right;
width: 800px;
background-color: #FFF;
margin-left: auto;
margin-right: auto;
text-align:left;
font-size: 100%;
height: 1500px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
}
/* 見出し */
h1 {
background-color: #FFC;
clear:left;
color:#630;
font-size:105%;
height: 50px;
line-height: 50px;
font-weight: bold;
border: 1px solid #999;
margin-top: 5px;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 10px;
}
h2 {
background-color: #FFF;
font-size: 110%;
text-align: left;
text-indent:1em;
color: #F69;
line-height: 40px;
margin: 5px;
padding: 0px;
font-weight: bold;
border-bottom-style: double;
width: 600px;
}
h3 {
background-color: #FFF;
font-size: 100%;
text-align: left;
text-indent:1em;
color: #630;
line-height: 35px;
font-weight: bold;
border-bottom-style: dotted;
width: 600px;
margin-top: 60px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 0px;
padding: 0px;
}
/* テーブル(表) */
.table {
width: 530px;
float: left;
margin-bottom: 30px;
}
.table th {
text-align: left;
border: 1px solid #808080;
}
.table td {
text-align:center;
border: 1px solid #808080;
height: 30px;
line-height: 30px;
}
.box {
width:400px;
float: left;
height: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
list-style-position: inside;
list-style-type: none;
font-size: 100%;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
list-style-image: url(アイコン画像のURL);
}
/* 文字背景色 */
.backcolor {
background-color:#F36;
color:#ffffff;
}
/* フッター */
.footer {
clear: both;
border-top: 1px solid #999999;
border-bottom: 1px solid #666;
text-align: center;
background-color: #FFF;
font-size: 90%;
width: auto;
margin: 0px;
}

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

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

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

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

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

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

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