JavaScript + Ajax 実践サンプル集

左側にメニューを表示(CSS版)

説明補足説明コード分割コードコメント投稿

このサンプルは、スタイルシートを使用してメインコンテンツの下に配置されているナビゲーションメニューを左上に表示します。メニューをメインコンテンツの下に配置すると、本文の重要なキーワードが検索エンジンにインデックスしやすくなります。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
margin:0 auto;
padding:0;
font:76% Verdana,Tahoma,Arial,sans-serif;
background:#f4f4f4;
color:#303030;
}

#wrap {
background:#ffffff;
color:#303030;
margin:0 auto;
width:760px;
position: relative; /* tip */

}

#header {
margin:10px 0 0;
padding:0;
height:45px;
}

#header h1 {
color:#505050;
background-color:inherit;
width:250px;
margin:0 0 10px;
font-size:2.2em;
float:left;
}

#header h1 a{
color:#505050;
background-color:inherit;
text-decoration:none;
}

#leftside {
clear:left;
float:left;
width:140px;
margin:0 0 5px;
padding:0;
position: absolute; /* tip */	
left: 3px;          /* tip */
top: 55px;          /* tip */
}

#leftside h2,#leftside h3 {
color:#505050;
background-color:inherit;
font-size:1.3em;
margin:0 0 5px;
padding:0;
}

ul.menu {
width:140px;
margin:0 0 18px;
padding:0;
list-style:none;
}

ul.menu li {
width:140px;
padding:0;
line-height:1.4em;
display:inline;
}

ul.menu li a {
background-color:#f4f4f4;
color:#505050;
font-weight:bold;
width:130px;
float:left;
margin-bottom:5px;
padding:5px 1px 5px 5px;
border-left:4px solid #cccccc;
text-decoration:none;
}

ul.menu li a:hover,ul.menu li a.current {
background-color:#eaeaea;
border-left:4px solid #286ea0;
color:#505050;
}

ul.menu ul {
margin:0 0 0 15px;
padding:0 0 5px 0;
font-size:0.9em;
width:125px;
}

ul.menu ul a {
padding:3px 1px 3px 5px;
width:115px;
}

ul.menu ul ul {
width:113px;
}

ul.menu ul ul a {
width:100px;
}

#content {
margin:0 0 5px 150px;
border-left:1px solid #f0f0f0;
padding:0 0 0 10px;
line-height:1.6em;
}

#content h2 {
font-size:1.6em;
margin:0 0 10px;
}

#content h3 {
font-size:1.4em;
margin:0 0 8px;
}

#footer {
clear:both;
margin:0 auto;
padding:10px 0 20px;
border-top:4px solid #f0f0f0;
width:760px;
text-align:center;
color:#808080;
background:#ffffff;
font-size:0.9em;
}

#footer a:hover {
text-decoration:underline;
}

</style>
</head>
<body>

<div id="header">
    <h1>Header</h1>
  </div>

<div id="content">
    <h2>Main Content</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, 
      commodo lacinia massa diam vel eros. Proin eget urna. 
      Nunc fringilla neque vitae odio. Vivamus vitae ligula.     
    </p>
  </div>

</div>

</body>
</html>

CSS部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
body {
margin:0 auto;
padding:0;
font:76% Verdana,Tahoma,Arial,sans-serif;
background:#f4f4f4;
color:#303030;
}

#wrap {
background:#ffffff;
color:#303030;
margin:0 auto;
width:760px;
position: relative; /* tip */

}

#header {
margin:10px 0 0;
padding:0;
height:45px;
}

#header h1 {
color:#505050;
background-color:inherit;
width:250px;
margin:0 0 10px;
font-size:2.2em;
float:left;
}

#header h1 a{
color:#505050;
background-color:inherit;
text-decoration:none;
}

#leftside {
clear:left;
float:left;
width:140px;
margin:0 0 5px;
padding:0;
position: absolute; /* tip */	
left: 3px;          /* tip */
top: 55px;          /* tip */
}

#leftside h2,#leftside h3 {
color:#505050;
background-color:inherit;
font-size:1.3em;
margin:0 0 5px;
padding:0;
}


ul.menu {
width:140px;
margin:0 0 18px;
padding:0;
list-style:none;
}

ul.menu li {
width:140px;
padding:0;
line-height:1.4em;
display:inline;
}

ul.menu li a {
background-color:#f4f4f4;
color:#505050;
font-weight:bold;
width:130px;
float:left;
margin-bottom:5px;
padding:5px 1px 5px 5px;
border-left:4px solid #cccccc;
text-decoration:none;
}

ul.menu li a:hover,ul.menu li a.current {
background-color:#eaeaea;
border-left:4px solid #286ea0;
color:#505050;
}

ul.menu ul {
margin:0 0 0 15px;
padding:0 0 5px 0;
font-size:0.9em;
width:125px;
}

ul.menu ul a {
padding:3px 1px 3px 5px;
width:115px;
}

ul.menu ul ul {
width:113px;
}

ul.menu ul ul a {
width:100px;
}

#content {
margin:0 0 5px 150px;
border-left:1px solid #f0f0f0;
padding:0 0 0 10px;
line-height:1.6em;
}

#content h2 {
font-size:1.6em;
margin:0 0 10px;
}

#content h3 {
font-size:1.4em;
margin:0 0 8px;
}

#footer {
clear:both;
margin:0 auto;
padding:10px 0 20px;
border-top:4px solid #f0f0f0;
width:760px;
text-align:center;
color:#808080;
background:#ffffff;
font-size:0.9em;
}

#footer a:hover {
text-decoration:underline;
}

このサンプルを編集して試してみる!

ナビゲーションメニューを任意の位置に表示するには、div要素(wrap)内にheader, content, leftsideのdiv要素をネストさせます。#wrapのCSSには、position: relativeを追加して相対位置をwindowではなくwrapのdiv要素に切り替えます。メニューを左上に表示するには、#leftsideのCSSにposition: absolute, left: 3px, top: 55pxを追加します。leftとtopの値を書き換えることにより任意の位置にメニューを表示することができます。

#wrap {   
background:#ffffff;   
color:#303030;   
margin:0 auto;   
width:760px;   
position: relative;
}  
#leftside {   
clear:left;   
float:left;   
width:140px;   
margin:0 0 5px;   
padding:0;   
position: absolute;       
left: 3px;  
top: 55px;
}

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

左側にメニューを表示(CSS版)