締切済み

サイドバーの作り方

2013/02/02 18:56

ホームページのサイドバー（サイドメニュー？）の作り方を教えてください。一応、HTML,CSS,Javascriptはできます。（「それくらい知っているんだったらできるだろ！！」と思う方も多いでしょうがお許しください。）ページ内はDIVタグで分類しています。

tomoyan412
お礼率14% (1/7)

CSS
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/02/03 14:23 回答No.3

どの程度HTML/CSSをご存知なのかわかりませんので、最初から説明します。 HTML(Hyper Text Markup Language)とは、ハイパー機能(リンク)可能な、文書をそれを構成する要素に分解して、それぞれの要素を(タグを使って)マークアップする言語です。・デザインは関係ありません。点字端末・スクリーンリーダー・検索エンジンなども　利用しますから。screenメディア(いわゆるPC用ブラウザなど)は、自前のスタイル　シートでたまたまそのように表示するだけ CSSはスタイルシートの一形式でCascading Style Sheetのことです。カスーディングという機能でとても扱いやすくなっています。＞ホームページのサイドバー（サイドメニュー？）の作り方を教えてください。　ホームページではなく、HTMLで書かれたウェブページのことだと思います。　⇒ホームページ - Wikipedia( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 ) 　これは、「HTMLにおけるメニューなりナビゲーションリストを、その親コンテナブロックの左右何れかに配置したい」と言う質問だと理解します。 1) まずHTMLは文書構造しか記述しませんから、　例えば長い本文とその目次でしたら <body> 　<header> 　　文書のヘッダ　</header> 　<section> 　　<section> 　　　本文　　</section> 　　<section> 　　　本文　　</section> 　　<section> 　　　本文　　</section> 　　<div id="contentTable"> 　　　目次　　</div> 　</section> 　<footer> 　　文書のフッタ　</footer> </body> ゜HTML4.01でしたら、この様な要素がないためclassを併用して文書構造をマークアップします。　⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) <body> 　<div class="header"> 　　文書のヘッダ　</div> 　<div class="section"> 　　<div class="section"> 　　　本文　　</div> 　　<div class="section"> 　　　本文　　</div> 　　<div class="section"> 　　　本文　　</div> 　　<div id="contentTable"> 　　　目次　　</div> 　</div> 　<div class="footer"> 　　文書のフッタ　</div> </body> とかになるでしょう。　こうしてできたHTMLをその文書構造にしたがってスタイルシートで、screenmedua用にデザインして行きます。　この場合、本文の左におくとすると [HTML5]用でしたら section{ min-height:300px;/* 一応最低限の高さを */ position:relative;/* 位置やサイズの基準にするため */ } section section{ margin-left:20%;/* 左を20%ほど空けておく */ min-height:0:/* 子孫のsectionは解除しておく */ } section div.contentTable{ width: 20%; position:absolute;top:0;left:0;/* 絶対配置で本文の左に--右ならright */ height:100%;/* 本文高さにあわせる */ } [HTML4.01]用でしたら div.section{ min-height:300px; position:relative; } div.section div.section{ margin-left:20%; min-height:0: } div.section div.contentTable{ width: 20%; position:absolute;top:0;left:0; height:100%; } とかになります。

ログインすると、全ての回答が全文表示されます。