サイドバーの作り方を教えてください

解決済

質問者：tkwavek
質問日時：2011/03/10 12:36
回答数：2件

掲載した画像のようなサイドバーのプログラムコードを教えてください
イメージ画像は使わない方法でお願いします。

こらなくていいのでわかりやすくて単純なプログラムの投稿をお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2011/03/11 13:35

＞掲載した画像のような

＞イメージ画像は使わない方法
＞こらなくていいのでわかりやすくて単純な
といっても画像の例がそれなりなので、どこまで単純化したものが知りたいのか？
単純で良いならもっと単純な例を示すべきでは？

作り方も一律ではないでしょうし、ネットでいろんなサイトを見れば、いろいろなタイプのメニューがあると思います。（メニューの作り方のサイトもあります。）
気に入った（気になった）ものを見つけたら、その「ソース」を見て見ましょう。
（ブラウザによって違いますが、必ず「ソースを表示」のようなメニューがあるはず）

それで、どのようにHTMLのマークアップがされているかわかりますので、参考にするのがよろしいかと。
CSS（スタイルシート）はHTML内に記されている場合と、別ファイルになっている場合とがありますが、別ファイルでもそのurlがソース内に記されています。
（<link rel="stylesheet" ～～～　>とあるところ）
そのurlをアドレスバーに入れればCSSも閲覧が可能なので、参考にできるでしょう。
わからないことがあれば調べて理解してゆくことで、だんだん複雑なものにも対応可能になってゆくと思われます。

多少は似せてみた、かなりいい加減な例を
* 通常は文字フォントやサイズ、リンク要素のサイズ等を指定すると思いますがあえてはずしています。
　（ブラウザの種類や設定によって表示が変わります）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
#navi, #navi *{
margin:0;
padding:0;
}
#navi{
width:200px;
background-color:#e4e8e4;
}
#navi .title{
padding-left:1em;
color:#fff;
background-color:#408090;
border-top:5px solid #60a0a0;
border-bottom:2px solid #2f4f5f;
}
#navi .menu{
margin-top:5px;
padding:5px;
border-top:2px ridge #fff;
}
#navi .menu ul{
padding:3px;
list-style-type:none;
background-color:#f8f8f8;
}
#navi .menu ul li{
border-top:1px solid #fff;
border-bottom:1px solid #ccc;
}
#navi a{
display:block;
padding:4px;
text-decoration:none;
color:#000;
background-color:#f0f4f0;
}
#navi a:hover{
background-color:#b0d0d8;
}
#navi .arrow{
margin-left:0.3em;
margin-right:0.8em;
padding:2px;
color:#fff;
font-size:0.8em;
font-weight:bold;
background-color:#0bc;
}
</style>
</head>
<body>

<div id="navi">
<div class="title">メインメニュー</div>

<div class="menu">
<ul>
<li><a href="#"><span class="arrow">→</span>トップページ</a></li>
<li><a href="#"><span class="arrow">→</span>プロフィール</a></li>
<li><a href="#"><span class="arrow">→</span>Contact</a></li>
<li><a href="#"><span class="arrow">→</span>ブログ</a></li>
<li><a href="#"><span class="arrow">→</span>作成したシステム</a></li>
</ul>
</div>
</div>

</body>
</html>

- 0
- 件

通報する

No.1

回答者： DrFell
回答日時：2011/03/10 21:57

プログラムではないのですが、いいですか？

わかりやすく単純なプログラムですね。ハイハイ基本はこれです。
<ul>
<li><a href="#a1">トップページ</a></li>
<li><a href="#a2">プロフィール</a></li>
<li><a href="#a3">Contact</a></li>
</ul>
少しこりましょうか？
やっぱりプログラムではないのですが、
</head>
の上に入れてください。
<style type="text/css">
ul{padding:5px;background:#eeeeee;width:160px;}
li{list-style:none;width:160px;}
li a:link{display:block;text-decoration:none;background-color:#cccccc;border:1px solid white;height:20px;}
li a:hover{background:#feefef;border:1px solid red;}
</style>
もう少しこりましょうかね？やはりプログラムではないのですが。
先ほど<head>内にいれたものを以下に差し替えてください。
<style type="text/css">
ul{padding:5px;background:#eeeeee;width:160px;}
li{list-style:none;width:160px;}
li a:link{display:block;text-decoration:none;border:1px solid white;height:20px;background: #feffff;background: -moz-linear-gradient(top, #feffff 0%, #E0FCE0 100%, #a0d8ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#E0FCE0), color-stop(100%,#a0d8ef));filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 );}
li a:hover{background:#feefef;border:1px solid red;}
</style>
ちょっと複雑化しましたので、このあたりで失礼します。