- 締切済み
サイドバーの作り方
ホームページのサイドバー（サイドメニュー？）の作り方を教えてください。 一応、HTML,CSS,Javascriptはできます。 （「それくらい知っているんだったらできるだろ！！」と思う方も多いでしょうがお許しください。） ページ内はDIVタグで分類しています。
- tomoyan412
- お礼率14% (1/7)
- CSS
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
どの程度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%; } とかになります。
